/* kitchen.css — the new look, "Kitchen counter": cream paper, ink outlines, sticker colours, things that press
   and spring back. A layer of its own, loaded after style.css and the tools' stylesheets, so the older rules can be
   taken out part by part. What is in here:
     1. tokens (--k-*), light and dark, and the older tokens (style.css) pointed at them so every page shares the
        paper, the ink and the two typefaces
     2. the pieces every page can use: .k-btn, .k-pill, .k-card, .k-sticker, .k-kicker, .k-link, .k-wrap
     3. the top bar in the new colours (its structure is the older one: style.css .top)
     4. the home page: headline, promises, drop box, the explainer, the band for companies
   The flow in the drop box after a file is dropped has its own file, css/kitchen-flow.css, fetched with the flow.
   Fonts: Bricolage Grotesque (display) and Instrument Sans (body), both SIL OFL 1.1, self-hosted in vendor/fonts/. */
@font-face { font-family: "Bricolage"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../vendor/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2-variations"); }

/* ── 1. tokens ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* THE LAYERS, from the page up. A thing higher in this list covers the ones under it.
     --k-layer-tabs    the three tabs on the right edge and the trays' panels (Open tools, Recipe, Results)
     --k-layer-banner  the banner with what opens from it: the menu, its language list, the search's suggestions
     --k-layer-card    cards that ask something over the page (keep these steps, for companies, the welcome)
     --k-layer-tour    what the tour lights up
   The tool window and the dialogs are the browser's own top layer, above all of these; inside the tool window the
   trays keep their own place over the tool (--k-layer-in-window). */
:root { --k-layer-tabs: 6; --k-layer-banner: 10; --k-layer-card: 35; --k-layer-in-window: 40; --k-layer-tour: 45; }
:root {
  --k-paper: #FFF6E4; --k-card: #FFFFFF; --k-ink: #1D1B20; --k-muted: #645F6A; --k-line: #1D1B20;
  --k-yolk: #FFC61A; --k-tomato: #FF5C3E; --k-basil: #25A56A; --k-plum: #7250E0; --k-sky: #2F9BF0;
  --k-blush: #FFD9CF; --k-mint: #CFF1DF; --k-lilac: #E2DAFB; --k-butter: #FFEFB8; --k-ice: #D5ECFF;
  --k-on-color: #1D1B20;            /* text on a sticker colour (yolk, tomato, the tints): always the dark ink */
  --k-strong: #1D1B20; --k-on-strong: #FFF6E4; /* the one filled, darkest button of a group */
  --k-faint: color-mix(in srgb, var(--k-ink) 14%, transparent);
  --k-dash: color-mix(in srgb, var(--k-ink) 38%, transparent);
  --k-shadow-ink: #1D1B20;
  --k-shadow-sm: 3px 3px 0 var(--k-shadow-ink); --k-shadow: 4px 4px 0 var(--k-shadow-ink); --k-shadow-lg: 7px 7px 0 var(--k-shadow-ink);
  --k-display: "Bricolage", "Instrument Sans", system-ui, sans-serif; --k-body: "Instrument Sans", system-ui, sans-serif;
  --k-r-sm: 12px; --k-r: 16px; --k-r-lg: 24px; --k-r-xl: 30px;
  /* a spring with a little bounce, for what was pressed or dropped; a calm curve for the rest */
  --k-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --k-calm: cubic-bezier(.2, .8, .2, 1);
  /* a spring for something big that slides (a tray, a sheet): it lands a few pixels past and settles; --k-spring
     is for small things and would throw a panel 50 px too far */
  --k-spring-soft: cubic-bezier(.32, 1.2, .5, 1);
  /* the shadow of something that hangs on the right edge falls to the left */
  --k-shadow-left: -4px 4px 0 var(--k-shadow-ink);
  /* the older tokens, so pages that are not redone yet stand on the same paper */
  --paper: var(--k-paper); --panel: var(--k-card); --ink: var(--k-ink); --muted: var(--k-muted);
  --line: #DDD0B8; --soft: #F5EAD3; --yellow: var(--k-yolk); --yellow-ink: #1D1B20; --live: var(--k-ink);
  --display: var(--k-display); --body: var(--k-body);
  /* …their blue (links, selections) is plum, their green of "done" a basil that reads as text, their soft grey
     shadows the hard one: no surface keeps the older values */
  --blue: var(--k-plum); --blue-soft: var(--k-lilac); --local: var(--kt-ok);
  --shadow: var(--k-shadow-sm); --card-shadow: var(--k-shadow-sm); --card-lift: var(--k-shadow);
  /* what the tool screens need on top (css/kitchen-tools.css and the tools' own stylesheets): a red and a green that
     read as text, the hairline between rows, the inside of a field (paper: a hollow in the white board), the corner
     of fields and small buttons */
  --kt-danger: #B5301A; --kt-ok: #15704A; --kt-rule: color-mix(in srgb, var(--k-ink) 16%, transparent); --kt-field: var(--k-paper); --kt-r: 12px;
}
/* Dark: the same counter at night. The paper turns to a warm near-black, the outlines and the hard shadows turn
   to cream (the outline is what makes the look, so it stays at full strength), the sticker colours stay as they
   are with dark text on them, and the tints turn into deep versions of themselves. */
/* (dark: the outlines are dim, #6F6878, the founder's choice of 2026-10-11: 3.4 to 1 on the page, 3.0 to 1 on a card.
   What must stay bright does not stand on --k-line: text and icons are --k-ink, the focus ring is --k-plum, and a
   chosen or focused thing is marked with --k-ink. In light the two are one colour.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-paper: #17151B; --k-card: #221F28; --k-ink: #FBF4E6; --k-muted: #B5AEBC; --k-line: #6F6878;
    --k-blush: #5A2C24; --k-mint: #1D4634; --k-lilac: #33285F; --k-butter: #4D3F0E; --k-ice: #173C5C;
    --k-plum: #8E72F0; --k-strong: #FBF4E6; --k-on-strong: #1D1B20; --k-shadow-ink: #0A090C;
    --paper: var(--k-paper); --panel: var(--k-card); --ink: var(--k-ink); --muted: var(--k-muted); --line: #3D3746; --soft: #2B2732; --live: var(--k-yolk);
    --blue: var(--k-plum); --blue-soft: var(--k-lilac); --local: var(--kt-ok); --shadow: var(--k-shadow-sm); --card-shadow: var(--k-shadow-sm); --card-lift: var(--k-shadow);
    --kt-danger: #FF9C88; --kt-ok: #6FD9A6;
  }
}
:root[data-theme="dark"] {
  --k-paper: #17151B; --k-card: #221F28; --k-ink: #FBF4E6; --k-muted: #B5AEBC; --k-line: #6F6878;
  --k-blush: #5A2C24; --k-mint: #1D4634; --k-lilac: #33285F; --k-butter: #4D3F0E; --k-ice: #173C5C;
  --k-plum: #8E72F0; --k-strong: #FBF4E6; --k-on-strong: #1D1B20; --k-shadow-ink: #0A090C;
  --paper: var(--k-paper); --panel: var(--k-card); --ink: var(--k-ink); --muted: var(--k-muted); --line: #3D3746; --soft: #2B2732; --live: var(--k-yolk);
  --blue: var(--k-plum); --blue-soft: var(--k-lilac); --local: var(--kt-ok); --shadow: var(--k-shadow-sm); --card-shadow: var(--k-shadow-sm); --card-lift: var(--k-shadow);
  --kt-danger: #FF9C88; --kt-ok: #6FD9A6;
}

/* ── 2. pieces ─────────────────────────────────────────────────────────────────────────────────────────────── */
.k-wrap { max-width: 1168px; margin: 0 auto; padding: 0 24px; }
/* the button: it goes down the moment it is pressed and springs back */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 1.05rem/1 var(--k-display); letter-spacing: -.01em; color: var(--k-on-color); background: var(--k-yolk);
  border: 2px solid var(--k-line); border-radius: 14px; padding: 14px 20px; cursor: pointer; text-decoration: none; box-shadow: var(--k-shadow);
  transition: transform .4s var(--k-spring), box-shadow .4s var(--k-spring); }
