/* Brochure website imprinthq.site: the sales brochure's palette, fonts and shapes (docs/help/make-brochure.mjs), for screens.
   Light and dark follow the visitor's setting. No JavaScript anywhere. */
@font-face{font-family:'IBM Plex Sans';src:url('/fonts/ibm-plex-sans-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-4-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --navy:#1f3a5f;--navy-deep:#122540;--navy-hi:#2f5788;--mist:#8fa3bf;
  --teal:#1b7f83;--green:#2c7a4b;--amber:#9a5b00;
  --ink:#1c2430;--muted:#5b6673;--line:#d9dee5;--wash:#f3f5f8;--bg:#ffffff;--card:#ffffff;
  --heading:var(--navy);--accent:var(--teal);
  --teal-bg:#e3f3f3;--green-bg:#e6f3ea;--amber-bg:#fbf1dc;--navy-bg:#e8edf4;
  --shadow:0 6px 18px rgba(31,58,95,.10);
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --wrap:72rem;--gutter:clamp(1rem,4vw,2rem);
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#e8ecf0;--muted:#a9b4c2;--line:#2c3a4d;--wash:#141d29;--bg:#0e1621;--card:#16202d;
    --heading:#e8ecf0;--accent:#5cc3c7;
    --teal-bg:#123638;--green-bg:#15301f;--amber-bg:#3a2a10;--navy-bg:#1b2a3f;
    --shadow:0 6px 18px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans)}
img,svg{display:block;max-width:100%}
/* `hidden` always wins: the Try page's progress panel and sketch have display rules of their own (Robert, 1 Nov: the
   panel showed before anything was pressed). */
