/* market.css - Rahti Market vendor list (served at /market). Contract: docs/market-waitlist/CONTRACT.md, section 6.

   Its own look: the emerald palette of the Rahti Market demo's design tokens (6.3), light and dark by
   prefers-color-scheme, no theme toggle. Fonts are the two the site already self-hosts (/fonts): Cormorant Garamond for
   the wordmark and headings, Inter for the rest. One small image (market-logo.png, the Rahti app icon beside the wordmark), no icon font, no outside
   request. Does not load join.css.

   Motion: every transition, animation and smooth scroll lives inside @media (prefers-reduced-motion: no-preference),
   so a visitor who asks for less motion gets none by construction. Two things move by themselves: the preview, which has no
   CSS animation at all (market.js runs its timeline, opacity and transform written on the frame's parts, only while it is on
   screen, the tab is visible and the visitor has not asked for reduced motion; section 6 below), and the soft blink of the green
   dot in front of the vendor count (section 7, CSS only, opacity and transform, still under reduced motion). */


/* ------------------------------------------------------------------ 1. tokens */
:root{
  --bg:#faf7f0; --surface:#ffffff; --surface-2:#f3eee3; --surface-3:#ebe4d4;
  --ink:#12201b; --ink-2:#46574f; --ink-3:#5f6e67;
  --line:#e6dfcf; --line-strong:#cfc6b1;
  --brand:#0e5a44; --brand-hover:#0a4535; --brand-ink:#ffffff;
  --brand-soft:#e3f0e9; --brand-soft-ink:#0a4535;
  --brand-deep:#082e24; --brand-deep-ink:#f4efe2;
  --accent:#b8913b; --accent-strong:#84651f; --accent-soft:#f6ecd3;
  --danger:#b3382c; --danger-soft:#fae3df; --success:#1c7a4d;
  /* Derived (6.3): the demo's --line-strong (about 1.6:1) cannot border an input, and its gold cannot be a focus ring. */
  --field-border:#7d8b83;
  --focus:var(--brand);
  /* Colours only the preview pictures use (6.6): warm sand for skin, henna ink, dark amber glass. */
  --pv-sand:#cc9660; --pv-henna:#6b2e15; --pv-amber:#8a5320;
  /* The "live" green of the dot before the vendor count (6.3): about 3.3:1 on the cream page, a decoration, never the only carrier of meaning. */
  --live:#1f9d57;

  --font-display:'Cormorant Garamond','Cormorant Fallback M','Cormorant Fallback T',Georgia,'Times New Roman',serif;
  --font-body:'Inter','Inter Fallback M',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --gutter:16px;
  --radius:12px;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1511; --surface:#121e19; --surface-2:#182721; --surface-3:#1f3029;
    --ink:#efe9d9; --ink-2:#b6c2ba; --ink-3:#8a9a91;
    --line:#243630; --line-strong:#35493f;
    --brand:#4fbf98; --brand-hover:#6ad0ac; --brand-ink:#062119;
    --brand-soft:#14302a; --brand-soft-ink:#9fe0c7;
    --brand-deep:#06100c; --brand-deep-ink:#efe9d9;
    --accent:#d2ab52; --accent-strong:#e0be6c; --accent-soft:#2a2412;
    --danger:#ef8a7c; --danger-soft:#35171a; --success:#5fcf95;
    --field-border:#6a8174;
    --pv-sand:#e3bd90; --pv-henna:#6b2e15; --pv-amber:#b9772c;
    --live:#3fd987;
  }
}