.k-btn .ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .k-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--k-shadow-ink); } }
.k-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--k-shadow-ink); transition-duration: .06s; }
.k-btn:focus-within { outline: 3px solid var(--k-plum); outline-offset: 3px; }
.k-btn.alt { background: var(--k-card); color: var(--k-ink); }
.k-btn.strong { background: var(--k-strong); color: var(--k-on-strong); }
.k-btn.hot { background: var(--k-tomato); }
.k-btn.small { font-size: .95rem; padding: 10px 14px; border-radius: 12px; box-shadow: var(--k-shadow-sm); }
.k-btn[disabled] { opacity: .55; cursor: default; box-shadow: none; transform: none; }
.k-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.k-pill { display: inline-flex; align-items: center; gap: 7px; font: 650 .95rem var(--k-body); color: var(--k-ink); background: var(--k-card); border: 2px solid var(--k-line); border-radius: 999px; padding: 7px 14px; }
button.k-pill { cursor: pointer; transition: transform .4s var(--k-spring), background-color .15s; }
button.k-pill:active { transform: scale(.94); transition-duration: .06s; }
button.k-pill[aria-pressed="true"] { background: var(--k-strong); color: var(--k-on-strong); }
/* a small square button with an icon in it (close, remove): quiet until it is pointed at */
.k-icon-btn { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; background: none; color: var(--k-ink); border: 2px solid transparent; border-radius: 10px; cursor: pointer;
  transition: transform .4s var(--k-spring), background-color .15s, border-color .15s; }
.k-icon-btn .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .k-icon-btn:hover { background: var(--k-butter); border-color: var(--k-line); } }
.k-icon-btn:active { transform: scale(.9); transition-duration: .06s; }
.k-card { background: var(--k-card); color: var(--k-ink); border: 2px solid var(--k-line); border-radius: var(--k-r-lg); box-shadow: var(--k-shadow); }
.k-sticker { display: inline-block; font: 800 .8rem var(--k-display); background: var(--k-yolk); color: var(--k-on-color); border: 2px solid var(--k-line); border-radius: 999px; padding: 1px 9px; transform: rotate(-3deg); }
.k-kicker { display: inline-block; font: 700 .85rem var(--k-display); letter-spacing: .08em; text-transform: uppercase; background: var(--k-strong); color: var(--k-on-strong); padding: 5px 12px; border-radius: 999px; transform: rotate(-2deg); }
@keyframes k-pop { from { opacity: 0; transform: scale(.86) translateY(8px); } }

/* ── 3. the banner and the menu ────────────────────────────────────────────────────────────────────────────── */
/* The banner: logo · All tools, All recipes · (the search box, where it shows) · the promise · For companies · menu.
   What gives way as it gets narrow, in this order: the promise (it is on the home page under the headline anyway,
   and stays out of the bar there; elsewhere it shows from 1100 px); the two lists (under 760 px, and under 1000 px
   while the search box is in the bar: the menu has them too); the wordmark (under 400 px); For companies (under
   760 px while the search box is in the bar, as before). A blocked connection always shows the promise, in red. */
:focus-visible { outline-color: var(--k-plum); }
.chrome { border-bottom: 2px solid var(--k-faint); }
.top { gap: 12px; max-width: 1168px; }
.brand { font: 700 1.5rem/1 var(--k-display); letter-spacing: -.03em; gap: 10px; margin-right: 6px; flex: none; }
.brand svg { width: 40px; height: 40px; flex: none; transition: transform .5s var(--k-spring); }
.brand b { font-weight: 800; color: var(--k-tomato); }
@media (hover: hover) and (pointer: fine) { .brand:hover svg { transform: rotate(-8deg) scale(1.06); } }
@media (max-width: 560px) { .brand { font-size: 1.3rem; gap: 8px; margin-right: 0; } .brand svg { width: 36px; height: 36px; } }
@media (max-width: 400px) { .brand-word { display: none; } }
/* All tools and All recipes stand on the right, beside For companies and the menu; the logo keeps the left. In the
   app's banner these are the menus Tools and Recipes (css/kitchen-menu.css); the plain pages keep two links (> a) */
.top-nav { display: flex; align-items: center; gap: 2px; margin: 0 6px 0 auto; flex: none; }
.top-nav > a { color: var(--k-ink); text-decoration: none; font: 650 .98rem/1 var(--k-body); padding: 10px 14px; border-radius: 999px; white-space: nowrap; transition: background-color .15s; }
@media (hover: hover) and (pointer: fine) {
.top-nav > a:hover { background: var(--k-butter); }
}
.top-nav > a[aria-current="page"] { background: var(--k-strong); color: var(--k-on-strong); }
.top .brand { margin-right: 6px; }
.top:not(:has(.top-nav)) .brand { margin-right: auto; }
@media (max-width: 759px) { .top-nav { display: none; } .top .brand { margin-right: auto; } }
@media (max-width: 999px) { .top:has(.topsearch:not([hidden])) .top-nav { display: none; } }
.topsearch { border: 2px solid var(--k-line); border-radius: 12px; background: var(--k-card); margin: 0; }
.topsearch:focus-within { box-shadow: var(--k-shadow-sm); border-color: var(--k-ink); }
/* the promise: one pill, in the row (never over the middle of the bar) */
.top .usp { position: static; transform: none; flex: none; }
.top .usp .usp-more { display: none; }
.top .privacy-badge:not(.alert) { color: var(--k-ink); background: var(--k-mint); border: 2px solid var(--k-line); }
.top .privacy-badge.alert { border: 2px solid currentColor; }
.top .usp:not(:has(.alert)) { display: none; }
@media (min-width: 1100px) { body:not(.at-home):not(.k-has-files) .top .usp { display: flex; } body:not(.at-home):not(.k-has-files) .top .usp .privacy-badge span { display: inline; } }
.top .top-biz { background: var(--k-yolk); color: var(--k-on-color); border: 2px solid var(--k-line); border-radius: 12px; box-shadow: var(--k-shadow-sm); font: 700 .95rem/1 var(--k-display);
  display: inline-flex; align-items: center; transition: transform .4s var(--k-spring), box-shadow .4s var(--k-spring); }
