/* Nokime Manager, the site: white, with Manager yellow. One stylesheet for every page, the account pages included.
   Newsreader for the figures and the voice, Hanken Grotesk to read, JetBrains Mono for the small print. Every colour goes
   through a token on :root; there is no dark theme. Yellow is a fill with ink on it; text on white uses the deeper gold.
   Nothing is set under 11 px. */

@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-variable.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-italic-variable.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/hanken-grotesk-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-variable.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Wordmark";src:url("/fonts/archivo-wordmark.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --bg:#FFFFFF; --paper:#FFFFFF; --hair:#E7E3D4; --app-paper:#F7F6F1; --rule-soft:#C9C5B2; --field:#7C806F;
  --ink:#1B1E17; --ink-2:#464A3E; --ink-3:#5C6052;
  --gold:#E7C370; --gold-deep:#8C6917; --gold-mid:#C9972A; --gold-soft:rgba(231,195,112,.38); --gold-wash:#FBF3DC; --on-gold:#1B1E17;
  --ok:#2F6F41; --bad:#A8352A; --warn:#9A6414; --amber:#E3921F;
  --hatch:rgba(27,30,23,.28); --warn-bg:rgba(27,30,23,.07);
  --focus:#1B1E17;
  --art-1:#FBF1D2; --art-2:#F0D791; --art-line:#3A2D0E; --door-low:#FFFDF8;
  --serif:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:40px; --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;width:100%;min-width:0}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.wrap{width:min(var(--wrap),calc(100% - 2*var(--pad)));margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;background:var(--gold);color:var(--on-gold);padding:10px 16px;font-weight:600;z-index:20}
.skip:focus{top:12px}

/* ---------- buttons and links ---------- */
/* a plain button (the account pages: btn small, btn danger) keeps a thin boundary, ink-3 on white (6.6:1); the gold one is a
   flat fill; the quiet one is underlined text */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border:1px solid var(--ink-3);border-radius:4px;
  font:600 15px/1 var(--sans);text-decoration:none;color:var(--ink);background:transparent;white-space:nowrap;cursor:pointer}
.btn:not(:disabled):hover{background:var(--gold-wash)}   /* a disabled button (the account pages) takes no hover */
.btn-gold,.btn.primary{background:var(--gold);color:var(--on-gold);border:0;border-radius:4px;min-height:46px;padding:0 26px;font-size:15.5px}
.btn-gold:not(:disabled):hover,.btn.primary:not(:disabled):hover{background:var(--gold-mid)}
.btn-quiet{min-height:46px;padding:0 6px;border:0;border-radius:0;background:none;font:600 15.5px/1 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-mid);text-decoration-thickness:2px;text-underline-offset:7px}
.link{font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-mid);text-decoration-thickness:2px;text-underline-offset:5px}
.link:hover{background:var(--gold-soft)}

/* ---------- header and footer, shared by every page ---------- */
.top{background:var(--bg)}
.top-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:16px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.mark{width:34px;height:34px;flex:none}
.mark .ma{fill:var(--ink)} .mark .mb{fill:var(--gold-mid)}
.words{display:flex;flex-direction:column;line-height:1}
.wm{font:400 14px/1 "Archivo Wordmark",var(--sans);letter-spacing:.02em;text-transform:lowercase}
.nm{font:420 24px/1 var(--serif);letter-spacing:-.01em;margin-top:3px}
.nav{display:flex;gap:30px;justify-content:center}
.nav a{font-weight:500;font-size:15px;text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--gold-deep)}
.top-act{display:flex;align-items:center;gap:12px}
.top-login{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font:500 15px/1 var(--sans);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.lang{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0;font:600 13px var(--mono);border:0;border-radius:0;letter-spacing:.08em;background:transparent;color:var(--ink-3);cursor:pointer}
/* hover and focus-visible in two rules: Safari before 15.4 drops a whole rule that names :focus-visible */
.top-login:hover,.lang:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-mid);text-decoration-thickness:2px;text-underline-offset:6px}
.top-login:focus-visible,.lang:focus-visible{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-mid);text-decoration-thickness:2px;text-underline-offset:6px}
.foot{padding:8px 0 44px;margin-top:0}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap}
.foot-tool{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 28px}
.foot-nav a{font-size:15px;text-decoration:none;border-bottom:1px solid var(--rule-soft);padding:6px 0}
.foot-nav a:hover{background:var(--gold-soft);border-bottom-color:var(--gold-deep)}