/* Fallback faces sized like the web fonts, so the swap when they arrive does not move the page (same values as index.html). */
@font-face{font-family:'Cormorant Fallback M';src:local('Georgia');size-adjust:88.12%;ascent-override:104.4%;descent-override:32.9%;line-gap-override:0%}
@font-face{font-family:'Cormorant Fallback T';src:local('Times New Roman'),local('Times');size-adjust:96.51%;ascent-override:95.3%;descent-override:30.0%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback M';src:local('Arial'),local('Helvetica');size-adjust:106.3%;ascent-override:91.2%;descent-override:22.6%;line-gap-override:0%}


/* ------------------------------------------------------------------- 2. base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
h1,h2,h3,p,ul,ol,figure,fieldset,dl{margin:0}
ul,ol{padding:0}
img,svg{max-width:100%}
a{color:var(--brand);text-underline-offset:.18em}
a:hover{color:var(--brand-hover)}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
main:focus{outline:none}
::selection{background:var(--brand-soft);color:var(--brand-soft-ink)}

.wrap{width:min(100% - 2 * var(--gutter), 70rem);margin-inline:auto}

.skip{position:absolute;left:var(--gutter);top:-5rem;z-index:100;padding:.8rem 1.1rem;border-radius:0 0 var(--radius) var(--radius);background:var(--brand);color:var(--brand-ink);font-weight:600;text-decoration:none}
.skip:focus{top:0}
.skip:hover{color:var(--brand-ink)}

h1,h2,h3{font-family:var(--font-display);font-weight:600;font-variant-numeric:lining-nums;text-wrap:balance;overflow-wrap:anywhere}
p{text-wrap:pretty}


/* ---------------------------------------------------------------- 3. header */
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;min-height:4rem}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;min-width:0;min-height:2.75rem;font:600 1.5rem/1 var(--font-display);font-variant-numeric:lining-nums;letter-spacing:.005em;color:var(--brand);text-decoration:none}
.wordmark:hover{color:var(--brand-hover)}
/* The Rahti app icon beside the wordmark (header and footer): a black rounded square with a gold mark, 40 px high, the file is 120 px
   (three times as dense). The image carries its own rounded corners; the width and height attributes in the markup reserve the space,
   so nothing moves when it loads. On the dark page the black square would nearly vanish, so it gets a hairline edge there. */
.mark{display:block;flex:none;width:40px;height:40px;border-radius:9px}
@media (prefers-color-scheme: dark){
  .mark{box-shadow:0 0 0 1px var(--line-strong)}
}
.bar-link{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .15rem;font-size:.95rem;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px}
/* The two links ("Rahti app", "Join the vendor list") sit together on the right. The bar wraps only when it must (a phone, or very large text):
   the pair then drops under the wordmark as one row, which still fits in 288 px, so a link never wraps onto two lines and nothing scrolls sideways. */
.bar-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 1.25rem;min-width:0}


/* ------------------------------------------------------------------ 4. hero */
.hero{padding-block:clamp(1rem,4vw,3rem) clamp(2.5rem,7vw,5rem)}
.eyebrow{display:inline-block;margin-bottom:1rem;padding:.28rem .85rem;border-radius:999px;background:var(--brand-soft);color:var(--brand-soft-ink);font-size:.875rem;font-weight:600;line-height:1.5}
h1{font-size:clamp(2.4rem,1.2rem + 5.2vw,4.5rem);line-height:1.02;letter-spacing:-.012em}
.hero-body{margin-top:1.25rem}
.lead{max-width:34rem;font-size:1.0625rem;line-height:1.6;color:var(--ink-2)}
.hero-actions{margin-top:1.4rem}
.hype{max-width:30rem;margin-top:1.1rem;font:600 1.3rem/1.22 var(--font-display);font-variant-numeric:lining-nums;color:var(--brand)}
.proof{display:flex;align-items:center;gap:.6rem;margin-top:.9rem;font-size:.95rem;font-weight:600;color:var(--ink)}
/* The dot in front of the vendor count: a green dot (::before) with a faint ring (::after) that can expand around it. Both are drawn here, in
   an element with aria-hidden, so it is decoration for everyone. Still and green by default (reduced motion, no animation support); the
   soft blink is in section 7, inside the no-preference media query. */
.proof-dot{position:relative;flex:none;width:.6rem;height:.6rem}
.proof-dot::before,.proof-dot::after{content:"";position:absolute;inset:0;border-radius:50%}
.proof-dot::before{background:var(--live)}
.proof-dot::after{border:1.5px solid var(--live);opacity:0}