.top .top-biz:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--k-shadow-ink); transition-duration: .06s; }
.top .acct-chip { border: 2px solid var(--k-line); border-radius: 12px; background: var(--k-card); }
.skip { background: var(--k-yolk); color: var(--k-on-color); }
/* the menu: a card that hangs from its button. The same family of surface as the results tray: paper card, ink
   outline, hard shadow, rows that light up in butter */
.menu-btn { width: 44px; height: 44px; border: 2px solid var(--k-line); border-radius: 12px; background: var(--k-card); color: var(--k-ink); transition: transform .35s var(--k-spring), background-color .15s; }
 .menu-btn[aria-expanded="true"] { background: var(--k-butter); }
@media (hover: hover) and (pointer: fine) {
.menu-btn:hover { background: var(--k-butter); }
}
.menu-btn:active { transform: scale(.93); transition-duration: .06s; }
.menu-dot { top: 5px; right: 5px; box-shadow: 0 0 0 2px var(--k-card); }
.menu-panel { top: calc(100% + 10px); min-width: 250px; max-width: calc(100vw - 24px); max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; padding: 8px;
  border: 2px solid var(--k-line); border-radius: var(--k-r-lg); box-shadow: var(--k-shadow); background: var(--k-card); color: var(--k-ink); }
.menu-panel hr { border-top: 2px solid var(--k-faint); margin: 6px 6px; }
.menu-panel > a, .menu-panel .theme, .menu-panel .menu-act, .menu-panel .lang-btn, .menu-panel .lang-list button { min-height: 44px; padding: 10px 12px; border-radius: 12px; font: 650 1rem/1.2 var(--k-body); color: var(--k-ink); }
 .menu-panel .lang-list button:focus-visible { background: var(--k-butter); }
@media (hover: hover) and (pointer: fine) {
.menu-panel > a:hover,.menu-panel .theme:hover,.menu-panel .menu-act:hover,.menu-panel .lang-btn:hover,.menu-panel .lang-list button:hover { background: var(--k-butter); }
}
.menu-panel > a[aria-current="page"] { background: var(--k-strong); color: var(--k-on-strong); }
/* the same button on the plain pages (menu-lite.js puts it last in their banner): at the right end, the panel over the page */
.lg-top { position: relative; z-index: var(--k-layer-banner, 10); }
.lg-top > .menu { margin-left: 12px; flex: none; }
/* (the button's place is kept before the script has put it there, so nothing in the banner moves when it comes) */
.lg-top:not(:has(> .menu))::after { content: ""; flex: none; width: 44px; height: 44px; margin-left: 12px; }
body.lg .chrome > .top:not(:has(> .menu))::after { content: ""; flex: none; width: 44px; height: 44px; }
.lg-top > .lg-brand:only-of-type { margin-right: auto; }
.menu-panel > a.mine-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.menu-panel .biz-link { background: var(--k-yolk); color: var(--k-on-color); border: 2px solid var(--k-line); }
@media (hover: hover) and (pointer: fine) {
.menu-panel .biz-link:hover { background: var(--k-yolk); filter: brightness(.96); }
}
.menu-panel .theme svg { color: var(--k-ink); }
.menu-panel .lang-list button[aria-checked="true"]::after { color: var(--k-basil); }
@media (prefers-reduced-motion: no-preference) { .menu-panel:not([hidden]) { animation: k-menu .28s var(--k-calm); transform-origin: top right; } @keyframes k-menu { from { opacity: 0; transform: scale(.94) translateY(-6px); } } }
/* the window of the menu's "Notification" (updates.js): the same card */
dialog.updates { border: 2px solid var(--k-line); border-radius: var(--k-r-lg); box-shadow: var(--k-shadow-lg); background: var(--k-card); color: var(--k-ink); }
dialog.updates h2 { font: 750 1.6rem/1.15 var(--k-display); letter-spacing: -.03em; }
.updates-warn { border: 2px solid var(--k-line); border-left-width: 2px; border-radius: var(--k-r); background: var(--k-butter); }

/* ── 4. the home page ──────────────────────────────────────────────────────────────────────────────────────── */
.k-home.home { display: block; max-width: 1168px; margin: 0 auto; padding: 34px 24px 12px; position: relative; }
body.at-home:not(.searching) .k-home.home { padding: 34px 24px 12px; }
.k-home .home-main { text-align: center; position: relative; }
.k-home h1, .k-home .h1 { font: 800 clamp(2.6rem, 7.2vw, 5.2rem)/.98 var(--k-display); letter-spacing: -.045em; margin: 0 auto 22px; max-width: 12em; text-wrap: balance; }
body.at-home:not(.searching) .k-home h1 { margin-bottom: 22px; }
/* the last word of the headline stands on a stroke of yolk (app.js wraps it in a <mark>) */
.k-home h1 mark, .k-home .h1 mark { background: none; color: inherit; position: relative; white-space: nowrap; z-index: 0; }
.k-home h1 mark::after, .k-home .h1 mark::after { content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .04em; height: .34em; background: var(--k-yolk); border-radius: .2em; z-index: -1; transform: rotate(-1.2deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .k-home h1 mark::after { opacity: .55; } }
:root[data-theme="dark"] .k-home h1 mark::after { opacity: .55; }

/* the three promises: pills in one straight line */
/* the headline says what the site is in a sentence and a question (ticket 0241): a size that keeps it to two lines on a
   wide screen, so the drop box stays on the first screen; the line under it says what is on offer */
.k-home h1, .k-home .h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); max-width: 15em; }
.k-home .k-sub { font: 500 clamp(1.02rem, 1.6vw, 1.22rem)/1.45 var(--k-body); color: var(--k-muted); max-width: 34em; margin: -6px auto 20px; text-wrap: balance; }
.k-home .k-promises { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0 0 30px; padding: 0; }
.k-home .k-promises li { display: inline-flex; align-items: center; gap: 7px; font: 650 .95rem var(--k-body); color: var(--k-ink); padding: 7px 14px; border: 2px solid var(--k-line); border-radius: 999px; background: var(--k-mint); }
.k-home .k-promises li:nth-child(2) { background: var(--k-lilac); }
.k-home .k-promises li:nth-child(3) { background: var(--k-ice); }
.k-home .k-promises a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.k-home .k-promises .ic { width: 1.2em; height: 1.2em; }