[hidden]{display:none !important}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--heading);margin:0;letter-spacing:-.005em;text-wrap:balance}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--ink);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 .75rem}
.lead{font-size:clamp(1.1rem,2.2vw,1.3rem);line-height:1.5;color:var(--muted);max-width:40rem}
.section{padding:clamp(3rem,8vw,5.5rem) 0}
.section.wash{background:var(--wash)}
.section h2{font-size:clamp(1.9rem,4.5vw,2.6rem);line-height:1.12;margin-bottom:1.25rem;max-width:40rem}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--bg)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem;flex-wrap:wrap}
.brand img{height:2.6rem;width:auto}
.nav{display:flex;align-items:center;gap:.25rem 1.25rem;flex-wrap:wrap;font-size:.98rem}
.nav a{text-decoration:none;padding:.5rem 0;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{color:var(--heading);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.nav .talk{display:none}
@media (min-width:44rem){.nav .talk{display:inline-flex}}
@media (max-width:30rem){.top .wrap{padding-top:.6rem;padding-bottom:.4rem}.brand img{height:2.2rem}.nav{width:100%;justify-content:space-between}}
/* The phone menu (Robert, 2 Nov): below 44rem the nav becomes a full-screen popover opened by "Menu", with no JavaScript. On
   wider screens, and in browsers without popovers, the nav stays as it was. */
.menu-btn,.nav-top{display:none}
.nav[popover]{position:static;inset:auto;margin:0;padding:0;border:0;background:none;color:inherit;width:auto;height:auto;overflow:visible}
@supports selector(:popover-open){@media (max-width:43.99rem){
  .top .wrap{flex-wrap:nowrap;padding-top:0;padding-bottom:0;min-height:4rem}
  .brand img{height:2.2rem}
  .menu-btn{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:.4rem .9rem;border:1.5px solid var(--line);border-radius:99rem;background:var(--card);color:var(--heading);font:inherit;font-weight:600;cursor:pointer}
  .menu-btn:hover{border-color:var(--accent)}
  .nav[popover]:not(:popover-open){display:none}
  .nav[popover]:popover-open{position:fixed;inset:0;width:100%;height:100%;max-height:none;max-width:none;margin:0;padding:0 var(--gutter) 2rem;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;overflow-y:auto;background:var(--bg);font-size:1.15rem}
  .nav-top{display:flex;align-items:center;justify-content:space-between;min-height:4rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
  .nav[popover] > a:not(.talk){display:block;padding:.95rem .25rem;border-bottom:1px solid var(--line);color:var(--ink)}
  .nav[popover] > a[aria-current=page]{color:var(--heading);font-weight:600;box-shadow:inset 4px 0 0 var(--accent);padding-left:.9rem}
  .nav[popover] .talk{display:inline-flex;justify-content:center;margin-top:1.5rem}
}}
.menu-btn:focus-visible,.nav a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.7rem 1.4rem;border-radius:99rem;font-weight:600;text-decoration:none;line-height:1.2}
.btn svg{flex:none}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 4px 14px rgba(0,0,0,.22)}
.btn-light:hover{background:#eef3f9}
.btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-hi)}
@media (prefers-color-scheme:dark){.btn-solid{background:#2f5788}.btn-solid:hover{background:#3b679f}}
.nav .talk{min-height:2.5rem;padding:.45rem 1.1rem;color:#fff;font-weight:600}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.btn-outline{color:var(--heading);border:1.5px solid var(--line);background:var(--card);font:inherit;font-weight:600;cursor:pointer}
.btn-outline:hover{border-color:var(--accent)}
button.btn{font:inherit;font-weight:600;cursor:pointer;border:0}
button.btn:disabled{opacity:.6;cursor:progress}

/* navy panels (hero, closing) */
.navy{background:radial-gradient(120% 90% at 85% 0%,var(--navy-hi) 0%,var(--navy) 42%,var(--navy-deep) 100%);color:#fff;position:relative;overflow:hidden}
.navy h1,.navy h2{color:#fff}
.navy .eyebrow{color:#a9cfe0}
.hero{padding:clamp(3rem,9vw,6rem) 0 clamp(2rem,5vw,3rem)}
.hero h1{font-size:clamp(2.4rem,7vw,4.1rem);line-height:1.06;max-width:52rem;margin-bottom:1.5rem}
.hero .sub{font-size:clamp(1.1rem,2.4vw,1.4rem);line-height:1.5;color:#d6deea;max-width:40rem}
.hero .glow{position:absolute;right:-12rem;top:6rem;width:36rem;height:36rem;border-radius:50%;background:radial-gradient(circle,rgba(143,163,191,.28),rgba(143,163,191,0) 66%);pointer-events:none}
.hero .art{margin-top:clamp(2rem,6vw,3.5rem);max-width:52rem}
.hero .tag{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.22);color:#c3cfdf;font-size:.95rem;letter-spacing:.03em}
.privacy{max-width:42rem}
.privacy h2{font-size:1.35rem;margin:2rem 0 .5rem}
.privacy h2:first-child{margin-top:0}
.privacy p{margin-bottom:.75rem}
.page-head{padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(2rem,5vw,3rem)}
.page-head h1{font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.08;margin-bottom:1rem}
.page-head .sub{font-size:clamp(1.05rem,2.2vw,1.25rem);color:#d6deea;max-width:40rem}

/* the idea */
.cols{display:grid;gap:1.25rem 2.5rem;margin-bottom:2.5rem}
@media (min-width:48rem){.cols{grid-template-columns:1fr 1fr}}
.cols p:first-child::first-line{font-weight:600;color:var(--heading)}
.quotes{list-style:none;margin:0;padding:clamp(1.5rem,4vw,2.25rem) clamp(1.25rem,5vw,4.5rem) clamp(1.5rem,4vw,2.25rem) clamp(1.25rem,3vw,2rem);border-radius:1.25rem;background:linear-gradient(160deg,var(--navy),var(--navy-deep));color:#fff;display:grid;gap:1.25rem;position:relative}
.quotes::before{content:"\201C";position:absolute;right:1.25rem;top:-.25rem;font-family:var(--serif);font-size:6rem;line-height:1;color:rgba(143,163,191,.35)}
.quotes::before{display:none}
@media (min-width:40rem){.quotes::before{display:block}}
.quotes li{display:grid;grid-template-columns:2.25rem 1fr;gap:1rem;align-items:start;font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2.6vw,1.45rem);line-height:1.3}
.quotes li+li{border-top:1px solid rgba(255,255,255,.16);padding-top:1.25rem}
.quotes .n{width:2.25rem;height:2.25rem;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font:600 .95rem var(--sans);color:#cfe0f2;margin-top:.15rem}
.art svg{width:100%;height:auto}

/* real output in device frames */
.showcase{display:grid;gap:2.5rem 2rem;margin-top:2.5rem;align-items:end}
@media (min-width:44rem){.showcase{grid-template-columns:1fr 1fr}.showcase .laptop{grid-column:1/-1}}
@media (min-width:68rem){.showcase{grid-template-columns:1.75fr .62fr 1fr}.showcase .laptop{grid-column:auto}}
.showcase figure{margin:0}
.laptop{padding:0 4%}
.showcase .ex-badge{grid-column:1/-1;justify-self:start;margin:0 0 -1rem;padding:.3rem .85rem;border-radius:99rem;background:var(--amber-bg);color:var(--amber);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
@media (prefers-color-scheme:dark){.showcase .ex-badge{color:#f0b14a}}
.example-note{margin-top:1.75rem;max-width:44rem;font-size:.95rem;color:var(--muted);border-left:3px solid var(--amber);padding-left:.9rem}
.page-head .sub.small{font-size:1rem;margin-top:.75rem;color:#c3cfdf}
.showcase figcaption{font-size:.9rem;color:var(--muted);margin-top:.75rem;text-align:center}
.showcase img{display:block;width:100%;height:auto}
.laptop .screen{border:clamp(6px,1.2vw,12px) solid #1a2230;border-radius:14px 14px 0 0;overflow:hidden;background:#1a2230;box-shadow:0 10px 30px rgba(18,37,64,.25)}
.laptop .base{height:clamp(10px,1.4vw,16px);margin:0 -5%;border-radius:0 0 14px 14px;background:linear-gradient(#d5dbe3,#9aa5b3)}
.phone{max-width:16.5rem;width:100%;justify-self:center}
.phone .screen{border:9px solid #111821;border-radius:2.1rem;overflow:hidden;background:#111821;box-shadow:0 10px 30px rgba(18,37,64,.28)}
.fbpost{max-width:24rem;width:100%;justify-self:center}
.fbpost .card{background:#fff;color:#1c1e21;border:1px solid #dadde1;border-radius:.75rem;overflow:hidden;box-shadow:0 10px 30px rgba(18,37,64,.18);font-size:.9rem;line-height:1.45}
.fbpost .who{display:flex;gap:.6rem;align-items:center;padding:.8rem .9rem .4rem}
.fbpost .av{width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:#3a7d44;color:#fff;font-weight:600}
.fbpost .who b{display:block;font-size:.92rem}
.fbpost .who small{color:#65676b;font-size:.78rem}
.fbpost .txt{padding:.2rem .9rem .75rem;margin:0}
.fbpost .link{margin:0;padding:.6rem .9rem;background:#f0f2f5;font-weight:600;font-size:.88rem}
.fbpost .acts{display:flex;justify-content:space-around;border-top:1px solid #dadde1;padding:.5rem .4rem;color:#65676b;font-size:.82rem;font-weight:600}
.fbpost .acts span{display:inline-flex;gap:.35rem;align-items:center}
@media (prefers-color-scheme:dark){.laptop .base{background:linear-gradient(#5b6676,#3a4452)}}

/* sample */
.sample{display:grid;gap:1.5rem;align-items:center;border:1px solid var(--line);border-radius:1.25rem;background:var(--card);box-shadow:var(--shadow);padding:clamp(1.5rem,4vw,2.5rem)}
@media (min-width:48rem){.sample{grid-template-columns:1fr auto}}
.sample h2{margin-bottom:.75rem}
.sample p{color:var(--muted);max-width:38rem}
.soon{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:99rem;background:var(--teal-bg);color:var(--accent);font-weight:600}

/* steps */
.steps{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:2.25rem 1.25rem;position:relative}
@media (min-width:40rem){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.steps{grid-template-columns:repeat(4,1fr)}.steps::before{content:"";position:absolute;left:12%;right:12%;top:3.6rem;border-top:3px dotted var(--mist)}}
.step{text-align:center;position:relative}
.disc{width:7.25rem;height:7.25rem;border-radius:50%;margin:0 auto 1.1rem;display:grid;place-items:center;position:relative;border:3px solid var(--bg);box-shadow:0 6px 14px rgba(31,58,95,.2);color:#fff}
.disc .no{position:absolute;right:-.2rem;top:-.2rem;width:2rem;height:2rem;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font:600 1rem var(--sans);box-shadow:0 2px 5px rgba(31,58,95,.25)}
.k-person{background:linear-gradient(145deg,#2c5286,var(--navy))}.k-ai{background:linear-gradient(145deg,#2aa0a4,var(--teal))}.k-check{background:linear-gradient(145deg,#c47b0f,var(--amber))}.k-live{background:linear-gradient(145deg,#3a9c64,var(--green))}
.step h3{font-size:1.3rem;line-height:1.2;margin-bottom:.4rem}
.step p{color:var(--muted);font-size:1rem;max-width:20rem;margin:0 auto}
.note{margin-top:3rem;border-radius:1rem;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--teal);padding:1.5rem 1.75rem;font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,2.4vw,1.35rem);line-height:1.4;color:var(--heading);box-shadow:var(--shadow)}
.timeline{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.75rem}
@media (min-width:40rem){.timeline{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.timeline{grid-template-columns:repeat(4,1fr)}}
.timeline li{border-radius:.75rem;padding:.9rem 1rem;font-size:.95rem;line-height:1.45}
.timeline b{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.2rem}
.t-person{background:var(--navy-bg)}.t-person b{color:var(--heading)}
.t-ai{background:var(--teal-bg)}.t-ai b{color:var(--accent)}
.t-check{background:var(--amber-bg)}.t-check b{color:#b86e00}
.t-live{background:var(--green-bg)}.t-live b{color:#3a9c64}
@media (prefers-color-scheme:dark){.t-check b{color:#f0b14a}.t-live b{color:#6fcf97}}

/* the week */
.week{margin-top:2.5rem;border-radius:1rem;background:var(--card);border:1px solid var(--line);padding:1.5rem;box-shadow:var(--shadow)}
.week h3{font-size:1.25rem;margin-bottom:1rem}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.day{display:grid;gap:.4rem;text-align:center}
.dn{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.chip{min-height:2rem;border-radius:.45rem;display:flex;gap:.3rem;align-items:center;justify-content:center;font-size:.78rem;font-weight:600}
.chip.a{background:var(--teal-bg);color:var(--accent)}.chip.f{background:var(--navy-bg);color:var(--heading)}.chip.z{background:var(--wash);border:1px dashed var(--line)}
.chip .w{display:none}
@media (min-width:44rem){.chip .w{display:inline}}
.week .wn{margin-top:1rem;font-size:.92rem;color:var(--muted)}

/* tiles (what you get, you stay in control) */
.tiles{display:grid;gap:1.25rem;margin-top:2rem}
@media (min-width:44rem){.tiles{grid-template-columns:1fr 1fr}}
@media (min-width:68rem){.tiles.three{grid-template-columns:repeat(3,1fr)}}
.tile{border:1px solid var(--line);border-radius:1rem;padding:1.5rem;background:var(--card);box-shadow:var(--shadow);display:grid;grid-template-columns:3.25rem 1fr;gap:1.1rem;align-items:start}
.tile .ib{width:3.25rem;height:3.25rem;border-radius:.8rem;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#2c5286,var(--navy))}
.tile:nth-child(3n+2) .ib{background:linear-gradient(145deg,#2aa0a4,var(--teal))}
.tile:nth-child(3n) .ib{background:linear-gradient(145deg,#3a9c64,var(--green))}
.tile h3{font-size:1.2rem;line-height:1.25;margin-bottom:.35rem}
.tile p{color:var(--muted);font-size:1rem}

/* getting started */
.start{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.25rem;counter-reset:s}
@media (min-width:52rem){.start{grid-template-columns:repeat(3,1fr)}}
.start li{border-radius:1rem;background:var(--card);border:1px solid var(--line);padding:1.5rem;counter-increment:s;box-shadow:var(--shadow)}
.start li::before{content:counter(s);display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--teal);color:#fff;font-weight:600;margin-bottom:.9rem}
.start h3{font-size:1.2rem;margin-bottom:.35rem}
.start p{color:var(--muted)}

/* closing panel */
.closing{padding:clamp(3rem,8vw,5rem) 0}
.closing h2{font-size:clamp(1.9rem,4.5vw,2.6rem);line-height:1.15;margin-bottom:.75rem;max-width:40rem}
.closing p{font-size:clamp(1.05rem,2vw,1.2rem);color:#d6deea;max-width:38rem}
.closing .mail{display:inline-flex;align-items:center;gap:.5rem;color:#d6deea;margin-top:1.25rem;font-size:1rem}
.closing .mail svg{color:var(--mist)}

/* footer */
.foot{border-top:1px solid var(--line);padding:2rem 0 2.5rem;font-size:.92rem;color:var(--muted)}
.foot .wrap{display:grid;gap:.6rem}
@media (min-width:48rem){.foot .wrap{grid-template-columns:1fr auto;align-items:center}}
.foot nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.foot a{color:var(--muted)}

/* try it */
.tryform{display:grid;gap:1.4rem;max-width:44rem}
/* The hidden trap field (Robert, 2 Nov): off-screen, never display:none, so robots still fill it in. */
/* The Contact page's form (Robert, 2 Nov: option A) */
.cf-grid{display:grid;gap:2.5rem}
@media (min-width:60rem){.cf-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}}
.cf .row2{display:grid;gap:1.4rem}
@media (min-width:40rem){.cf .row2{grid-template-columns:1fr 1fr}}
.cf .req{color:var(--accent);font-weight:600;font-size:.85rem;margin-left:.35rem}
.cf .opt{color:var(--muted);font-weight:400;font-size:.85rem;margin-left:.35rem}
.cf input[type=email]{width:100%;font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:.6rem;padding:.75rem .9rem}
.prefill{display:flex;gap:.75rem;align-items:flex-start;background:var(--teal-bg);border-left:4px solid var(--teal);border-radius:.6rem;padding:.85rem 1rem;color:var(--ink)}
.prefill[hidden]{display:none}
.prefill svg{flex:none;color:var(--accent);margin-top:.15rem}
.prefill b{color:var(--heading)}
.ideas{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:-.6rem}
.idea{font:inherit;font-size:.9rem;border:1.5px solid var(--line);background:var(--card);color:var(--heading);border-radius:99rem;padding:.35rem .85rem;cursor:pointer}
.idea:hover,.idea:focus-visible{border-color:var(--accent)}
.sendnote{font-size:.9rem;color:var(--muted)}
.cf .status:empty{display:none}
.sendnote a,.aside .mail a{color:var(--accent)}
.aside{background:var(--wash);border-radius:1rem;padding:1.5rem}
.aside h2{font-size:1.3rem;margin-bottom:1rem}
.aside ol{margin:0;padding-left:1.2rem;display:grid;gap:.8rem}
.aside li b{display:block;color:var(--heading)}
.aside p{font-size:.95rem;color:var(--muted);margin:0}
.aside .mail{margin-top:1.25rem}
.cf-done{display:flex;gap:1rem;align-items:flex-start;background:var(--green-bg);border-radius:1rem;padding:1.5rem;max-width:44rem}
.cf-done[hidden]{display:none}
.cf-done svg{flex:none;color:var(--green)}
.cf-done h2{font-size:1.5rem;margin:0 0 .5rem}
/* Long-label buttons on phones (Robert, 2 Nov: "The call to action button needs a little work on mobile"): a full-width
   block with the words on the left and the arrow at the end, softer corners than a pill once it runs to two lines. Short
   buttons keep their pill. The thank-you box stacks its tick above the words so the button gets the box's full width. */
@media (max-width:43.99rem){
  .btn-wide{display:flex;width:100%;justify-content:space-between;text-align:left;border-radius:1rem;padding:.75rem 1.1rem;gap:.75rem}
  .btn-wide svg{flex:none}
  .cf-done{flex-direction:column;gap:.5rem;padding:1.25rem}
}
.cf .trap,.tryform .trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.field{display:grid;gap:.35rem;border:0;margin:0;padding:0;min-width:0}
.lbl{font-weight:600;color:var(--heading)}
.hint,.count,.note-small{font-size:.9rem;color:var(--muted)}
.count{justify-self:end}
.tryform textarea,.tryform input[type=text],.tryform input:not([type]){width:100%;font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:.6rem;padding:.7rem .85rem}
.tryform textarea:focus,.tryform input:focus{border-color:var(--accent);outline:none}
.radios{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.radios label{display:inline-flex;gap:.4rem;align-items:center;min-height:2.75rem}
.radios input{width:1.15rem;height:1.15rem;accent-color:var(--teal)}
.tryform .btns{margin-top:0}
.status{font-weight:600;color:var(--heading);min-height:1.5em;margin:0}
.status.busy{color:var(--accent)}
.status.alert{color:var(--ink);background:var(--amber-bg);border:1px solid var(--amber);border-left-width:5px;border-radius:.6rem;padding:.85rem 1rem}
.result{margin-top:3rem;border-top:1px solid var(--line);padding-top:2.5rem}
.sample-note{display:flex;gap:.75rem;align-items:flex-start;margin:1.25rem 0 1.75rem;padding:1rem 1.15rem;max-width:44rem;border:1px solid var(--line);border-radius:12px;background:var(--teal-bg)}
.sample-note svg{flex:none;margin-top:.15rem;color:var(--accent)}
.sample-note p{margin:0;font-size:.98rem;line-height:1.55}
.mock{--m-bg:#fff;--m-surface:#fff;--m-ink:#222;--m-muted:#666;--m-line:#ddd;--m-accent:#1f4fd1;--m-head:Georgia,serif;--m-text:system-ui,sans-serif;background:var(--m-bg);color:var(--m-ink);border:1px solid var(--line);border-radius:1rem;overflow:hidden;box-shadow:var(--shadow);font-family:var(--m-text)}
.mock-bar{display:flex;gap:.4rem;padding:.6rem .9rem;background:var(--m-surface);border-bottom:1px solid var(--m-line)}
.mock-bar i{width:.6rem;height:.6rem;border-radius:50%;background:var(--m-line)}
.mock-head{padding:1.4rem 1.5rem .6rem;display:grid;gap:.2rem}
.mock-head b{font-family:var(--m-head);font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.15;color:var(--m-ink)}
.mock-head span{color:var(--m-muted)}
.mock-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;padding:.4rem 1.5rem .9rem;border-bottom:1px solid var(--m-line);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--m-accent);font-weight:600}
.mock img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.mock-article{padding:1.2rem 1.5rem 1.6rem}
.mock-article h3{font-family:var(--m-head);color:var(--m-ink);font-size:1.45rem;line-height:1.2;margin:0 0 .6rem}
.mock-article p{color:var(--m-ink);opacity:.92}
.facts{display:grid;gap:.9rem;margin:1.75rem 0 0}
@media (min-width:52rem){.facts{grid-template-columns:repeat(3,1fr)}}
.facts div{border:1px solid var(--line);border-radius:.75rem;padding:.9rem 1rem;background:var(--card)}
.facts dt{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.3rem}
.facts dd{margin:0;font-size:.95rem;color:var(--muted)}
.swatches{display:flex;gap:.3rem;margin-bottom:.4rem}
.swatches i{width:1.6rem;height:1.6rem;border-radius:.35rem;border:1px solid var(--line)}
.result-cols{display:grid;gap:2rem;margin-top:2rem;align-items:start}
@media (min-width:52rem){.result-cols{grid-template-columns:1.2fr 1fr}}
.result-cols h3{font-size:1.2rem;margin-bottom:.8rem}
.topics{margin:0;padding-left:1.3rem;display:grid;gap:.5rem}
.result .fbpost{justify-self:start;margin:0}
.result .fbpost img{display:block;width:100%;height:auto}

/* 404 */
.lost{padding:clamp(4rem,12vw,8rem) 0;text-align:left}
.lost h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem}

@media (prefers-reduced-motion:no-preference){.btn{transition:background-color .15s}}

/* outline v2 (Robert, 1 Nov): hero with real pages, three-part overview, flowcharts, features, samples */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hx{display:grid;gap:2.5rem;align-items:center}
@media (min-width:64rem){.hx{grid-template-columns:1fr 1.05fr}}
.hero .hx h1{font-size:clamp(2.3rem,5.2vw,3.6rem)}
.hx-dev{position:relative;padding:0 1rem 2rem 0}
.hx-lap{border:clamp(6px,1vw,10px) solid #0b1626;border-radius:12px 12px 0 0;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.hx-lap img,.hx-ph img,.phs img{display:block;width:100%;height:auto}
.hx-base{height:12px;margin:0 -5%;border-radius:0 0 12px 12px;background:linear-gradient(#d5dbe3,#9aa5b3)}
.hx-ph{position:absolute;right:0;bottom:0;width:27%;border:clamp(4px,.8vw,7px) solid #0b1626;border-radius:clamp(12px,2vw,22px);overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.hx-ex{margin:.8rem 0 0;font-size:.8rem;color:#a9b8cc;letter-spacing:.02em}
.hx-ex b{color:#f0b14a;letter-spacing:.12em;text-transform:uppercase;margin-right:.45rem}
.section .hx-ex{color:var(--muted)}
.section .hx-ex b{color:var(--amber)}
.ov{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem;align-items:stretch}
@media (min-width:60rem){.ov{grid-template-columns:1fr auto 1fr auto 1fr}}
.ov>li:not(.oa){border-radius:1rem;padding:1.4rem;color:#fff;display:grid;gap:.5rem;align-content:start}
.ov p{margin:0;color:rgba(255,255,255,.9)}
.ov b{font-family:var(--serif);font-weight:600;font-size:1.3rem}
.ov .oi{display:block}
.ov .o1{background:linear-gradient(145deg,#2c5286,var(--navy))}
.ov .o2{background:linear-gradient(145deg,#2aa0a4,var(--teal))}
.ov .o3{background:linear-gradient(145deg,#3a9c64,var(--green))}
.ov .oa{display:grid;place-items:center;color:var(--mist)}
@media (max-width:59.99rem){.ov .oa{transform:rotate(90deg)}}
.t1{--tone:#2c5286}.t2{--tone:var(--teal)}.t3{--tone:var(--green)}
@media (prefers-color-scheme:dark){.t1{--tone:#8fb0da}.t2{--tone:#5cc3c7}.t3{--tone:#6fcf97}}
.fl{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.fl li:not(.fa){border-radius:.8rem;padding:.75rem 1rem;display:grid;gap:.15rem;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--tone);min-width:9rem;flex:1;align-self:stretch}
.fl .fn{font-size:.72rem;font-weight:600;letter-spacing:.1em;color:var(--tone)}
.fl b{color:var(--heading)}
.fl small{color:var(--muted);font-size:.85rem}
.fl .fa{color:var(--mist);flex:none}
@media (max-width:43.99rem){.fl{flex-direction:column;align-items:stretch}.fl .fa{align-self:center;transform:rotate(90deg)}}
.fts{display:grid;gap:1.25rem;margin-top:2rem}
@media (min-width:52rem){.fts{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}}
.ft{border:1px solid var(--line);border-radius:1rem;padding:1.3rem;background:var(--card)}
.ft h3{font-size:1.2rem;margin-bottom:.7rem}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ft li{display:grid;grid-template-columns:1.2rem 1fr;gap:.5rem;color:var(--muted)}
.ft li svg{color:var(--accent);margin-top:.3rem}
.ft li b{color:var(--heading)}
.ex-badge.solo{display:inline-block;margin:0 0 1rem;padding:.3rem .85rem;border-radius:99rem;background:var(--amber-bg);color:var(--amber);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
@media (prefers-color-scheme:dark){.ex-badge.solo{color:#f0b14a}}
.smp{display:grid;gap:1.75rem;margin-top:1rem;align-items:end}
@media (min-width:44rem){.smp{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.smp{grid-template-columns:1.7fr .6fr 1fr}}
.smp figure{margin:0}
.smp figcaption{text-align:center;font-size:.9rem;color:var(--muted);margin-top:.6rem}
.smp .lap{padding:0 4%}
.phs{border:8px solid #111821;border-radius:1.6rem;overflow:hidden;max-width:12rem;margin:0 auto}
.soon{border:2px dashed var(--line);border-radius:1rem;min-height:12rem;display:grid;place-content:center;justify-items:center;gap:.3rem;text-align:center;padding:1rem;color:var(--accent)}
.soon b{font-family:var(--serif);font-weight:600;color:var(--heading);font-size:1.1rem}
.soon small{color:var(--muted);font-size:.85rem}
.smp .fbpost{max-width:none}
.smp .fbpost .card img{display:block;width:100%;height:auto}
.eg-row{display:grid;gap:1.25rem;margin-top:1.75rem;align-items:start}
@media (min-width:52rem){.eg-row{grid-template-columns:1.1fr 1fr .7fr}}
.eg-row.one{grid-template-columns:minmax(0,40rem)}
.eg-row figure{margin:0;display:grid;gap:.5rem}
.eg-l{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
@media (prefers-color-scheme:dark){.eg-l{color:#f0b14a}}
.eg-topics{list-style:none;margin:0;padding:.9rem 1rem;display:grid;gap:.75rem;border:1px solid var(--line);border-radius:.8rem;background:var(--card)}
.eg-topics li{display:grid;gap:.15rem;font-weight:600;color:var(--heading);line-height:1.3}
.eg-topics i{font-style:normal;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.eg-draft{border:1px solid var(--line);border-radius:.8rem;background:var(--card);padding:.9rem 1rem;display:grid;gap:.4rem}
.eg-draft b{font-family:var(--serif);font-weight:600;color:var(--heading);font-size:1.1rem;line-height:1.25}
.eg-draft p{color:var(--muted);font-size:.95rem}
.eg-row .phs{margin:0}
.eg-row .fbpost{max-width:24rem}
.eg-lap{padding:0 4%}
.page-head .mail{display:inline-flex;align-items:center;gap:.5rem;color:#d6deea;margin-top:1.25rem}
.page-head .mail a{color:#fff}
.fbpost .card img{display:block;width:100%;height:auto}

/* Try it: one sketch at a time, staged progress (Robert, 1 Nov) */
.tryfields{border:0;margin:0;padding:0;min-width:0;display:grid;gap:1.4rem}
.tryfields:disabled{opacity:.55}
.tryfields:disabled textarea,.tryfields:disabled input{cursor:not-allowed}
.progress{border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:.8rem;background:var(--card);padding:1rem 1.2rem;display:grid;gap:.75rem;box-shadow:var(--shadow)}
.progress-top{display:flex;align-items:center;gap:.75rem}
.progress-top b{color:var(--heading);flex:1}
.elapsed{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem}
.spinner{width:1.4rem;height:1.4rem;border-radius:50%;border:3px solid var(--teal-bg);border-top-color:var(--teal);flex:none}
@media (prefers-reduced-motion:no-preference){.spinner{animation:spin .9s linear infinite}.bar i{transition:width .5s ease}}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:.5rem;border-radius:99rem;background:var(--wash);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),#2aa0a4);border-radius:99rem}
.stages{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.95rem;color:var(--muted)}
.stages li{display:flex;gap:.55rem;align-items:center}
.stages li::before{content:"";width:.85rem;height:.85rem;border-radius:50%;border:2px solid var(--line);flex:none}
.stages li.now{color:var(--heading);font-weight:600}
.stages li.now::before{border-color:var(--teal);background:var(--teal-bg)}
.stages li.done::before{border-color:var(--teal);background:var(--teal)}

/* the sketch, drawn as a home page in the Classic layout */
.mock.classic{--m-sunken:#eee}
.c-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1.4rem;border-bottom:1px solid var(--m-line);background:var(--m-surface)}
.c-logo{width:2rem;height:2rem;border-radius:.5rem;display:grid;place-items:center;background:var(--m-fill);color:var(--m-onfill);font-family:var(--m-head);font-weight:700}
.c-head b{font-family:var(--m-head);font-size:1.15rem;color:var(--m-ink)}
.c-nav{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;padding:.75rem 1.4rem;border-bottom:1px solid var(--m-line);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--m-ink);font-weight:600}
.c-hero{text-align:center;padding:2rem 1.4rem 1.8rem;border-bottom:1px solid var(--m-line);display:grid;gap:.6rem;justify-items:center}
.c-eye{margin:0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--m-muted);font-weight:600}
.c-h1{margin:0;font-family:var(--m-head);font-size:clamp(1.4rem,3.6vw,2.1rem);line-height:1.15;color:var(--m-ink);max-width:34rem}
.c-lede{margin:0;color:var(--m-muted);max-width:32rem;font-size:.95rem}
.c-btn{display:inline-block;margin-top:.3rem;padding:.45rem 1.1rem;border-radius:.4rem;background:var(--m-fill);color:var(--m-onfill);font-size:.85rem;font-weight:600}
.c-latest{padding:1.4rem}
.c-title{margin:0 0 .9rem;padding-bottom:.6rem;border-bottom:2px solid var(--m-line);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--m-muted);font-weight:600}
.c-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:36rem){.c-grid{grid-template-columns:1fr 1fr}}
@media (min-width:56rem){.c-grid{grid-template-columns:repeat(3,1fr)}}
.c-card{display:grid;gap:.35rem;align-content:start;border:1px solid var(--m-line);border-radius:.6rem;overflow:hidden;background:var(--m-surface);padding-bottom:.8rem}
.c-card img,.c-panel{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.c-panel{display:grid;place-items:center;background:var(--m-fill);color:var(--m-onfill);font-family:var(--m-head);font-size:1.05rem;padding:1rem;text-align:center}
.c-panel.alt{background:var(--m-sunken);color:var(--m-ink)}
.c-sec{padding:0 .8rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--m-accent);font-weight:600}
.c-t{padding:0 .8rem;font-family:var(--m-head);color:var(--m-ink);font-size:1rem;line-height:1.25}
.first{margin-top:2rem;border:1px solid var(--line);border-radius:1rem;padding:1.3rem;background:var(--card)}
.first h3{font-size:1.35rem;margin-bottom:.5rem}
.first p:last-child{color:var(--muted)}
.result-post{margin-top:2rem}
.result-post h3{font-size:1.2rem;margin-bottom:.8rem}
.result-post .fbpost{max-width:26rem;margin:0}
.av.logo{background:#fff;border:1px solid #dadde1;overflow:hidden}
.av.logo img{display:block;width:100%;height:100%;object-fit:contain}

/* the steps as a journey with real examples (Robert, 1 Nov: option A). On wide screens each row is a grid: every step
   spans four of its rows (subgrid), so dots, headings, subtitles and frames line up, and every frame in a row is the same
   size: landscape for part 1 (two rows of three), portrait for parts 2 and 3 (one row of four). */
.jy{list-style:none;margin:2rem 0 0;padding:0 0 0 3rem;display:grid;gap:2rem;position:relative}
.jy::before{content:"";position:absolute;left:1.05rem;top:1rem;bottom:1rem;border-left:3px solid var(--tone);opacity:.35}
.jy>li{position:relative;display:grid;align-content:start;min-width:0}
.jy .dot{position:absolute;left:-3rem;top:0;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--tone);color:#fff;display:grid;place-items:center;font-weight:600;z-index:1;box-shadow:0 0 0 5px var(--bg)}
.ly.wash .jy .dot{box-shadow:0 0 0 5px var(--wash)}
@media (prefers-color-scheme:dark){.jy .dot{color:#0e1621}}
.jy>li>b{color:var(--heading);font-size:1.05rem;line-height:1.35;padding-top:.3rem}
.jy>li>small{color:var(--muted);font-size:.92rem;line-height:1.4}
@media (min-width:60rem){
  .jy{padding:0;column-gap:1.25rem;row-gap:0;grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
  .jy::before{display:none}
  .jy.n6{--cols:3}.jy.n4{--cols:4}
  .jy>li{grid-row:span 4;grid-template-rows:subgrid}
  .jy.n6>li:nth-child(n+4){margin-top:2.25rem}
  .jy .dot{position:relative;left:auto;margin-bottom:.6rem}
  .jy>li>b{padding-top:0}
  .jy>li::after{content:"";position:absolute;left:2.6rem;right:-.85rem;top:1.05rem;border-top:3px solid var(--tone);opacity:.35}
  .jy>li:last-child::after,.jy.n6>li:nth-child(3)::after{display:none}
}
.jy .fr{container-type:inline-size;min-width:0}
.mx{position:relative;margin-top:.75rem;width:100%;border:1px solid var(--line);border-radius:.6rem;background:#fff;color:#1c2430;font-size:clamp(9px,5cqi,14px);line-height:1.4;overflow:hidden}
.jy.n6 .mx{font-size:clamp(8px,3.55cqi,13px)}
.jy.n6 .mx{aspect-ratio:16/10;max-width:26rem}
.jy.n4 .mx{aspect-ratio:3/4;max-width:19rem}
@media (min-width:60rem){.jy .mx{max-width:none}}
.mx small{color:#5b6673}
.mx img{display:block}
.mx.scr img{width:100%;height:100%;object-fit:cover;object-position:left top}
.mx.lays{margin-left:0;margin-right:0;margin-bottom:0;padding:.562em;background:#f3f5f8;display:grid;grid-template-rows:auto 1fr;gap:.437em}
.mx.lays .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.375em}
.mx.lays img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:.25em;border:1px solid #d9dee5}
.mx.lays img.on{outline:2.5px solid #1b7f83;outline-offset:1px}
.mx.lays figcaption{align-self:end;font-size:.925em;color:#5b6673}
.mx.launch{display:grid;grid-template-rows:minmax(0,1fr) auto}
.mx.launch img{width:100%;height:100%;object-fit:cover;object-position:left top}
.mx.launch p{margin:0;display:flex;flex-wrap:wrap;gap:.375em;align-items:center;padding:.5em .75em;border-top:1px solid #d9dee5;background:#f3f5f8;font-size:.925em}
.mx.launch b{position:absolute;left:.625em;top:.625em;background:#1b7f83;color:#fff;border-radius:99rem;padding:.125em .75em;font-size:.875em;letter-spacing:.06em;text-transform:uppercase}
.mx.launch span{color:#5b6673}
.mx.launch i{font-style:normal;border:1px solid #d9dee5;background:#fff;border-radius:99rem;padding:0 .562em;color:#1f3a5f}
.mx.tl{list-style:none;margin-left:0;margin-right:0;margin-bottom:0;padding:.75em;display:grid;gap:.625em;align-content:start;background:#f3f5f8}
.mx.tl li{display:grid;gap:.187em;padding:.688em .75em;border:1px solid #d9dee5;border-radius:.562em;background:#fff;font-weight:600;color:#1f3a5f;line-height:1.3}
.mx.tl li i{font-style:normal;font-size:.775em;letter-spacing:.08em;text-transform:uppercase;color:#1b7f83;font-weight:600}
.mx.tl li.on{border:2px solid #1b7f83;background:#e3f3f3}
.mx.tl li em{justify-self:start;font-style:normal;font-size:.825em;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#1b7f83;border-radius:99rem;padding:.0625em .625em;margin-top:.187em}
.mx.dr{padding:.875em .938em;display:flex;flex-direction:column;gap:.375em}
.mx.dr>i{align-self:flex-start;font-style:normal;font-size:.775em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9a5b00;background:#fbf1dc;border-radius:99rem;padding:.0625em .625em}
.mx.dr b{font-family:var(--serif);font-weight:600;color:#1f3a5f;font-size:1.22em;line-height:1.25}
.mx.dr>p{margin:.25em 0 0;font-size:.775em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#1b7f83}
.mx.dr ol{margin:0;padding-left:1.38em;display:grid;gap:.125em;font-size:.95em;color:#1c2430}
.mx.dr.post p{margin:0;font-size:1.05em;line-height:1.5;letter-spacing:0;text-transform:none;font-weight:400;color:#1c1e21}
.mx.ok{padding:.75em .875em;display:grid;gap:.625em;align-content:start;background:#e3f3f3;border-color:#bfe0e0}
.mx.ok ul{list-style:none;margin:0;padding:0;display:grid;gap:.5em}
.mx.ok li{display:grid;grid-template-columns:1.25em 1fr;gap:.437em;color:#1c2430;font-size:.975em;line-height:1.35}
.mx.ok li svg{color:#1b7f83;margin-top:.187em}
.mx.ok li b{color:#1f3a5f}
.mx.ok p{margin:0;padding-top:.562em;border-top:1px solid #bfe0e0;color:#1c2430;font-size:.95em;font-weight:600}
.mx.phn{background:#eef1f5}
.mx.phn .bezel{position:absolute;top:.875em;bottom:.875em;left:50%;transform:translateX(-50%);aspect-ratio:1/2;border:6px solid #111821;border-radius:1.38em;overflow:hidden;background:#111821}
.mx.phn .bezel img{width:100%;height:100%;object-fit:cover;object-position:top}
.mx.fb{display:flex;flex-direction:column;color:#1c1e21;border-color:#dadde1}
.mx.fb .who{display:flex;gap:.625em;align-items:center;padding:.812em .875em .625em}
.mx.fb .av{width:2.62em;height:2.62em;border-radius:50%;overflow:hidden;flex:none;border:1px solid #dadde1}
.mx.fb .av img{width:100%;height:100%;object-fit:contain}
.mx.fb .who b{display:block;font-size:1.06em}
.mx.fb .who small{color:#65676b;font-size:.9em}
.mx.fb>img{width:100%;flex:1;min-height:0;object-fit:cover}
.mx.fb .link{margin:0;padding:.688em .875em;background:#f0f2f5;font-weight:600;font-size:1.02em;line-height:1.3}

/* Inside ImprintHQ: real admin screens, one frame for all */
/* Two switches above the Example badge (Robert, 1 Nov): which gallery, and light or dark; they stack on a phone. */
.inside-bar{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
#shots>.inside-group:first-child .inside-set,#shots>.inside-group:not([hidden]) .inside-set{margin-top:0}
.inside-group[hidden]{display:none}
.modes{display:inline-flex;border:1.5px solid var(--line);border-radius:99rem;padding:.2rem;background:var(--card)}
.modes button{font:inherit;font-weight:600;border:0;background:none;color:var(--muted);padding:.45rem 1.1rem;border-radius:99rem;cursor:pointer;min-height:2.5rem}
.modes button[aria-pressed=true]{background:var(--navy);color:#fff}
/* Robert (1 Nov): more room between the screens, and room for each caption. */
.inside-shots{list-style:none;margin:0;padding:0;display:grid;gap:3rem 2.5rem}
@media (min-width:44rem){.inside-shots{grid-template-columns:1fr 1fr}}
@media (min-width:72rem){.inside-shots{grid-template-columns:repeat(3,1fr)}}
.inside-shot{display:grid;gap:.45rem;align-content:start}
.inside-set{font-size:clamp(1.5rem,3.4vw,2rem);margin:3rem 0 .4rem}
.inside-set+.lead{margin-bottom:1.75rem;font-size:1.05rem}
.inside-shot .frame{position:relative;display:block;border:1px solid var(--line);border-radius:.8rem;overflow:hidden;background:#fff;box-shadow:0 10px 26px rgba(18,37,64,.14);margin-bottom:.4rem;cursor:zoom-in}
.inside-shot .frame:hover{box-shadow:0 14px 34px rgba(18,37,64,.24)}
.inside-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.inside-shot .zoom{position:absolute;right:.6rem;bottom:.6rem;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:rgba(18,37,64,.78);color:#fff}
.inside-shot>b{color:var(--heading);font-family:var(--serif);font-weight:600;font-size:1.15rem}
.inside-shot>span{color:var(--muted);font-size:.95rem}
/* The gallery: one large screen, its caption, Previous and Next, "3 of 18". */
.viewer{border:0;padding:0;margin:auto;width:min(96vw,1500px);max-height:96vh;background:#0e1621;color:#e8ecf0;border-radius:1rem;overflow:hidden;display:none}
.viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.viewer::backdrop{background:rgba(6,12,20,.82)}
.viewer[data-mode=light]{background:#f3f5f8;color:#1c2430}
.v-top{display:flex;justify-content:space-between;align-items:center;padding:.6rem .9rem;font-size:.9rem;font-variant-numeric:tabular-nums}
.viewer button{font:inherit;font-weight:600;color:inherit;background:none;border:1.5px solid currentColor;border-radius:99rem;min-height:2.6rem;padding:.4rem 1rem;display:inline-flex;gap:.4rem;align-items:center;cursor:pointer;opacity:.9}
.viewer button:hover{opacity:1}
#v-close{border:0;padding:.4rem}
/* A tall screen scrolls inside the gallery at full width, so its detail stays readable. */
.v-scroll{overflow:auto;min-height:0;overscroll-behavior:contain}
#v-img{display:block;width:100%;height:auto}
.v-foot{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:.8rem .9rem}
.v-foot p{margin:0;display:grid;gap:.1rem;text-align:center}
.v-foot b{font-family:var(--serif);font-size:1.1rem}
.v-foot span{font-size:.9rem;opacity:.8}
@media (max-width:40rem){.v-foot{grid-template-columns:1fr 1fr}.v-foot p{grid-column:1/-1;grid-row:1}}
/* What ImprintHQ is, and isn't (Robert, 1 Nov) */
.fit{display:grid;gap:1.5rem;margin-top:2rem}
@media (min-width:52rem){.fit{grid-template-columns:1.15fr 1fr}}
.fit-col{border:1px solid var(--line);border-radius:1rem;padding:1.5rem;background:var(--card)}
.fit-col.does{border-top:5px solid var(--teal)}
.fit-col.isnt{border-top:5px solid var(--mist);background:var(--wash)}
.fit-col h3{font-size:1.3rem;margin-bottom:.8rem}
.fit-col>p{color:var(--muted);margin-bottom:.8rem}
.fit-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fit-col li{display:grid;grid-template-columns:1.3rem 1fr;gap:.55rem;color:var(--ink)}
.fit-col li svg{margin-top:.25rem;color:var(--accent)}
.fit-col.isnt li svg{color:var(--muted)}
.fit-col li.soon-item{color:var(--muted)}
.fit-col li.soon-item svg{color:var(--amber)}
.fit-col em{font-style:normal;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);background:var(--amber-bg);border-radius:99rem;padding:.1rem .55rem;margin-right:.3rem}
@media (prefers-color-scheme:dark){.fit-col em{color:#f0b14a}.fit-col li.soon-item svg{color:#f0b14a}}
.fit-short{max-width:48rem;margin-bottom:2rem;padding:1rem 1.2rem;border-left:4px solid var(--teal);background:var(--card);border-radius:.6rem;color:var(--ink)}
.fit-short a{color:var(--accent);font-weight:600}

/* Pricing (Robert, 1 Nov: plan B, US dollars) */
.pr-steps{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1.25rem}
@media (min-width:52rem){.pr-steps{grid-template-columns:repeat(3,1fr)}}
.pr-steps li{border:1px solid var(--line);border-radius:1rem;background:var(--card);padding:1.3rem;display:grid;gap:.4rem;align-content:start}
.pr-steps .dot{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:600}
.pr-steps b{font-family:var(--serif);font-size:1.2rem;color:var(--heading)}
.pr-steps p{color:var(--muted)}
.plans{display:grid;gap:1.25rem;margin-top:1.5rem}
/* Side by side, each card's name, price, allowance, line, list and AI fees share rows, so the cards line up. */
@media (min-width:52rem){.plans{grid-template-columns:repeat(3,1fr);row-gap:0}.plan{grid-row:span 6;grid-template-rows:subgrid;row-gap:.6rem}}
.plan{border:1px solid var(--line);border-radius:1rem;background:var(--card);padding:1.5rem;box-shadow:var(--shadow);display:grid;gap:.6rem;align-content:start}
.plan:nth-child(2){border:2px solid var(--teal)}
.plan h3{font-size:1.4rem}
.price{color:var(--muted)}
.price b{font-family:var(--serif);font-size:2.2rem;color:var(--heading);font-weight:600}
/* Each plan's monthly allowance, straight under its price and the same height on every card. */
.pallow{display:grid;gap:.1rem;align-content:start;padding:.55rem .7rem;border-radius:.6rem;background:var(--wash)}
.pallow b{color:var(--heading);font-size:1.02rem}
.pallow span{color:var(--muted);font-size:.88rem}
.plead{color:var(--muted);font-size:.95rem}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;align-content:start}
.plan li{display:grid;grid-template-columns:1.2rem 1fr;gap:.5rem}
.plan li svg{color:var(--accent);margin-top:.3rem}
.plan .pai{margin-top:.6rem;padding-top:.7rem;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink)}
.plan .pai span{display:block;color:var(--muted);font-size:.85rem}
.every{margin-top:1.5rem;color:var(--heading);font-weight:600;max-width:48rem}
.extras{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem;max-width:48rem;color:var(--muted)}
.extras b{color:var(--heading)}
.faq{margin:1.5rem 0 0;display:grid;gap:1rem;max-width:48rem}
.faq div{border-bottom:1px solid var(--line);padding-bottom:1rem}
.faq dt{font-weight:600;color:var(--heading);margin-bottom:.3rem}
.faq dd{margin:0;color:var(--muted)}

.sw-f7f6f1{background:#f7f6f1}
.sw-141b2d{background:#141b2d}
.sw-1e3a8a{background:#1e3a8a}
.sw-dac26a{background:#dac26a}