/* -------------------------------------------------------------- 5. sections */
.section{padding-block:clamp(2.5rem,6vw,4.75rem);border-top:1px solid var(--line)}
.split{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr)}
.split-head{min-width:0}
.split-body{min-width:0}
h2{font-size:clamp(1.9rem,1.35rem + 2.2vw,2.75rem);line-height:1.08;letter-spacing:-.008em}
.section--stage{background:var(--surface-2)}

/* Four big ideas. One column on a phone; two columns whenever the column is wide enough for two (auto-fit, so it follows the
   room the section really has: a tablet, or a desktop where the heading takes the left side). A short gold bar (decoration only,
   never text and never a border that carries meaning) marks each idea. */
.ideas{list-style:none;display:grid;gap:2rem 2.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16.5rem),1fr))}
.ideas li{min-width:0}
.ideas li::before{content:"";display:block;width:2.25rem;height:3px;margin-bottom:.95rem;border-radius:2px;background:var(--accent)}
.ideas h3{margin-bottom:.45rem;font-size:clamp(1.65rem,1.3rem + 1.4vw,2.05rem);line-height:1.1}
.ideas p{max-width:30rem;color:var(--ink-2)}
/* The plain sentence under the four ideas: what the first version is. Same text colour as the ideas, set off by a thin rule. */
.ideas-note{max-width:34rem;margin-top:2.1rem;padding-top:1.1rem;border-top:1px solid var(--line);color:var(--ink-2)}

.steps{list-style:none;display:grid;gap:1.35rem;counter-reset:step}
.steps li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.9rem;align-items:baseline;max-width:38rem;font-size:1.0625rem;counter-increment:step}
.steps li::before{content:counter(step);content:counter(step) / "";font:600 2.4rem/1 var(--font-display);font-variant-numeric:lining-nums;color:var(--accent-strong)}

@media (min-width: 56.25rem){
  .hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2rem;align-items:end}
  .hero-head{grid-column:1 / span 7}
  .hero-body{grid-column:8 / span 5;margin-top:0;padding-bottom:.4rem}
  .split{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2rem}
  .split-head{grid-column:1 / span 5;align-self:start;position:sticky;top:1.5rem}
  .split-body{grid-column:6 / span 7}
}


/* ------------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.7rem 1.6rem;border:2px solid var(--brand);border-radius:var(--radius);background:var(--brand);color:var(--brand-ink);font-size:1rem;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--brand-ink)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.65;cursor:default;transform:none}
.btn--block{width:100%}
.btn--ghost{background:transparent;color:var(--brand)}
.btn--ghost:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-soft-ink)}


/* --------------------------------------------------------------------- form */
.form,.done{padding:clamp(1.15rem,4vw,2rem);border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.form-lead{margin-top:.6rem;max-width:22rem;color:var(--ink-2)}
.nojs{max-width:34rem;padding:1rem 1.15rem;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--ink)}

.field{margin:0 0 1.4rem;padding:0;border:0;min-inline-size:0}
.field > label:not(.check),.field > legend{display:block;margin-bottom:.2rem;padding:0;font-weight:600;line-height:1.4}
.hint{margin-bottom:.5rem;font-size:.9rem;line-height:1.45;color:var(--ink-2)}
.err{margin-top:.45rem;font-size:.9rem;font-weight:500;line-height:1.45;color:var(--danger)}
.err::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.45em;border-radius:50%;background:var(--danger);vertical-align:-.08em}

input[type="text"],input[type="email"],input[type="url"],textarea{display:block;width:100%;min-height:3rem;padding:.65rem .85rem;border:1px solid var(--field-border);border-radius:10px;background:var(--bg);color:var(--ink);font-size:1rem;line-height:1.4;-webkit-appearance:none;appearance:none}
textarea{min-height:7.5rem;resize:vertical}
input::placeholder{color:var(--ink-3);opacity:1}
input:focus-visible,textarea:focus-visible{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:2px}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
input:disabled,textarea:disabled{opacity:.6}
input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 100px var(--bg) inset}