/* the drop box. .k-flow holds the box and the steps: one column until a first step is chosen, then two */
.k-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 720px; margin: 0 auto; transition: max-width .45s var(--k-calm); position: relative; z-index: 1; }
.dock.k-dock { position: relative; padding: 30px 28px 26px; background: var(--k-card); border: 2px solid var(--k-line); border-radius: var(--k-r-xl); box-shadow: var(--k-shadow-lg);
  transition: transform .5s var(--k-spring), box-shadow .5s var(--k-spring), background-color .2s; animation: none; }
.k-dock-in { border: 2.5px dashed var(--k-dash); border-radius: 20px; padding: 26px 20px 22px; display: grid; justify-items: center; gap: 14px; cursor: pointer; transition: border-color .2s; }
.k-mascot { width: 92px; height: 92px; }
.k-mascot svg { width: 100%; height: 100%; display: block; }
.k-dock .dock-title { font: 750 1.6rem/1.1 var(--k-display); letter-spacing: -.03em; margin: 0; }
.k-safe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin: 2px 0 0; color: var(--k-muted); font-size: .9rem; }
.k-or { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--k-muted); font-size: .9rem; font-weight: 600; margin: 4px 0 0; }
.k-or::before, .k-or::after { content: ""; flex: 1; height: 2px; background: var(--k-faint); border-radius: 2px; }
.k-dock .search { width: 100%; gap: 10px; background: var(--k-paper); border: 2px solid var(--k-line); border-radius: var(--k-r); padding: 4px 12px 4px 16px; cursor: text; transition: box-shadow .3s var(--k-spring); }
.k-dock .search:focus-within { box-shadow: var(--k-shadow); border-color: var(--k-ink); }
.k-dock .search input { font: 500 1.0625rem var(--k-body); color: var(--k-ink); padding: 12px 0; }
.k-dock .search input::placeholder { color: var(--k-muted); opacity: 1; }
.k-dock .dropped { margin-top: 2px; }
.k-dock .file-chip { background: var(--k-butter); color: var(--k-ink); border: 2px solid var(--k-line); border-radius: var(--k-r-sm); }
/* a file hangs over the page: the box leans in */
.dock.k-dock.over { transform: scale(1.02) rotate(-1deg); box-shadow: 12px 12px 0 var(--k-shadow-ink); background: var(--k-butter); animation: none; }
/* home page: no dashed line inside the box (0345, Jurian: too busy); the card's own edge and shadow mark the drop
   target. The edge keeps its width, clear, so nothing shifts, and shows solid ink again while a file is dragged over */
.k-home .k-dock-in { border-color: transparent; border-style: solid; }
.dock.k-dock.over .k-dock-in { border-color: var(--k-ink); border-style: solid; }
.k-home .rail { position: static; max-width: 560px; margin: 26px auto 0; text-align: left; }
.k-home .welcome-card.in-page { border: 2px solid var(--k-line); border-radius: var(--k-r-lg); box-shadow: var(--k-shadow); margin-top: 26px; }

/* a tray open beside the page, Recipe (recipe-build.js sets .k-rt-open) or Results (#drawer.open, while it stands
   in the page and not in the tool window): the tray takes the right side, and with a file in hand
   the box moves left to stand clear of it (css/kitchen-flow.css, by --k-rt-shift). */