/* ---------- titles; the 404 page's button row ---------- */
h1{font:380 clamp(40px,5.6vw,84px)/.98 var(--serif);letter-spacing:-.03em;text-wrap:balance;font-variation-settings:"opsz" 72}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}

/* ---------- the front page (docs/site-plan.md section 2e): the door « La balance », four pictures, the prices ---------- */
#main:focus,#site:focus{outline:none}   /* focused by the skip link and « Entrer dans Manager »: targets, not controls */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.h1-after{display:none}
.door[hidden]~main .h1-after{display:block}   /* one h1 at a time: the door's, then this one once the door has gone */

/* the drawings of the door, the home and the offers page's plates: one line weight, except the plates' heavier phone strokes */
.art{display:block;width:100%;height:100%}
.art .b1{fill:var(--gold)}
.art .b2{fill:var(--gold-mid)}
.art .b3{fill:#A97D1E}
.art .c1,.art .f1{fill:var(--art-1)}
.art .c2,.art .f2{fill:var(--art-2)}
.art .f3{fill:var(--gold)}
.art .w{fill:#FFFFFF}
.art .w2{fill:#F7F5EE}
.art .ink,.art .dot{fill:var(--art-line)}
.art .o,.art .sf,.art .s,.art .d,.art .hi,.art .hi2,.art .grill,.art .filet{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.art .o,.art .sf{stroke:var(--art-line);stroke-width:2px}
.art .o:not(.b1):not(.b2):not(.c1):not(.c2):not(.f1):not(.f2):not(.w){fill:none}
.art .s{fill:none;stroke:var(--art-line);stroke-width:1.6px}
.art .d{fill:none;stroke:var(--art-line);stroke-width:1px}
.art .w2.d{fill:#F7F5EE}
.art .f1.d{fill:var(--art-1)}
.art .b2.d{fill:var(--gold-mid)}
.art .b1.d{fill:var(--gold)}
.art .r1,.art .r1.d{fill:var(--bad)}
.art .g1,.art .g1.d{fill:var(--ok)}
.art .y1,.art .y1.d{fill:var(--amber)}
.art .tk0{stroke-width:1.6px}
.art .hi{fill:none;stroke:#FFFFFF;stroke-width:1.6px;opacity:.9}
.art .hi2{fill:none;stroke:var(--hair);stroke-width:1.4px}
.art .grill{fill:none;stroke:#8C6917;stroke-width:3px;opacity:.55}
.art .filet{fill:none;stroke:var(--gold-mid);stroke-width:1.3px}
.art .counter{fill:var(--rule-soft)}
.art .eur{font:600 19px/1 var(--serif);fill:var(--gold-deep)}
.art .maker{font:400 9.6px/1 "Archivo Wordmark",var(--sans);letter-spacing:.06em;fill:var(--art-line)}

/* the door: one screen, the question, one button, the scale */
.door{flex:none;position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100svh;min-height:600px;overflow:hidden;background-color:var(--bg);
  /* La lumière: the pool, floor and shadows are drawn in the scene's svg; here the wall warms toward the floor, under a faint
     grain whose ink colour (.24 .18 .05) lives in the data URI, which cannot read a token. tools/og-card.mjs drops this first layer */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .18 0 0 0 0 .05 5 0 0 0 -3.1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"),linear-gradient(180deg,var(--bg) 0,var(--bg) 45%,var(--door-low) 100%);
  background-size:200px 200px,auto}

/* top row: the lock-up on the left, two text controls on the right (44 px targets) */
.d-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:44px;margin-top:20px;padding:0 calc(var(--pad) - 8px) 0 var(--pad)}
.d-top .brand{min-height:44px}
.d-act{display:flex;align-items:center;gap:4px}
.d-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;font:500 15px/1 var(--sans);color:var(--ink-2);text-decoration:none;background:none;border:0;cursor:pointer}
.d-link:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-mid);text-decoration-thickness:2px;text-underline-offset:5px}

/* the stage: question, line, button and scale as one group, centred in the height left under the top row */
.d-stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0 28px}
.door h1{margin:0;padding:0 24px;font:400 clamp(42px,5.2vw,72px)/1.02 var(--serif);letter-spacing:-.025em;font-variation-settings:"opsz" 72;text-align:center;text-wrap:balance;color:var(--ink)}
.door h1 em{font-style:italic;font-weight:400;color:var(--gold-deep)}   /* the Nokime way: italic and colour, no box */
.door h1 br.m{display:none}
.door h1 .nw{white-space:nowrap}
.d-line{margin:16px 0 0;padding:0 24px;font:400 19px/1.45 var(--sans);color:var(--ink-2);text-align:center}
.door .d-enter{margin-top:28px}

/* the scene: viewBox 664x262; as wide as the window allows, up to 1000 px; the text above it takes about 440 px of height.
   Its counter hairline runs past the drawing to both edges of the screen (overflow visible, the door clips it). */
.d-scene{flex:none;display:block;margin-top:clamp(28px,5.5vh,56px);width:min(1000px,calc(100% - 48px),calc((100vh - 440px) * 2.534));width:min(1000px,calc(100% - 48px),calc((100svh - 440px) * 2.534));min-width:min(560px,calc(100% - 16px));height:auto;aspect-ratio:664/262;overflow:visible;
  pointer-events:none}   /* the light and the floor overflow the svg, over the button above it: the drawing never takes a click */
/* L'étagère, the kitchen behind the scale (tools/site-src/kitchen.py): thin warm-grey lines, very pale steel, no gold. Its
   pieces are <use> clones, so each class stands alone. The two greys are the art line at 40 % and 22 % on white, written
   out because Safari before 16.2 has no color-mix(). */
.kit{fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round}
.kit-a,.kit-b,.kit-d,.kit-e,.kit-w,.kit-x,.kit-t,.kit-h,.kit-s{vector-effect:non-scaling-stroke}
.kit-a,.kit-b,.kit-e{stroke:#B0AB9F;stroke-width:1.1px}   /* a steel, b darker steel, d contents, e line only */
.kit-a{fill:#F7F5F0}
.kit-b{fill:#EAE7DE}
.kit-d{fill:#F1ECDE}
.kit-w,.kit-x{stroke:#D4D1CA;stroke-width:1px}
.kit-x{fill:#FFFEFB}
.kit-t{stroke:#B0AB9F;stroke-width:2.2px}
.kit-h{stroke:#fff;stroke-width:1.4px}
.kit-s{stroke:#B0AB9F;stroke-width:1.7px}
.kit-g{stroke:#D4D1CA;stroke-width:4.4;stroke-linecap:butt;stroke-dasharray:.9 7.1}   /* the grooves on the posts */
.kit-p{display:none}

/* motion state: set by the inline script at the end of #door, only when motion is allowed; the weights wait to be set down,
   the red (with the dial's amber middle and the price half's green) waits for the needle to cross into the red zone. Out of it, the two lifted weights are gone (the final frame) */
html.door-anim .wt,html.door-anim .rd{opacity:0}
.art .off{opacity:0}

/* the home: four pictures standing on one line, titles on one baseline */
.blocks{padding:96px 0 72px}
.blocks-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 40px}
.blk{display:grid;grid-template-rows:112px auto 1fr;row-gap:0;min-width:0}
.blk-pic{display:flex;align-items:flex-end;margin-bottom:24px}
.pic{display:block;height:100px;width:auto;max-width:100%;overflow:visible}
.blk h2{font:400 28px/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.blk p{font:400 17px/1.5 var(--sans);color:var(--ink-2);max-width:30ch}

/* the end: price sentence and its button on one row under a hairline, the tariffs link, then « + En savoir plus » */
.h-end{padding:0 0 72px}
.end-row{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;padding-top:32px;border-top:1px solid var(--hair)}
.h-end .pl-text{margin:0;font-size:24px;max-width:44ch}
.h-end .pl-link{margin:1px 0 31px}
.h-end .pl-link .link{display:inline-flex;align-items:center;min-height:44px}
.more{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:44px;padding:16px 0;font:420 clamp(20px,1.9vw,24px)/1.2 var(--serif);letter-spacing:-.015em}
.more summary::-webkit-details-marker{display:none}
.more .pm{flex:none;width:16px;text-align:center;font:500 1.1em/1 var(--sans)}
.more .pm::before{content:"+"}
.more[open] .pm::before{content:"\2212"}
.more p{max-width:60ch;padding:0 0 18px;color:var(--ink-2)}
.pl-text{font:400 clamp(22px,2.4vw,32px)/1.25 var(--serif);letter-spacing:-.015em}
.pl-text b{font-weight:420;background:linear-gradient(transparent 62%,var(--gold-soft) 62%)}

/* steps (the contact page) */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin:48px 0 8px}
.steps li{position:relative;padding-top:26px;border-top:2px solid var(--ink)}
.steps li::before{content:"";position:absolute;left:0;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.steps li:last-child::before{background:var(--gold)}
.st-n{display:block;font:340 76px/1 var(--serif);letter-spacing:-.04em;color:var(--gold-deep);font-variant-numeric:lining-nums;margin-bottom:14px}
.steps h2{font:420 23px/1.18 var(--serif);letter-spacing:-.015em}
.steps p{color:var(--ink-2);margin-top:10px;font-size:16px}

/* Questions */
.qa{max-width:780px;border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font:420 clamp(20px,1.9vw,25px)/1.2 var(--serif);letter-spacing:-.015em;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:16px;height:16px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat}
.qa details[open] summary::after{background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat}
.qa details p{padding:0 40px 22px 0;color:var(--ink-2);max-width:60ch}


/* ---------- the other public pages ---------- */
.page-head{padding:64px 0 0;margin-bottom:56px}
.page-head h1,.account-main h1{font:400 clamp(32px,3.4vw,44px)/1.1 var(--serif);letter-spacing:-.022em;font-variation-settings:"opsz" 48;color:var(--ink)}
.page-head .sec-lede{margin-top:14px;font-size:17px;color:var(--ink-2);max-width:56ch}
.page-head.page-head-c{text-align:center;margin-bottom:0}   /* the offers page: the plates' own padding follows */
.page-head-c .sec-lede{margin-inline:auto;max-width:720px;text-wrap:balance}

/* the offers page, « Les assiettes »: three drawings, each set back from one counter line; no card, no border, no shadow */
.dish-pic{display:block;width:100%;height:auto;overflow:visible}
.dishes{overflow:hidden;overflow:clip;padding:56px 0 88px}   /* the counter lines run to the window's edges */
.dish-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);column-gap:24px;align-items:start}
.dish{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.dish:nth-child(3){margin-left:64px}   /* the two paid plates stand together, the founders' cloche a little apart */
.dish-art{width:100%;max-width:400px;margin:0 0 22px}
.dish h2{font:400 28px/1.1 var(--serif);letter-spacing:-.018em;color:var(--ink)}
.dish-money{margin-top:14px}
.dish-price{font:360 40px/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:lining-nums}
.dish-price b{font-weight:360}
.dish-price .per{font:italic 360 19px/1 var(--serif);letter-spacing:0;margin-left:.45em;color:var(--ink-2)}
.dish-alt{margin-top:8px;font:italic 360 18px/1.2 var(--serif);color:var(--ink-2)}
.dish-alt b{font-style:normal;font-weight:420;color:var(--ink)}
.dish-big{font:400 28px/1.15 var(--serif);letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.dish-text{margin-top:16px;max-width:31ch;font:400 16px/1.55 var(--serif);letter-spacing:-.015em;color:var(--ink-2);text-wrap:pretty}   /* serif, as the concept's render: there it inherited the home's .pl-text face */
.dish-lines span{display:block}
.dish-lines span+span{margin-top:4px}
.dish-act{margin-top:26px}
/* the columns share their rows where the browser can: counter line, names, prices, texts and buttons on one level */
@supports (grid-template-rows:subgrid){
  .dish-row{grid-template-rows:auto auto auto 1fr auto;row-gap:0}
  .dish{display:grid;grid-row:span 5;grid-template-rows:subgrid;justify-items:center;align-items:start;align-content:start}
  .dish-art{align-self:end}
  .dish-text{align-self:start}
}
/* without subgrid each plate's drawing stands at its own height: its counter line stays inside its own drawing */
@supports not (grid-template-rows:subgrid){
  @media (min-width:901px){ .dish-pic{overflow:hidden} }
}
/* the loyalty sentence, and nothing under it */
.loyal{margin:64px auto 0;padding:0;border:0;max-width:52ch;text-align:center;font:italic 380 20px/1.4 var(--serif);color:var(--ink-2);text-wrap:balance}
.loyal::before{content:"";display:block;width:32px;height:2px;margin:0 auto 22px;background:var(--gold-mid)}
.faq-page{padding-bottom:96px}
.faq-more{margin-top:28px;color:var(--ink-2)}
.contact{padding-bottom:96px}
.contact-mail{margin-bottom:28px}
.mail{font:380 clamp(30px,5vw,64px)/1.1 var(--serif);letter-spacing:-.02em;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:4px;text-underline-offset:8px;word-break:break-word}
.mail:hover{background:var(--gold-soft)}
.contact-p{max-width:56ch;color:var(--ink-2);margin-top:36px}
.legal{padding-bottom:96px}
.prose{max-width:760px}
.prose h2{font:420 28px/1.15 var(--serif);letter-spacing:-.015em;margin:40px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-2);margin-top:12px}
.prose .link{font-weight:600}

/* ---------- the account pages, on the same tokens ---------- */
.account-main{max-width:560px;margin:0 auto;padding:48px var(--pad) 96px}
.admin-main{max-width:1040px}
.account-main h1{margin:0 0 12px}
.account-main h2{font:420 26px/1.15 var(--serif);letter-spacing:-.015em;margin:0 0 10px}
.account-main .lead{font-size:19px;color:var(--ink-2);margin:0 0 28px}
.account-main .small{font-size:14px;color:var(--ink-3)}
.account-section>.small{margin:0 0 18px}
.account-section{margin-top:44px;padding-top:28px;border-top:2px solid var(--ink)}
.account-form{margin:0 0 16px}
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.field label{font:600 14px/1.3 var(--sans)}
.field input,.field select,.field textarea{font:inherit;padding:12px 14px;border:1.5px solid var(--field);border-radius:2px;background:var(--bg);color:inherit;width:100%;min-height:44px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--ink);outline-offset:2px}
.field textarea{resize:vertical}
.field [aria-invalid="true"]{border-color:var(--bad)}
.field-hint{margin:0}
.field-err{margin:0;font-size:14px;color:var(--bad)}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:22px 0 14px}
.account-page .btn.small{min-height:36px;padding:6px 12px;font-size:14px}
.account-page .btn.danger{border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.5;cursor:default}
.note{margin:10px 0;padding:12px 14px;border-radius:2px;font-size:15px;border-left:4px solid var(--ink)}
.form-err{background:#FBEDEA;color:#7E241B;border-left-color:var(--bad)}
.form-ok{background:#EAF3EB;color:#1F4D2D;border-left-color:var(--ok)}
.table-wrap{overflow-x:auto}
.accounts{width:100%;border-collapse:collapse;font-size:14px}
.accounts th,.accounts td{text-align:left;padding:10px 10px 10px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.accounts thead th{font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-bottom:1.5px solid var(--ink)}
.accounts .num{text-align:right;white-space:nowrap}
.accounts .actions{display:flex;flex-wrap:wrap;gap:6px}
.status-invited{color:var(--warn)}
.status-disabled{color:var(--bad)}
.status-active{color:var(--ok)}

/* ---------- motion: only when asked for ---------- */
@media (prefers-reduced-motion:no-preference){
  .btn-gold,.btn.primary{transition:background-color .15s}
}

/* ---------- narrower screens ---------- */
@media (max-width:1060px){
  .blocks-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px}
  .dish-row{column-gap:20px}
  .dish:nth-child(3){margin-left:32px}
  .dish h2,.dish-big{font-size:25px}
}
@media (max-width:900px){
  :root{--pad:24px}
  .top-in{grid-template-columns:1fr auto;row-gap:4px;gap:4px 16px}
  .nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:22px;margin-left:-2px;flex-wrap:wrap}
  .steps{grid-template-columns:1fr;gap:40px}
  .page-head{padding-top:48px;margin-bottom:40px}
  .dishes{padding:40px 0 64px}
  .dish-row{display:flex;flex-direction:column;align-items:stretch;row-gap:72px}
  .dish{display:flex;grid-row:auto;align-items:center}
  .dish-art,.dish-text{align-self:auto}   /* the subgrid's end/start would push them sideways in the column */
  .dish:nth-child(3){margin-left:0}
  .dish-art{max-width:360px;margin-bottom:26px}
  .dish h2,.dish-big{font-size:28px}
  .dish-text{max-width:34ch}
}
@media (max-width:560px){
  :root{--pad:20px}
  body{font-size:16.5px}
  h1{font-size:clamp(36px,10.4vw,46px)}
  .nav{gap:6px 18px}
  .nav a{font-size:14.5px}
  .top-act{gap:8px}
  .st-n{font-size:52px;margin-bottom:8px}
  .account-main{padding:32px var(--pad) 72px}
}
@media (max-width:640px){
  /* phone 390x844: the question on three lines, a full-width button, the scale across the width; the group stays centred */
  .door{min-height:620px}
  .d-top{margin-top:10px;padding:0 10px 0 20px}
  .d-top .mark{width:28px;height:28px}
  .d-top .wm{font-size:12px}
  .d-top .nm{font-size:20px;margin-top:2px}
  .d-link{font-size:14px;padding:0 6px}
  .d-stage{padding:16px 0 24px}
  .door h1{font-size:clamp(34px,11.6vw,48px);line-height:1.04;padding:0 20px}
  .door h1 br.m{display:inline}
  .d-line{margin-top:14px;font-size:17px;padding:0 20px;text-wrap:balance}
  .door .d-enter{align-self:stretch;margin:24px 20px 0}
  .d-scene{width:100%;min-width:0;margin-top:56px}   /* the drawing (x 41-679 of 28-692) spans the width less 2 % a side */
  .art .o,.art .sf{stroke-width:1.4px}
  .art .s{stroke-width:1.1px}
  .art .d{stroke-width:.75px}
  .art .hi{stroke-width:1.1px}
  .art .grill{stroke-width:2px}
  .art .filet{stroke-width:1px}
  .door .maker{display:none}
  .kit-p{display:inline}
  .kit-v{transform:translateY(-30px)}   /* the kitchen fades in higher: the scene starts under the full-width button */
  .blocks{padding:64px 0 48px}
  .blocks-in{grid-template-columns:1fr;gap:44px}
  .blk{grid-template-rows:auto auto auto}
  .blk-pic{margin-bottom:16px}
  .pic{height:72px}
  .blk h2{font-size:26px}
  .blk p{font-size:16.5px}
  .end-row{flex-direction:column;align-items:flex-start;padding-top:28px}
  .h-end .pl-text{font-size:20px}
  .h-end .pl-link{margin:5px 0 23px}
  .h-end{padding-bottom:56px}
  .top-login{padding:0 8px;font-size:14px}
  .page-head h1,.account-main h1{font-size:clamp(30px,8.6vw,38px)}
  .page-head .sec-lede{font-size:16.5px}
  .dish-pic .o,.dish-pic .sf{stroke-width:1.8px}   /* the plates keep a heavier line than the door's scene */
  .dish-pic .s{stroke-width:1.4px}
  .dish-pic .d{stroke-width:.9px}
  .dish-pic .hi{stroke-width:1.4px}
  .dish-act{margin-top:20px}
  .dish-act .btn-gold{width:100%;min-width:260px}
  .loyal{margin-top:56px;font-size:18.5px}
}