.checks{display:grid;gap:.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.check{display:flex;align-items:center;gap:.65rem;min-height:2.75rem;padding:.4rem .7rem;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg);font-size:.95rem;font-weight:500;line-height:1.3;cursor:pointer}
.check > span{min-width:0;overflow-wrap:anywhere}
.check input{position:relative;flex:none;width:1.4rem;height:1.4rem;margin:0;border:2px solid var(--field-border);border-radius:6px;background:var(--surface);-webkit-appearance:none;appearance:none;cursor:pointer}
.check input::after{content:"";position:absolute;left:50%;top:46%;width:.72rem;height:.38rem;border:solid var(--brand-ink);border-width:0 0 2.5px 2.5px;transform:translate(-50%,-50%) rotate(-45deg) scale(0)}
.check input:checked{border-color:var(--brand);background:var(--brand)}
.check input:checked::after{transform:translate(-50%,-50%) rotate(-45deg) scale(1)}
.check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.check input:disabled{opacity:.6}
.check:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand-soft-ink)}
.check--inline{display:inline-flex;margin-top:.6rem}
/* The follow-up box under the category list ("What kind of service?", "What else do you sell?"): tucked up under the list, with a short gold rule
   on its left so it reads as a question about the list. Hidden (the hidden attribute) until its box is ticked. */