@media (min-width: 1240px) { body:is(.k-rt-open, :has(> #drawer.open)).k-working { --k-rt-shift: max(0px, 824px - 50vw); } }

/* while a search is typed the page makes room for its answer (app.js searchLayout) */
body.searching .k-mascot, body.searching .k-dock-in > .k-btn, body.searching .k-safe, body.searching .k-or, body.searching .k-dock .dock-title { display: none; }
body.searching .k-home.home { padding-top: 16px; padding-bottom: 0; }
body.searching .dock.k-dock { padding: 14px; box-shadow: var(--k-shadow); border-radius: var(--k-r-lg); }
body.searching .k-dock-in { padding: 0; border: 0; }

/* while the flow runs in the box, the list of every tool that takes the file waits behind "Something else"
   (app.js dropStep sets .df-on) */
#results.df-on { display: none; }
body.k-has-files .usp .usp-more { display: none; }

/* the explainer and the band for companies: on the home page only, also while the flow runs in the box */
.k-how, .k-team-wrap { display: none; }
/* (on the home page they are there from the first paint: manifest-link.js marks the page before app.js runs) */
html.ts-home .k-how, html.ts-home .k-team-wrap { display: block; }
body.at-home .k-how, body.at-home .k-team-wrap, body.k-working:not(.searching):not(.browsing) .k-how, body.k-working:not(.searching):not(.browsing) .k-team-wrap { display: block; }
.k-how { padding-top: 84px; padding-bottom: 20px; }
.k-how h2, .k-team h2 { font: 800 clamp(1.9rem, 4.4vw, 3rem)/1.02 var(--k-display); letter-spacing: -.04em; margin: 14px 0 28px; max-width: 16em; text-wrap: balance; }
/* (How it works' headline is one line wherever it fits: no measure of its own; where it must wrap, the lines are balanced) */
.k-how h2 { max-width: none; font-size: clamp(1.9rem, 4vw, 3rem); } /* (4vw, a little under the other headings between 750 and 1200 px: the German and Dutch lines fit too) */
.k-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.k-steps li { counter-increment: s; position: relative; background: var(--k-card); border: 2px solid var(--k-line); border-radius: var(--k-r-lg); padding: 54px 22px 24px; box-shadow: var(--k-shadow); }
.k-steps li::before { content: counter(s); position: absolute; top: -18px; left: 20px; width: 52px; height: 52px; display: grid; place-items: center; font: 800 1.5rem var(--k-display); border: 2px solid var(--k-line); border-radius: 50%; background: var(--k-yolk); color: var(--k-on-color); transform: rotate(-6deg); }
.k-steps li:nth-child(2)::before { background: var(--k-tomato); transform: rotate(5deg); }
.k-steps li:nth-child(3)::before { background: var(--k-basil); transform: rotate(-3deg); }
.k-steps strong { display: block; font: 750 1.35rem/1.15 var(--k-display); letter-spacing: -.02em; margin-bottom: 6px; }
.k-steps p { margin: 0; color: var(--k-muted); }
@media (max-width: 800px) { .k-steps { grid-template-columns: 1fr; gap: 30px; } .k-how { padding-top: 64px; } }

.k-team { margin: 80px 0 0; background: #6A48DC; color: #fff; border: 2px solid var(--k-line); border-radius: 34px; padding: 44px 40px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center; box-shadow: var(--k-shadow-lg); }
.k-team .k-kicker { background: var(--k-yolk); color: var(--k-on-color); }
.k-team h2 { margin-bottom: 14px; }
.k-team p { margin: 0 0 22px; max-width: 34em; }
.k-team-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.k-team-more { color: #fff; font-weight: 650; text-underline-offset: 3px; }
/* the three white blocks: one straight column, same width, same left edge */
.k-team ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.k-team li { background: #fff; color: #1D1B20; border: 2px solid #1D1B20; border-radius: var(--k-r); padding: 12px 16px; font-weight: 650; display: flex; align-items: center; gap: 10px; }
.k-team li .ic { width: 1.25em; height: 1.25em; flex: none; color: #6A48DC; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 800px) { .k-team { grid-template-columns: 1fr; padding: 30px 22px; border-radius: 26px; margin-top: 60px; } }

/* the foot follows at an even distance */
body.at-home .foot, body.k-working:not(.searching):not(.browsing) .foot { margin-top: 90px; }
/* "Hosted in the EU" with a small EU flag, the last line of every footer (ticket 0316): quiet, in the footer's own muted
   colour, centred under the links where the foot is centred, at the left on the legal pages. No link. */
.foot-eu { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; color: inherit; font-weight: 600; line-height: 1.3; }
.lg-foot .foot-eu { justify-content: flex-start; margin: 4px 0 0; }
.lg-foot.biz-foot .foot-eu { justify-content: center; } /* (the company pages centre their foot) */
.eu-flag { width: 1.5em; height: 1em; flex: none; border-radius: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eu-flag { outline: 1px solid rgba(255, 255, 255, .28); } }
:root[data-theme="dark"] .eu-flag { outline: 1px solid rgba(255, 255, 255, .28); }

@media (max-width: 560px) {
  .k-home.home, body.at-home:not(.searching) .k-home.home { padding: 20px 16px 8px; }
  body.at-home:not(.searching) .k-home h1 { margin-bottom: 14px; }
  .k-home .k-sub { margin: -2px auto 14px; }
  .k-home .k-promises { gap: 6px; margin-bottom: 16px; }
  .k-home .k-promises li { padding: 5px 10px; font-size: .84rem; gap: 5px; }
  .dock.k-dock { padding: 14px; border-radius: var(--k-r-lg); box-shadow: 5px 5px 0 var(--k-shadow-ink); }
  .k-dock-in { padding: 16px 12px 14px; gap: 10px; }
  .k-mascot { width: 60px; height: 60px; }
  .k-dock .dock-title { font-size: 1.4rem; }
  .k-wrap { padding: 0 16px; }
  /* (How it works keeps its own room above and below: the line above took it away, so on a phone it sat right under the drop box) */
  .k-how.k-wrap { padding-top: 56px; padding-bottom: 20px; }
}

/* ── 5. browsing: a category, all tools, all recipes, a search, and How it works ────────────────────────────── */
/* The category bar: twelve tiles; the one that is open stands on butter with an outline */
.sections { max-width: 1168px; gap: 8px; padding-top: 14px; }
.sec { font: 700 .92rem/1.15 var(--k-display); letter-spacing: -.01em; border: 2px solid transparent; border-radius: var(--k-r); padding: 10px 2px; min-width: 0; }
/* a name never breaks inside a word: wide screens give each tile the width of its name, phones four tiles a row */
@media (min-width: 901px) { .sections { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; } .sections .sec { flex: 0 1 auto; min-width: min-content; padding: 10px 9px; } .sections .sec span { display: block; } }
@media (min-width: 1000px) { .sections { flex-wrap: nowrap; } }
@media (max-width: 560px) { .sections { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .sections .sec { font-size: .84rem; } }
@media (max-width: 400px) { .sections { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .sections .sec { padding: 7px 4px; gap: 4px; } .sections .sec .ic { width: 24px; height: 24px; } }
.sec[aria-pressed="true"] { background: var(--k-butter); color: var(--k-ink); border-color: var(--k-line); box-shadow: var(--k-shadow-sm); border-radius: var(--k-r); }
@media (hover: hover) and (pointer: fine) { .sec:hover:not(:disabled) { background: var(--k-butter); } }
.mini { border-bottom: 2px solid var(--k-faint); }
.mini .sec { font-size: .92rem; border-width: 0; box-shadow: none; }
.mini .sec[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--k-ink); border-radius: 9px; }
/* (in the dark the categories' colours are light: the badge's icon is dark on them) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .k-cat-badge { color: #1D1B20; } }
:root[data-theme="dark"] .k-cat-badge { color: #1D1B20; }
/* the list: wider, so the tools stand three in a row */
.results { max-width: 1168px; }
.browse-head { margin: 26px 0 6px; }
.k-cat-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; }
.k-cat-badge { width: 96px; height: 96px; display: grid; place-items: center; background: var(--sec-color, var(--k-sky)); color: #fff; border: 2px solid var(--k-line); border-radius: 26px; box-shadow: var(--k-shadow-lg); transform: rotate(-5deg); }
.k-cat-badge .ic { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.all-h1 { font: 800 clamp(2.4rem, 7vw, 4.4rem)/.98 var(--k-display); letter-spacing: -.045em; overflow-wrap: anywhere; }
.browse-lede { color: var(--k-muted); font-size: 1.0625rem; max-width: 40em; margin: 14px 0 0; }
.results .bar { margin: 14px 0 0; min-height: 0; }
.results .bar + .flow-hits + #list > .group:first-child, .results #list > .group:first-child { margin-top: 22px; }
.count { color: var(--k-muted); font-weight: 600; }
.count .clear { color: var(--k-ink); }
.kind-pill { font: 650 .95rem var(--k-body); color: var(--k-ink); background: var(--k-card); border: 2px solid var(--k-line); border-radius: 999px; padding: 8px 14px; transition: transform .4s var(--k-spring), background-color .15s; }
.kind-pill:active:not(:disabled) { transform: scale(.94); transition-duration: .06s; }
.kind-pill[aria-pressed="true"] { background: var(--k-strong); color: var(--k-on-strong); border-color: var(--k-line); }
/* a group of tools: a small coloured tile, the group's name, how many */
.results .group { margin: 34px 0 0; }
/* (search results: the recipes come first, and what follows them, the tools or the line that no tool matches, keeps
   the distance every other block of the list has; the tools used to start right under the notes) */
.results .group-flows + :is(.cards, .empty) { margin-top: 34px; }
.results .group h3 { display: flex; align-items: center; gap: 10px; font: 750 1.3rem/1.2 var(--k-display); letter-spacing: -.02em; margin: 0 0 14px; }
.results .group h3 small { font: 600 .85rem var(--k-body); color: var(--k-muted); margin-left: 0; }
.k-g-ic { order: -1; width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 2px solid var(--k-line); border-radius: 12px; background: var(--k-yolk); color: var(--k-on-color); }
.k-g-ic .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.results .group:nth-of-type(6n+2) .k-g-ic { background: var(--k-tomato); } .results .group:nth-of-type(6n+3) .k-g-ic { background: var(--k-basil); } .results .group:nth-of-type(6n+4) .k-g-ic { background: #A48BF0; }
.results .group:nth-of-type(6n+5) .k-g-ic { background: var(--k-sky); } .results .group:nth-of-type(6n) .k-g-ic { background: #FFB7A6; }
.all-sec { font: 800 1.9rem/1.05 var(--k-display); letter-spacing: -.035em; margin: 54px 0 0; padding-bottom: 10px; border-bottom: 2px solid var(--k-line); }
.all-sec svg { width: 30px; height: 30px; }
/* the tools: outlined cards, three in a row; the description may take two lines */
.results .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.results .cards > li { min-width: 0; }
.results .card { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; min-height: 72px; padding: 12px 14px; background: var(--k-card); color: var(--k-ink); border: 2px solid var(--k-line); border-radius: 18px; box-shadow: none;
  transition: transform .45s var(--k-spring), box-shadow .45s var(--k-spring); }
.results .cardwrap:has(.fav) .card { padding-right: 44px; }
.results .card .c-ic { width: 42px; height: 42px; border: 2px solid var(--k-line); border-radius: 12px; background: var(--k-paper); color: var(--k-ink); }
.results .card .r-name { font: 700 1.05rem/1.2 var(--k-display); letter-spacing: -.01em; }
.results .card .r-desc { font-size: .88rem; line-height: 1.35; color: var(--k-muted); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.results .card .r-soon { font: 700 .7rem var(--k-body); color: var(--k-ink); background: var(--k-lilac); border: 1.5px solid var(--k-line); border-radius: 999px; padding: 2px 8px; align-self: start; }
.results .card.ranked .c-ic { background: var(--k-yolk); color: var(--k-on-color); }
@media (hover: hover) and (pointer: fine) { .results .card:hover { transform: translate(-2px, -2px); box-shadow: var(--k-shadow); border-color: var(--k-line); } }
.results .card:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--k-shadow-ink); transition-duration: .06s; }
@media (max-width: 960px) { .results .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .results .cards { grid-template-columns: minmax(0, 1fr); gap: 10px; } .k-cat-head { gap: 14px; } .k-cat-badge { width: 64px; height: 64px; border-radius: 18px; box-shadow: var(--k-shadow); } .k-cat-badge .ic { width: 32px; height: 32px; } }
/* the recipes: notes with a strip of tape, in the four tints */
/* A note is always one size and shape, whatever its name or its steps (the founder, 2026-10-10): 210 by 150, and a
   little smaller, the same shape, two beside each other on a phone. The grid lays out as many as fit in a row and
   never stretches one; a row with fewer notes starts at the left. What does not fit stays inside: the name takes
   two lines and ends in an ellipsis (the whole name is the note's title), the steps take two rows of pills. No line
   "x steps" (0325, meeting 19 Oct: the pills show them). On a wide screen three beside each other, as wide as the
   list allows. The name always has room for two lines, also when it needs one, so every note in a row is the same
   height and the pills start at the same place in any language (Jurian, 20 Oct: "two line, ... so all the recipes
   have the same height"). */
:is(.results, .wf-more, .myr-page) .flows { --note-w: 210px; --note-h: 150px; display: grid; grid-template-columns: repeat(auto-fill, var(--note-w)); justify-content: start; align-items: start; gap: 22px 18px; padding-top: 10px; }
:is(.results, .wf-more, .myr-page) .flows .wf-card { box-sizing: border-box; width: var(--note-w); height: var(--note-h); min-width: 0; }
:is(.results, .wf-more, .myr-page) .flows .wf-card b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; flex: none; height: 2.28em; } /* (two lines at its line-height of 1.14, kept free when the name takes one) */
:is(.results, .wf-more, .myr-page) .flows .wf-card .wf-trail { flex: none; max-height: 56px; overflow: hidden; min-width: 0; }
:is(.results, .wf-more, .myr-page) .flows .wf-card .wf-trail span { max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
:is(.results, .wf-more, .myr-page) .flows .wf-card small { flex: none; white-space: nowrap; }
@media (min-width: 961px) {
  :is(.results, .wf-more, .myr-page) .flows { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  :is(.results, .wf-more, .myr-page) .flows .wf-card { width: 100%; }
}
@media (max-width: 560px) {
  :is(.results, .wf-more, .myr-page) .flows { --note-w: 156px; --note-h: 146px; gap: 20px 12px; justify-content: center; }
  :is(.results, .wf-more, .myr-page) .flows .wf-card { padding: 16px 11px 11px; gap: 7px; border-radius: 5px 18px 18px 18px; }
  :is(.results, .wf-more, .myr-page) .flows .wf-card b { font-size: 1rem; }
  :is(.results, .wf-more, .myr-page) .flows .wf-card .wf-trail { gap: 4px; font-size: .74rem; max-height: 48px; }
  :is(.results, .wf-more, .myr-page) .flows .wf-card .wf-trail span { padding: 1px 7px; }
  :is(.results, .wf-more, .myr-page) .flows .wf-card small { font-size: .68rem; }
  :is(.results, .wf-more, .myr-page) .flows .wf-card::before { width: 52px; margin-left: -26px; height: 17px; top: -10px; }
}
:is(.results, .wf-more, .myr-page) .wf-card { position: relative; gap: 10px; padding: 20px 16px 16px; background: var(--k-butter); color: var(--k-ink); border: 2px solid var(--k-line); border-left: 2px solid var(--k-line); border-radius: 6px 22px 22px 22px; box-shadow: var(--k-shadow);
  transition: transform .5s var(--k-spring), box-shadow .5s var(--k-spring); }
:is(.results, .wf-more, .myr-page) .wf-card:nth-child(4n+2) { background: var(--k-blush); } :is(.results, .wf-more, .myr-page) .wf-card:nth-child(4n+3) { background: var(--k-mint); } :is(.results, .wf-more, .myr-page) .wf-card:nth-child(4n) { background: var(--k-lilac); }
/* (the strip of tape has the colour of the recipe's category: it was the card's left edge before) */
:is(.results, .wf-more, .myr-page) .wf-card::before { content: ""; position: absolute; top: -11px; left: 50%; width: 64px; height: 20px; margin-left: -32px; background: var(--wf-color, var(--k-card)); border: 2px solid var(--k-line); border-radius: 4px; transform: rotate(-3deg); }
:is(.results, .wf-more, .myr-page) .wf-card b { font: 750 1.2rem/1.14 var(--k-display); letter-spacing: -.02em; }
:is(.results, .wf-more, .myr-page) .wf-card .wf-trail { gap: 5px; font-size: .82rem; font-weight: 650; color: var(--k-ink); align-items: center; }
:is(.results, .wf-more, .myr-page) .wf-card .wf-trail span { background: var(--k-card); border: 1.5px solid var(--k-line); border-radius: 999px; padding: 2px 9px; }
:is(.results, .wf-more, .myr-page) .wf-card .wf-trail span + span::before { display: none; }
:is(.results, .wf-more, .myr-page) .wf-card small { font: 700 .74rem var(--k-display); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--k-ink) 72%, transparent); }
@media (hover: hover) and (pointer: fine) { :is(.results, .wf-more, .myr-page) .wf-card:hover { transform: translateY(-5px); box-shadow: var(--k-shadow-lg); border-color: var(--k-line); border-left-color: var(--k-line); } }
:is(.results, .wf-more, .myr-page) .wf-card:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--k-shadow-ink); transition-duration: .06s; }
:is(.results, .wf-more, .myr-page) .wf-card:focus-visible { outline-color: var(--k-plum); }
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) { @media (hover: hover) and (pointer: fine) {
:is(.results, .wf-more, .myr-page) .wf-card:nth-child(4n+1):not(:hover) { transform: rotate(-.9deg); }
} @media (hover: hover) and (pointer: fine) {
:is(.results, .wf-more, .myr-page) .wf-card:nth-child(4n+2):not(:hover) { transform: rotate(.7deg); }
} @media (hover: hover) and (pointer: fine) {
:is(.results, .wf-more, .myr-page) .wf-card:nth-child(4n+3):not(:hover) { transform: rotate(-.5deg); }
} @media (hover: hover) and (pointer: fine) {
:is(.results, .wf-more, .myr-page) .wf-card:nth-child(4n):not(:hover) { transform: rotate(1deg); }
} }
/* a recipe of one's own on the page "My recipes" is the same note, as a button; the one in the making has a dashed edge */
.myr-page .wf-card { text-align: left; font: inherit; cursor: pointer; }
.myr-page .myr-cell { display: grid; min-width: 0; }
.myr-page .myr-cell:nth-child(4n+2) .wf-card { background: var(--k-blush); } .myr-page .myr-cell:nth-child(4n+3) .wf-card { background: var(--k-mint); } .myr-page .myr-cell:nth-child(4n) .wf-card { background: var(--k-lilac); } .myr-page .myr-cell:nth-child(4n+1) .wf-card { background: var(--k-butter); }
.myr-page .wf-card.wf-making.wf-making { background: none; border-style: dashed; box-shadow: none; }
.myr-page .wf-card.wf-making::before { background: var(--k-paper); border-style: dashed; }
.myr-page .wf-card .wf-kicker { margin: 0; }
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) { @media (hover: hover) and (pointer: fine) {
.myr-page .wf-card:not(:hover) { transform: none; }
} @media (hover: hover) and (pointer: fine) {
.myr-page .myr-cell:nth-child(4n+1) .wf-card:not(:hover):not(.wf-making) { transform: rotate(-.9deg); }
} @media (hover: hover) and (pointer: fine) {
.myr-page .myr-cell:nth-child(4n+2) .wf-card:not(:hover) { transform: rotate(.7deg); }
} @media (hover: hover) and (pointer: fine) {
.myr-page .myr-cell:nth-child(4n) .wf-card:not(:hover) { transform: rotate(.6deg); }
} }

.results .flow-hits h3 { font: 750 1.3rem/1.2 var(--k-display); letter-spacing: -.02em; }
.results .more { border: 2px solid var(--k-line); border-radius: 14px; background: var(--k-card); color: var(--k-ink); font: 700 1.05rem/1 var(--k-display); padding: 14px 22px; box-shadow: var(--k-shadow); transition: transform .4s var(--k-spring), box-shadow .4s var(--k-spring); }
@media (hover: hover) and (pointer: fine) {
.results .more:hover { background: var(--k-card); color: var(--k-ink); }
}
.results .more:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--k-shadow-ink); transition-duration: .06s; }
.results .empty { background: var(--k-card); border: 2px dashed var(--k-line); border-radius: 18px; padding: 24px; max-width: none; }
.about-page { max-width: 1168px; }
.about-page h1, .about-page h2, .about-page h3 { font-family: var(--k-display); letter-spacing: -.02em; }
/* How it works: the same pieces */
.how { max-width: 1168px; padding-top: 40px; }
.how .how-intro h1, .how .how-intro .h1 { font: 800 clamp(2.4rem, 7vw, 4.4rem)/.98 var(--k-display); letter-spacing: -.045em; margin: 0 0 14px; }
.how h2 { font: 800 clamp(1.6rem, 3.4vw, 2.2rem)/1.05 var(--k-display); letter-spacing: -.035em; margin: 64px 0 22px; }
.how-intro .btn.go { font: 700 1.05rem/1 var(--k-display); color: var(--k-on-color); background: var(--k-yolk); border: 2px solid var(--k-line); border-radius: 14px; padding: 14px 20px; box-shadow: var(--k-shadow); transition: transform .4s var(--k-spring), box-shadow .4s var(--k-spring); }
.how-intro .btn.go:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--k-shadow-ink); transition-duration: .06s; }
.how-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 18px; }
.how-steps li { padding: 46px 20px 22px; background: var(--k-card); border: 2px solid var(--k-line); border-radius: var(--k-r-lg); box-shadow: var(--k-shadow); }
.how-steps li::before { left: 18px; top: -18px; width: 48px; height: 48px; border: 2px solid var(--k-line); background: var(--k-yolk); color: var(--k-on-color); font: 800 1.35rem var(--k-display); transform: rotate(-6deg); }
.how-steps li:nth-child(4n+2)::before { background: var(--k-tomato); transform: rotate(5deg); } .how-steps li:nth-child(4n+3)::before { background: var(--k-basil); transform: rotate(-3deg); } .how-steps li:nth-child(4n)::before { background: var(--k-sky); transform: rotate(4deg); }
.how-steps h3 { font: 750 1.25rem/1.15 var(--k-display); letter-spacing: -.02em; margin: 0 0 6px; }
/* under each step, the detail: the window and its tabs, the results, saving (they were steps of their own once) */
.how-more { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 2px dashed var(--k-line); display: grid; gap: 10px; font-size: .95rem; color: var(--k-muted); }
.how-steps .how-more li { counter-increment: none; position: static; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.how-steps .how-more li::before { content: none; }
.how-more b { display: block; color: var(--k-ink); font-weight: 700; }
/* side by side, the three cards share their rows (title, line, detail), so the dashed rules stand at one height however
   long a title or a line runs in a language. Without subgrid each card keeps its own rows: the rules follow each card's
   text, the cards' bottoms still line up. In one column (800px and narrower) nothing is shared. */
@supports (grid-template-rows: subgrid) { @media (min-width: 801px) {
  .how-steps ol > li { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
  .how-steps .how-more { align-content: start; } /* the points keep their own spacing where a neighbour has more to say */
} }
.pack, .how-devices > div { background: var(--k-card); border: 2px solid var(--k-line); border-radius: 18px; padding: 16px 18px; }
.pack h3, .how-devices h3 { font: 750 1.15rem/1.2 var(--k-display); letter-spacing: -.01em; }
@media (hover: hover) and (pointer: fine) {
.pack a:hover { background: var(--k-butter); }
}
@media (max-width: 800px) { .how-steps ol { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
/* the note at the foot of How it works, when new versions go live: on the butter ground with the ink outline, like the
   note in the Notification window (.updates-warn), so it is seen; ink on butter in both looks */
.how-updates { margin: 44px 0 0; padding: 16px 20px; background: var(--k-butter); color: var(--k-ink); border: 2px solid var(--k-line); border-radius: var(--k-r); box-shadow: var(--k-shadow); }
.how-updates .k-link { color: var(--k-ink); font-weight: 700; }
.how .how-updates h2 { font: 750 1.25rem/1.15 var(--k-display); letter-spacing: -.02em; margin: 0 0 6px; } /* a heading of the page's level, at the size of a card's title */
.how-updates p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .results .card, :is(.results, .wf-more, .myr-page) .wf-card, .kind-pill, .menu-btn, .results .more { transition-duration: .01s !important; } }

/* a laptop's screen is not tall: the box draws in, so its button and (from about 850 px) its search stay on the
   first screen */
@media (min-width: 561px) and (max-height: 880px) {
  .k-home.home, body.at-home:not(.searching) .k-home.home { padding-top: 24px; }
  .k-home h1, .k-home .h1 { font-size: clamp(2.3rem, min(5.4vw, 7.4vh), 4.1rem); margin-bottom: 18px; }
  body.at-home:not(.searching) .k-home h1 { margin-bottom: 18px; }
  .k-home .k-promises { margin-bottom: 22px; }
  .dock.k-dock { padding: 20px 22px 18px; }
  .k-dock-in { padding: 16px 20px 14px; gap: 9px; }
  .k-mascot { width: 62px; height: 62px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* the chef in the box stands still, also while a file is dragged over the page (ticket 0258, founder note 16 Oct) */
}
@media (prefers-reduced-motion: reduce) {
  .k-btn, .k-pill, .brand svg, .dock.k-dock, .k-flow, .top .top-biz { transition-duration: .01s !important; }
  .dock.k-dock.over { transform: none; }
}

/* ── 6. the pages with a bar of their own (company, industry and legal pages): the new logo and wordmark; paper,
   ink and type come through the tokens above. Their full restyle is not part of the redesign yet. ── */
.lg-brand { font: 700 1.4rem/1 var(--k-display); letter-spacing: -.03em; gap: 10px; }
.lg-brand svg { width: 38px; height: 38px; }
.lg-brand b { font-weight: 800; color: var(--k-tomato); }
/* their buttons are the base's button and their boxes the base's card (company, industry and About pages: body.biz;
   the legal pages have neither). Their text and structure are their own. */
body.biz .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 1.02rem/1.1 var(--k-display); letter-spacing: -.01em; color: var(--k-ink); background: var(--k-card);
  border: 2px solid var(--k-line); border-radius: 14px; box-shadow: var(--k-shadow); text-decoration: none; transition: transform .4s var(--k-spring), box-shadow .4s var(--k-spring); filter: none; }
body.biz .btn.go { background: var(--k-yolk); color: var(--k-on-color); }
body.biz .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--k-shadow-ink); transition-duration: .06s; }
body.biz .biz-for li, body.biz .biz-quotes figure { border: 2px solid var(--k-line); border-radius: var(--k-r); background: var(--k-card); color: var(--k-ink); }
body.biz .biz-steps li::before { border: 2px solid var(--k-line); background: var(--k-yolk); color: var(--k-on-color); font: 800 1rem var(--k-display); }
body.biz .biz-lang[aria-current="page"] { background: var(--k-strong); color: var(--k-on-strong); border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { body.biz .btn { transition-duration: .01s !important; } }
/* a phone with a tab at the right edge (Open tools, Recipe, Results): the drop box stops short of it (the tab used
   to lie over the box's right edge) */
@media (max-width: 560px) { body:has(#drawer:not([hidden])) .k-flow, body:has(#recipe-tray:not([hidden])) .k-flow, body:has(#bench-dock:not([hidden])) .k-flow { margin-right: 38px; }
  /* (what is in the box follows the box's width, not its own longest line) */
  .k-dock-in { grid-template-columns: minmax(0, 1fr); } }
/* a phone with a tray's tab at the right edge: the page's name stops short of it */
@media (max-width: 560px) { body:has(#drawer:not([hidden])) .k-cat-head, body:has(#recipe-tray:not([hidden])) .k-cat-head { padding-right: 30px; } }
/* (on the smallest phones the badge and the name draw in, so a long name stays one word beside the tab) */
@media (max-width: 400px) { .k-cat-head { gap: 12px; } .k-cat-badge { width: 60px; height: 60px; border-radius: 18px; } .k-cat-badge .ic { width: 30px; height: 30px; }
  body:has(#drawer:not([hidden])) .k-cat-head .all-h1, body:has(#recipe-tray:not([hidden])) .k-cat-head .all-h1 { font-size: 1.9rem; } }

/* Hit areas: 44px where a finger points, the look stays. A ::after reaches past the visible edge (WCAG 2.5.8 asks 24px,
   Apple 44px). The foot's text links get real room instead, they sit in a flowing row. */
.usp-home a, .brand, .top .top-biz, .k-safe .k-link, .k-team-more { position: relative; }
.usp-home a::after { content: ""; position: absolute; inset: -14px -12px; }
.brand::after { content: ""; position: absolute; inset: -4px; }
.top .top-biz::after { content: ""; position: absolute; inset: -2px -4px; }
.k-safe .k-link::after, .k-team-more::after { content: ""; position: absolute; inset: -11px -6px; }
.foot-links a { display: inline-block; padding: 7px 2px; }
@media (pointer: coarse), (max-width: 560px) { .foot-links a { padding-block: 11px; } }
/* the footer's sign-off (ticket 0370): the top bar's logo, smaller, centred over the footer's line */
.foot-brand { display: inline-flex; align-items: center; gap: 8px; padding: 4px 2px; margin-bottom: 4px; color: var(--ink); text-decoration: none;
  font: 700 1.2rem/1 var(--k-display); letter-spacing: -.03em; }
.foot-brand svg { width: 30px; height: 30px; flex: none; }
.foot-brand b { font-weight: 800; color: var(--k-tomato); }
.foot-brand .brand-word { display: inline; } /* the word stays at phone width too: the footer has the room the top bar lacks */
.skip:focus { min-height: 44px; display: inline-flex; align-items: center; }