.field--kind{margin:-.85rem 0 1.4rem;padding-left:.95rem;border-left:3px solid var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.consent{margin:0 0 1.35rem;padding:1rem;border-radius:14px;background:var(--surface-2)}
.check--consent{padding:.25rem 0;border:0;background:transparent;font-size:1rem;font-weight:600}
.check--consent:has(input:checked){background:transparent;color:inherit}
.notice{margin-top:.45rem;font-size:.9rem;line-height:1.55;color:var(--ink-2)}

.form-msg{margin:0 0 .9rem;font-weight:500;line-height:1.45}
.form-msg:not(:empty){padding:.75rem .95rem;border:1px solid var(--danger);border-left-width:5px;border-radius:10px;background:var(--danger-soft);color:var(--ink)}
.form-msg--top{margin-bottom:1.25rem}
.form-msg--top:empty{margin:0}

.done{text-align:left}
.done-title{display:block;font:600 clamp(1.7rem,1.3rem + 1.6vw,2.25rem)/1.12 var(--font-display);font-variant-numeric:lining-nums;color:var(--brand)}
.done-title:focus{outline:1px solid var(--line);outline:1px solid color-mix(in srgb,var(--focus) 28%,transparent);outline-offset:8px;border-radius:10px}
.done-title:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
.done-sub{margin-top:.6rem;max-width:30rem;color:var(--ink-2)}
.share{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.share-label{margin-bottom:.8rem;font-weight:600}
.share-row{display:flex;flex-wrap:wrap;gap:.6rem}
.share-row .btn{min-height:2.75rem;padding:.5rem 1.1rem;font-size:.95rem}
.share-url{display:inline-block;padding:.55rem .9rem;border:1px solid var(--line-strong);border-radius:var(--radius);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}


/* ---------------------------------------------------------------------- FAQ */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.25rem;padding:.6rem 0;font-weight:600;line-height:1.4;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";content:"+" / "";flex:none;font:400 1.6rem/1 var(--font-body);color:var(--brand)}
.faq details[open] > summary::after{content:"\2212";content:"\2212" / ""}
.faq details p{max-width:38rem;margin-bottom:1.1rem;color:var(--ink-2)}


/* ------------------------------------------------------ About your information */
/* The page's own privacy disclosure (id about-info). A plain list of terms and answers with a hairline between them, like the FAQ above it.
   Nothing here is collapsed: the notice by the button links to this section, so it must be readable when it is reached. */
#about-info{scroll-margin-top:1rem}
.about-lead{max-width:38rem;margin-bottom:1.25rem;color:var(--ink-2)}
.about dl{margin:0}
.about-item{padding:.95rem 0;border-top:1px solid var(--line)}
.about-item:last-child{border-bottom:1px solid var(--line)}
.about dt{font-weight:600;line-height:1.4}
.about dd{max-width:38rem;margin:.3rem 0 0;color:var(--ink-2);overflow-wrap:anywhere}
.about dd ul{margin:0;padding-left:1.15rem}
.about dd li+li{margin-top:.45rem}
.about dd a{font-weight:500}


/* ------------------------------------------------------------------- footer */
.site-footer{padding-block:2.5rem 3rem;border-top:1px solid var(--line);background:var(--surface-2)}
.foot{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem}
.foot-word{display:flex;align-items:center;gap:.6rem;font:600 1.5rem/1.1 var(--font-display);font-variant-numeric:lining-nums;color:var(--brand)}
.foot-line{margin-top:.2rem;color:var(--ink-2)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 1.4rem;list-style:none}
.foot-links a{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:500;overflow-wrap:anywhere}
.foot-copy{font-size:.9rem;color:var(--ink-2)}
@media (min-width: 56.25rem){
  .foot{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .foot-links{grid-column:1 / -1}
}


/* ------------------------------------------- Turnstile dialog ("One quick check") */
/* Out of sight until Cloudflare asks for a tick; market.js then sets data-visible="true" and removes aria-hidden. */
.ts{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ts:not([data-visible="true"]) :is(h3,[data-market-turnstile-cancel]){visibility:hidden}
.ts[data-visible="true"]{position:fixed;inset:auto 0 0 0;z-index:60;width:auto;height:auto;margin:0;padding:1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));overflow:visible;clip:auto;clip-path:none;white-space:normal;border-top:1px solid var(--line-strong);border-radius:20px 20px 0 0;background:var(--surface);box-shadow:0 0 0 100vmax rgb(0 0 0 / .5),0 -20px 60px rgb(0 0 0 / .3)}
.ts h3{margin-bottom:.8rem;font-size:1.5rem;line-height:1.2}
.ts h3:focus{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}
.ts .btn{min-height:2.75rem;margin-top:.8rem}
@media (max-width: 23rem){
  .ts[data-visible="true"]{padding-inline:10px}
}
@media (min-width: 40rem){
  .ts[data-visible="true"]{inset:0;width:min(22rem,calc(100% - 2rem));height:fit-content;margin:auto;padding:1.25rem 1.25rem 1.4rem;border:1px solid var(--line-strong);border-radius:20px}
}


/* ------------------------------------------------------- 6. the preview frame */
/* A mock-up of soft blocks with one typed word and one picture. What this stylesheet draws, with no JavaScript, is the static frame:
   the expanded search bar with "dates" in it, no suggestions panel, no cursor, six cards (the first with the date picture, the other
   five blank) and the planned pin chip. market.js moves the parts by writing opacity and transform on them (the timeline in
   contract 6.6); it also draws this same frame, through the same code, for reduced motion. */
.preview figcaption{max-width:40rem;margin-top:1rem;font-size:.95rem;line-height:1.5;color:var(--ink-2)}

.pv{position:relative;container-type:inline-size;border:1px solid var(--line-strong);border-radius:24px;background:var(--surface);overflow:hidden;isolation:isolate;pointer-events:none;-webkit-user-select:none;user-select:none;box-shadow:0 34px 60px -40px rgb(8 46 36 / .5)}
@media (max-width: 40rem){
  .pv{max-width:24rem;margin-inline:auto}
}
.pv-b{display:block;border-radius:6px;background:var(--surface-3);filter:blur(.6px)}
.pv-chrome{display:none;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.pv-chrome i{width:9px;height:9px;border-radius:50%;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-strong)}
.pv-screen{position:relative;padding:14px 14px 16px}

.pv-top{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px 10px}
.pv-logo{width:62px;height:20px;border-radius:7px}
.pv-nav{display:none}
.pv-search{position:relative;grid-column:1 / -1;height:40px}
.pv-bar{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface-2);color:var(--brand)}
.pv-bar-s{opacity:0}
.pv-ic{flex:none;width:16px;height:16px}
.pv-ph{width:42%;height:9px}
.pv-bar-xl{inset:-5px -8px;padding:0 22px;border-color:var(--brand);background:var(--surface);box-shadow:0 12px 30px -14px rgb(8 46 36 / .55)}
.pv-field{display:flex;flex:1;align-items:center;min-width:0}
.pv-text{min-width:0;overflow:hidden;white-space:pre;font:500 16px/1.25 var(--font-body);color:var(--ink)}
.pv-caret{flex:none;width:2px;height:19px;margin-left:2px;border-radius:1px;background:var(--brand);opacity:0}
.pv-panel{position:absolute;left:-8px;right:-8px;top:calc(100% + 12px);display:grid;gap:2px;padding:8px;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);box-shadow:0 20px 40px -20px rgb(8 46 36 / .5);opacity:0}
.pv-row{display:flex;align-items:center;gap:10px;height:34px;padding:0 6px}
.pv-dot{flex:none;width:20px;height:20px;border-radius:50%}
.pv-row .pv-ln{width:60%;height:9px}
.pv-row:nth-child(2) .pv-ln{width:46%}
.pv-row:nth-child(3) .pv-ln{width:68%}
.pv-row:nth-child(4) .pv-ln{width:38%}
/* The ripple and the cursor sit in the screen, not in the search bar, so the timeline can put them on the bar and then on the first
   card. Their positions are measured from the layout by market.js (the tip of the arrow is at 3.7px, 2.3px of its box). */
.pv-ripple{position:absolute;z-index:4;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;border:2px solid var(--brand);border-radius:50%;opacity:0}
.pv-cursor{position:absolute;z-index:5;left:0;top:0;width:22px;height:22px;margin:0;opacity:0;fill:var(--ink);stroke:var(--surface);transform-origin:3.7px 2.3px}

.pv-chips{display:flex;gap:8px;margin-top:14px;overflow:hidden}
.pv-chips .pv-b{flex:none;width:54px;height:26px;border-radius:999px}
.pv-chips .pv-b:nth-child(2){width:68px}
.pv-chips .pv-b:nth-child(3){width:50px}
.pv-chips .pv-b:nth-child(4){width:74px}
.pv-chips .pv-b:nth-child(5){width:58px}
.pv-chips .pv-b:nth-child(6){width:62px}
.pv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 12px}
.pv-title{width:38%;height:16px}
.pv-near{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 9px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface)}
.pv-pin{flex:none;width:11px;height:14px;fill:var(--accent)}
.pv-near .pv-ln{width:34px;height:8px}

.pv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pv-card{--pv-pad:8px;--pv-img-h:108px;position:relative;display:flex;flex-direction:column;gap:7px;padding:var(--pv-pad);border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.pv-img{height:var(--pv-img-h);border-radius:9px;background:var(--surface-3)}

/* The picture tile on the first card: a flat cream tile with one of the ten pictures (ten inline SVGs, one shown at a time; the
   others carry the hidden attribute). The pictures use only the page's emerald, gold and cream tokens plus picture tokens, so they
   follow light and dark: emerald is --brand, gold is --accent, cream is --accent-soft (which is the tile too, so a cream detail
   reads as a cut-out), deep ink is --brand-deep (a dark detail on gold), and --pv-sand (skin), --pv-henna (henna ink) and
   --pv-amber (dark amber glass) are used by the henna hand and the dropper bottle. One line weight everywhere (2.5 units in a
   100 unit box), round ends and joins. */
.pv-art{position:absolute;z-index:1;left:var(--pv-pad);right:var(--pv-pad);top:var(--pv-pad);height:var(--pv-img-h);overflow:hidden;border-radius:9px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--line)}
.pv-pic{position:absolute;left:4px;top:4px;display:block;width:calc(100% - 8px);height:calc(100% - 8px)}
.pv-pic .e{fill:var(--brand)}
.pv-pic .g{fill:var(--accent)}
.pv-pic .c{fill:var(--accent-soft)}
.pv-pic .k{fill:var(--brand-deep)}
.pv-pic .gs{fill:var(--accent);stroke:var(--accent-soft);stroke-width:2.5;stroke-linejoin:round}
.pv-pic .gr{fill:var(--accent);stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.pv-pic .s{fill:var(--pv-sand)}
.pv-pic .h{fill:var(--pv-henna)}
.pv-pic .a{fill:var(--pv-amber)}
.pv-pic .er{fill:var(--brand);stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round}
.pv-pic .cr{fill:var(--accent-soft);stroke:var(--accent-soft);stroke-width:2.5;stroke-linejoin:round}
.pv-pic :is(.l,.le,.lg,.lk,.lh){fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pv-pic .l{stroke:var(--accent-soft)}
.pv-pic .le{stroke:var(--brand)}
.pv-pic .lg{stroke:var(--accent)}
.pv-pic .lk{stroke:var(--brand-deep)}
.pv-pic .lh{stroke:var(--pv-henna)}
.pv-card .pv-ln{height:8px}
.pv-img + .pv-ln{width:88%}
.pv-ln + .pv-ln{width:58%}
.pv-tag{width:44px;height:14px;margin-top:2px;border-radius:999px}

@container (min-width: 34rem){
  .pv-chrome{display:flex}
  .pv-screen{padding:20px 22px 24px}
  .pv-top{grid-template-columns:auto auto minmax(0,1fr);gap:0 28px}
  .pv-logo{width:74px;height:22px}
  .pv-nav{display:flex;gap:16px}
  .pv-nav .pv-b{width:46px;height:10px}
  .pv-search{grid-column:auto}
  .pv-chips{margin-top:18px}
  .pv-chips .pv-b{height:28px}
  .pv-head{margin:20px 0 14px}
  .pv-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .pv-card{--pv-pad:10px;--pv-img-h:116px}
}


/* ------------------------------------------------ 7. motion (no-preference only; the preview has none, see section 6) */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  .btn{transition:background-color .15s ease,border-color .15s ease,transform .1s ease}
  input,textarea{transition:border-color .15s ease}
  .check{transition:background-color .15s ease,border-color .15s ease}
  .check input{transition:background-color .12s ease,border-color .12s ease}
  .check input::after{transition:transform .14s cubic-bezier(.22,.8,.28,1)}
  .done{animation:mk-in .4s cubic-bezier(.22,.8,.28,1)}
  @keyframes mk-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  /* The live dot: the green fades softly between full and 35 percent and back, and a faint ring grows out of it (it fades in, then out), 1.8 s
     per cycle, both eased, never a hard on-off flash. Opacity and transform only. */
  .field--kind{animation:mk-in .25s cubic-bezier(.22,.8,.28,1)}
  .proof-dot::before{animation:mk-live-dot 1.8s ease-in-out infinite}
  .proof-dot::after{animation:mk-live-ring 1.8s ease-out infinite}
  @keyframes mk-live-dot{0%,100%{opacity:1}50%{opacity:.35}}
  @keyframes mk-live-ring{0%{opacity:0;transform:scale(1)}20%{opacity:.45}75%,100%{opacity:0;transform:scale(2.6)}}
}


/* ------------------------------------------------------- 8. wider form layout */
@media (min-width: 36rem){
  .checks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .btn--block{width:auto;min-width:16rem}
}

/* Windows high contrast and similar: keep field borders, the focus ring and the checked state visible with system colours. */
@media (forced-colors: active){
  input[type="text"],input[type="email"],input[type="url"],textarea,.check input{border-color:CanvasText}
  .check input:checked{background:Canvas;border-color:Highlight}
  .check input:checked::after{border-color:CanvasText}
  :focus-visible{outline-color:Highlight}
  .pv-b,.pv-bar,.pv-card{border:1px solid GrayText}
  .proof-dot::before{background:Highlight;forced-color-adjust:none}
  .proof-dot::after{border-color:Highlight}
}