/* ═══════════════════════════════════════════════════════════════
   APEX PRINT & DIGITAL SERVICES
   Design system: "print craft"

   Visual language borrowed from the trade — crop marks, registration
   targets, CMYK bars, halftone screens, paper stock and dockets.
   Brand colours and the logo come from the shop's own poster.
   ═══════════════════════════════════════════════════════════════ */

/* Fonts are shipped with the site (75 KB, latin subset) rather than pulled from
   Google, so the site looks identical offline and on slow village data. */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("inter-var-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:500 800;
  font-display:swap;
  src:url("jakarta-var-latin.woff2") format("woff2");
}

:root{
  /* ── brand ── */
  --navy:#0b2a38;
  --navy-2:#0d3446;
  --teal:#14556b;
  --blue:#1f7fb5;
  --blue-soft:#e7f1f8;
  --orange:#f2802a;
  --orange-dark:#d96a15;
  --orange-soft:#fff2e6;
  --wa:#1fa855;
  --wa-dark:#178a45;

  /* ── process inks (accents only) ── */
  --ink-c:#00a9ce;
  --ink-m:#e5007d;
  --ink-y:#ffce00;
  --ink-k:#12303d;

  /* ── surfaces ── */
  --paper:#ffffff;
  --bg:#eaf0f4;
  --tint:#dfe8ee;
  --ink:#0a1e27;
  --body:#445d69;
  --muted:#758d9a;
  --line:#d7e2e9;
  --line-2:#bccdd8;
  --rule:#9db2be;

  /* ── type ──
     One professional sans across the whole site. `--mono` is kept as a name for
     the small tracked-out label style; it is NOT a monospace face any more. */
  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display:"Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:var(--font);

  /* ── geometry ── */
  --r-sm:9px;
  --r:13px;
  --r-lg:18px;
  --r-xl:24px;

  --sh-1:0 1px 2px rgba(11,42,56,.05), 0 3px 10px rgba(11,42,56,.05);
  --sh-2:0 5px 16px rgba(11,42,56,.09), 0 16px 40px rgba(11,42,56,.09);
  --sh-3:0 26px 70px rgba(11,42,56,.24);

  --wrap:1200px;
  --header-h:86px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

/* The `hidden` attribute must always win. Without this, any class that sets a
   `display` (.modal, .totals, .btn …) overrides the browser default and the
   element stays on screen no matter what the JS does. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.8;                  /* generous: the copy should never feel cramped */
  color:var(--body);
  background-color:var(--bg);
  /* soft tinted washes so no screen is ever a flat white sheet */
  background-image:
    radial-gradient(900px 600px at 88% -4%, rgba(31,127,181,.10), transparent 62%),
    radial-gradient(760px 520px at -6% 30%, rgba(242,128,42,.07), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.28;
}
/* capped so "One place to send" fits the hero column on one line at 1440px */
h1{font-size:clamp(2.4rem,4.6vw,3.5rem);letter-spacing:-.03em;line-height:1.16}
h2{font-size:clamp(1.85rem,3.5vw,2.7rem);letter-spacing:-.026em;line-height:1.22}
h3{font-size:1.2rem;letter-spacing:-.015em;line-height:1.4}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--blue);text-decoration:none}
/* height:auto is essential — the width/height attributes on <img> would
   otherwise force a fixed height and distort the image once width is fluid */
img{max-width:100%;height:auto;display:block}
button{font:inherit}
:focus-visible{outline:2.5px solid var(--orange);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:26px}
.wrap--narrow{max-width:860px}
.muted{color:var(--muted);font-weight:500}
.req{color:var(--orange)}
.ico{width:1.1em;height:1.1em;flex:none}

.skip-link{position:absolute;left:-9999px;top:8px;z-index:300;background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px}
.skip-link:focus{left:16px}

/* ═══════ PRINT-CRAFT PRIMITIVES ═══════════════════════════════ */
.crop-frame{
  position:absolute;inset:-10px;pointer-events:none;z-index:2;
  --c:var(--rule);--len:15px;
  opacity:.5;transition:opacity .35s var(--ease);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/1px var(--len) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/var(--len) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/1px var(--len) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--len) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/1px var(--len) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--len) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--len) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--len) 1px no-repeat;
}

.cmyk-bar{display:flex;gap:3px;margin:24px 0}
.hero__copy .cmyk-bar{justify-content:center}
.cmyk-bar i{display:block;width:36px;height:8px;border-radius:1px}
.cmyk-bar i:nth-child(1){background:var(--ink-c)}
.cmyk-bar i:nth-child(2){background:var(--ink-m)}
.cmyk-bar i:nth-child(3){background:var(--ink-y)}
.cmyk-bar i:nth-child(4){background:var(--ink-k)}
.cmyk-bar--sm i{width:24px;height:6px}

.mono-label{
  font-family:var(--font);font-size:.8rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.6;
}

.tag{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font);font-size:.76rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--teal);
  margin-bottom:22px;line-height:1.6;
}
/* The hero is still a dark field, even though no section is any more. */
.tag--onDark{color:#9fd0e8}
.tag--onDark .tag__idx{background:var(--orange);color:#fff}

.tag__idx{
  display:grid;place-items:center;min-width:30px;height:26px;padding:0 8px;
  background:var(--navy);color:#fff;border-radius:5px;font-size:.72rem;
  font-weight:700;letter-spacing:.06em;
}
.reg{width:16px;height:16px;flex:none}

.hero__deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.halftone{
  position:absolute;inset:-30%;
  background-image:radial-gradient(#ffffff 1px, transparent 1.4px);
  background-size:13px 13px;opacity:.055;transform:rotate(15deg);
}
.hexes{position:absolute;inset:0;width:100%;height:100%;color:#7fd0ee;opacity:.16}
.hero__deco--soft .halftone{opacity:.04}

.sheet{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.sheet::before,.sheet::after{
  content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--line);
  background:var(--paper);z-index:-1;
}
.sheet::before{transform:translate(6px,6px);opacity:.55}
.sheet::after{transform:translate(12px,12px);opacity:.28}

/* ═══════ LOGO ═════════════════════════════════════════════════ */
.brand__badge{
  display:grid;place-items:center;width:52px;height:52px;flex:none;
  background:var(--paper);border-radius:13px;padding:6px;
  box-shadow:0 2px 10px rgba(0,0,0,.16);
  transition:transform .25s var(--ease);
}
.brand:hover .brand__badge{transform:rotate(-4deg) scale(1.04)}
.brand__badge img{width:100%;height:100%;object-fit:contain}
.brand__badge--lg{width:62px;height:62px;border-radius:15px}

/* ═══════ BUTTONS ══════════════════════════════════════════════ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.8em 1.4em;border-radius:9px;border:1.5px solid transparent;
  font-weight:700;font-size:1rem;letter-spacing:-.01em;cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn--lg{padding:1.02em 1.8em;font-size:1.06rem}
.btn--block{width:100%}

.btn--primary{background:var(--orange);color:#fff;box-shadow:0 4px 0 var(--orange-dark)}
.btn--primary:hover{background:#f78c3c;box-shadow:0 6px 0 var(--orange-dark),0 12px 26px rgba(242,128,42,.32)}
.btn--primary:active{box-shadow:0 2px 0 var(--orange-dark)}

.btn--dark{background:var(--navy);color:#fff;box-shadow:0 4px 0 #061c26}
.btn--dark:hover{background:var(--teal);box-shadow:0 6px 0 #061c26,0 12px 26px rgba(11,42,56,.26)}
.btn--dark:active{box-shadow:0 2px 0 #061c26}

.btn--wa{background:var(--wa);color:#fff;box-shadow:0 4px 0 var(--wa-dark)}
.btn--wa:hover{background:#25b95f;box-shadow:0 6px 0 var(--wa-dark),0 12px 26px rgba(31,168,85,.3)}
.btn--wa:active{box-shadow:0 2px 0 var(--wa-dark)}
/* Second WhatsApp action (send the files). Same family as the primary green
   button, drawn as an outline so the two never compete for the tap. */
.btn--wa-alt{background:var(--paper);color:var(--wa-dark);border-color:var(--wa);box-shadow:0 4px 0 rgba(31,168,85,.22)}
.btn--wa-alt:hover{background:#f1fbf5;box-shadow:0 6px 0 rgba(31,168,85,.28)}
.btn--wa-alt:active{box-shadow:0 2px 0 rgba(31,168,85,.22)}
.btn--wa-alt[disabled]{opacity:.55;pointer-events:none}

.btn--outline{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.38)}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.12)}

.btn--quiet{background:var(--paper);color:var(--navy);border-color:var(--line-2)}
.btn--quiet:hover{border-color:var(--navy)}

.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover{transform:none}

/* 44px, not 40: these are the close and cancel buttons, and every one of them
   lives in a state — the review window, the configure panel, the legal sheet —
   that the test runner measures with closed, so nothing was catching them. The
   icon inside stays 19px; only the thumb area grows. */
.icon-btn{
  width:44px;height:44px;display:grid;place-items:center;border-radius:9px;
  background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer;flex:none;
  transition:all .15s ease;
}
.icon-btn:hover{background:var(--bg);color:var(--ink);border-color:var(--line)}
.icon-btn .ico{width:19px;height:19px}
.link{color:var(--blue);font-weight:700;border-bottom:1.5px solid transparent;transition:border-color .15s ease}
.link:hover{border-bottom-color:var(--blue)}

/* ═══════ HEADER ═══════════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:100;
  --hd-fg:#ffffff;--hd-sub:#a9d3e6;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* White on transparent is correct over the dark hero and INVISIBLE anywhere
   else, which is exactly what six pages exposed: only the home page has that
   hero, so every other page was drawing a white nav on a white background.
   The solid treatment is now the default and the transparent one is the
   exception the home page opts into. */
body:not(.has-dark-hero) .site-header,
.site-header.is-stuck{
  --hd-fg:var(--navy);--hd-sub:var(--orange-dark);
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(170%) blur(14px);
  -webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 2px 22px rgba(11,42,56,.07);
}
body:not(.has-dark-hero) .site-header .brand__badge,
.site-header.is-stuck .brand__badge{box-shadow:0 2px 10px rgba(11,42,56,.12);border:1px solid var(--line)}
.header__inner{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:16px;flex:0 1 auto;min-width:0}
.brand__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.brand__text strong{
  font-family:var(--display);font-size:1.16rem;font-weight:800;letter-spacing:-.015em;
  line-height:1.2;color:var(--hd-fg);transition:color .3s ease;
}
.brand__text span{
  font-size:.72rem;font-weight:600;letter-spacing:.17em;line-height:1.3;
  text-transform:uppercase;color:var(--hd-sub);transition:color .3s ease;
}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav>a{
  position:relative;padding:10px 15px;border-radius:8px;color:var(--hd-fg);opacity:.85;
  font-weight:500;font-size:.95rem;transition:opacity .15s ease, background .15s ease;
}
.nav>a:hover{opacity:1;background:rgba(127,160,175,.16)}
.nav>a.is-active{opacity:1}
.nav>a.is-active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2.5px;
  background:var(--orange);border-radius:2px;
}
.nav__cta{margin-left:12px;color:#fff;opacity:1;font-size:.97rem}
.nav__cta:hover{color:#fff;opacity:1}

.nav-toggle{display:none;flex:none;width:48px;height:48px;border:1.5px solid var(--line-2);border-radius:11px;background:var(--paper);cursor:pointer;padding:0;margin-left:auto}
.nav-toggle span{display:block;width:20px;height:2.2px;background:var(--navy);margin:4.5px auto;border-radius:2px;transition:transform .24s var(--ease), opacity .18s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}

/* ═══════ HERO ═════════════════════════════════════════════════ */
.hero{
  position:relative;margin-top:calc(var(--header-h) * -1);
  padding:calc(var(--header-h) + clamp(56px,7vw,96px)) 0 clamp(66px,8vw,108px);
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(31,127,181,.3), transparent 60%),
    radial-gradient(700px 460px at 8% 92%, rgba(242,128,42,.17), transparent 62%),
    linear-gradient(165deg,var(--navy) 0%,#08222e 62%,#0c3143 100%);
  color:#c3dbe6;overflow:hidden;
}
/* Phones and small tablets keep the single centred column. */
.hero__inner{position:relative;z-index:1;max-width:720px;margin-inline:auto;text-align:center}
.hero__rig{display:none}

/* ── The drawn hero ──
   Below 1000px there is no room for a graphic beside the words, so it is not
   rendered at all. From 1000px up the hero becomes two columns and the copy
   ranges left, which is what stops a wide screen looking like a stretched
   phone with empty corners. */
@media (min-width:1000px){
  .hero__inner{
    /* Back to the page's own container, NOT `none` — the hero carries .wrap,
       and overriding it to none let the headline run to the screen edge while
       the header logo stayed on the grid. They must share one left edge. */
    max-width:var(--wrap);text-align:left;
    display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    align-items:center;gap:clamp(28px,3.5vw,68px);
  }
  .hero .lead{margin-inline:0}
  .hero .cmyk-bar{margin-inline:0}
  .hero__actions{justify-content:flex-start}
  .hero__rig{display:block}
}

.rig{position:relative;width:100%;max-width:560px;margin-inline:auto}
.rig__svg{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 30px 46px rgba(2,14,20,.45));
  overflow:visible;
}
/* The sheet lifts clear of the machine, and the finished stack settles. Both
   are slow enough to read as depth rather than as motion. */
.rig__sheet{animation:rigFeed 5.4s var(--ease) infinite}
.rig__stack{animation:rigSettle 5.4s var(--ease) infinite}
@keyframes rigFeed{
  0%,100%{transform:translateY(6px)}
  50%    {transform:translateY(-10px)}
}
@keyframes rigSettle{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-3px)}
}

/* Two facts from the poster, floated over the scene for depth. */
.rig__chip{
  position:absolute;display:flex;flex-direction:column;gap:1px;
  padding:13px 17px;border-radius:14px;
  background:rgba(10,34,46,.72);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  box-shadow:0 16px 34px rgba(2,14,20,.42);
}
.rig__chip b{
  font-family:var(--display);font-size:1.5rem;font-weight:800;color:#fff;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
}
.rig__chip span{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8cb4c8;
}
.rig__chip--a{left:-2%;top:14%;animation:rigBob 6.4s var(--ease) infinite}
.rig__chip--b{right:-1%;bottom:15%;animation:rigBob 6.4s var(--ease) .9s infinite}
.rig__chip--b b{color:var(--orange)}
@keyframes rigBob{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}

@media (prefers-reduced-motion:reduce){
  .rig__sheet,.rig__stack,.rig__chip{animation:none}
}
.hero h1{color:#fff}
.hero h1 em{
  font-style:normal;color:var(--orange);
  text-decoration:underline;text-decoration-thickness:.065em;text-underline-offset:.12em;
  text-decoration-color:rgba(242,128,42,.35);
}
.lead{font-size:clamp(1.08rem,1.4vw,1.2rem);line-height:1.8;max-width:50ch;color:#b6d2df;margin-top:6px;margin-inline:auto}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;justify-content:center}

.hero__trust{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero__trust li{
  display:flex;flex-direction:column;gap:2px;align-items:center;padding:22px 16px 0;
  border-right:1px solid rgba(255,255,255,.14);text-align:center;
}
.hero__trust li:last-child{border-right:none}
.hero__trust b{font-family:var(--display);font-size:1.95rem;font-weight:800;color:#fff;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.hero__trust span{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:#8cb4c8;margin-top:9px;line-height:1.5}

  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--navy);border-radius:var(--r);padding:19px 22px;
}

/* ═══════ FIELDS ═══════════════════════════════════════════════ */
.field{display:block;border:0;padding:0;margin:0;min-width:0}
.field__label{display:block;font-size:.88rem;font-weight:600;color:var(--teal);margin-bottom:10px;line-height:1.5}
.input{
  width:100%;min-width:0;padding:15px 16px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);font:inherit;font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:hover{border-color:var(--rule)}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3.5px rgba(31,127,181,.15)}
.input.is-invalid{border-color:#d4462f;box-shadow:0 0 0 3.5px rgba(212,70,47,.12)}
select.input{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445d69' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
textarea.input{resize:vertical;min-height:88px}
.error{display:block;font-size:.84rem;color:#c03d27;font-weight:600;margin-top:6px}

.check{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:.98rem;font-weight:600;color:var(--ink)}
.check input{width:20px;height:20px;accent-color:var(--orange);cursor:pointer;flex:none}
.check--card{
  align-items:flex-start;padding:17px 19px;border:1.5px solid var(--line-2);border-radius:var(--r);
  background:var(--paper);transition:border-color .15s ease, background .15s ease;
}
.check--card:hover{border-color:var(--orange)}
.check--card:has(input:checked){border-color:var(--orange);background:var(--orange-soft)}
.check__body{display:flex;flex-direction:column;gap:3px}
.check__body small{font-weight:500;color:var(--body);font-size:.89rem;line-height:1.5}

/* ── Pick one: student/teacher, pick-up/delivery ──
   A row of cards rather than a select, so every option and what it costs is
   readable without opening anything. The first option is pre-selected, so a
   customer who is none of these still touches nothing. */
.optset{border:0;padding:0;margin:0;min-width:0}
.optset legend{padding:0;margin-bottom:9px}
/* auto-fit, not repeat(3,1fr): a fixed column count cannot shrink below the
   width of what is inside it, so on a 430px phone the third card pushed the
   whole page sideways. This wraps instead, at every width. */
.optset__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:9px}
.optset__opts--2{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
.opt{
  display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  padding:13px 14px;border:1.5px solid var(--line-2);border-radius:var(--r);
  background:var(--paper);transition:border-color .15s ease, background .15s ease;
}
.opt:hover{border-color:var(--orange)}
.opt input{width:18px;height:18px;accent-color:var(--orange);cursor:pointer;flex:none;margin-top:1px}
.opt:has(input:checked){border-color:var(--orange);background:var(--orange-soft)}
.opt__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.opt__body b{font-size:.97rem;font-weight:700;color:var(--ink)}
.opt__body small{font-weight:500;color:var(--body);font-size:.84rem;line-height:1.45}


/* ═══════ SECTIONS ═════════════════════════════════════════════ */
.section{position:relative;padding:clamp(72px,9vw,120px) 0}
/* a whisper-fine dot screen over every light section, so nothing reads as
   blank white paper */
.section::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(11,42,56,.14) 1px, transparent 1.2px);
  background-size:22px 22px;opacity:.32;
}
.section>.wrap{position:relative;z-index:1}
.section--tint{
  background:
    linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0) 42%),
    linear-gradient(155deg,var(--tint) 0%,#e8f0f5 55%,var(--tint) 100%);
  border-block:1px solid var(--line-2);
}
.section__head{max-width:700px;margin-bottom:clamp(40px,5vw,60px)}
.section__sub{margin-top:18px;font-size:1.1rem;max-width:56ch;line-height:1.75}
/* Every page's leading heading is its h1 now. It keeps the section-heading
   size on purpose: the promotion is about meaning (this is what the page is
   about), not about making it louder than it was. */
.section__head h1{font-size:clamp(1.85rem,3.5vw,2.7rem);letter-spacing:-.026em;line-height:1.22}
/* Item headings are h2 for structure — page heading, then its items — but they
   are not section headings and must not take the section heading's size or its
   tighter tracking. They keep exactly the metrics they had as h3. */
.svc h2,.poster__text h2,.step h2,.docket__title,.disc h2,.flow h2{
  letter-spacing:-.015em;line-height:1.4;
}

/* ═══════ SERVICE CARDS ════════════════════════════════════════ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(292px,100%),1fr));gap:20px}
.svc{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px 26px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:10px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s ease;
  overflow:hidden;
}
.svc::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3.5px;
  background:var(--accent,var(--blue));transform:scaleX(.18);transform-origin:left;
  transition:transform .3s var(--ease);
}
.svc:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.svc:hover::before{transform:scaleX(1)}
.svc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:3px}
.svc__ico{
  width:52px;height:52px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--accent-soft,var(--blue-soft));color:var(--accent,var(--blue));
  transition:transform .25s var(--ease);
}
.svc:hover .svc__ico{transform:rotate(-5deg) scale(1.06)}
.svc__ico svg{width:26px;height:26px}
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:var(--orange);color:#fff;padding:6px 11px;border-radius:5px;line-height:1.2;
}
.svc h2{font-size:1.24rem}
.svc__sub{font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.svc__desc{font-size:.97rem;line-height:1.7;flex:1;margin-top:4px}
.svc__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:20px;border-top:1px dashed var(--line-2);margin-top:12px}
.svc__price{display:flex;align-items:baseline;gap:7px}
.svc__price b{font-family:var(--display);font-size:1.9rem;color:var(--navy);letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.svc__price span{font-size:.8rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.svc__add{
  display:inline-block;text-decoration:none;
  border:1.5px solid var(--line-2);background:var(--paper);color:var(--navy);font-weight:700;font-size:.92rem;
  padding:9px 17px;border-radius:8px;cursor:pointer;transition:all .16s ease;
}
.svc__add:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-1px)}

/* ═══════ POSTER SHOWCASE ══════════════════════════════════════ */
.poster{
  margin-top:clamp(40px,5vw,64px);
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(30px,5vw,64px);align-items:center;
}
.poster__art{position:relative;perspective:1400px;max-width:400px;justify-self:center}
.poster__art img{
  width:100%;border-radius:var(--r);border:1px solid var(--line-2);
  box-shadow:var(--sh-2);
  transform:rotateY(-7deg) rotateX(2deg) rotate(-1.4deg);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.poster__art:hover img{transform:rotateY(0deg) rotateX(0deg) rotate(0deg) scale(1.02);box-shadow:var(--sh-3)}
.poster__art:hover .crop-frame{opacity:1;--c:var(--orange)}
.poster__text h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em}
.poster__text>p{margin-top:14px;font-size:1.05rem}
.poster__list{display:grid;gap:9px;margin:24px 0 26px}
.poster__list li{
  display:flex;align-items:baseline;gap:13px;font-size:1rem;
  padding-bottom:9px;border-bottom:1px dashed var(--line-2);
}
.poster__list b{
  font-size:1.35rem;color:var(--navy);letter-spacing:-.03em;min-width:76px;
  font-variant-numeric:tabular-nums;
}

/* ═══════ BUILDER ══════════════════════════════════════════════ */
.builder{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(340px,.95fr);gap:32px;align-items:start}
.builder__main{display:grid;gap:30px;min-width:0}

.step{padding:32px}
.step__head{display:flex;gap:18px;margin-bottom:28px}
.step__head>div{min-width:0}
.step h2,.step__head p{overflow-wrap:break-word}
.step__num{
  width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-weight:800;font-size:1.08rem;font-variant-numeric:tabular-nums;
}
.step h2{font-size:1.28rem}
.step__head p{font-size:.97rem;margin-top:7px;line-height:1.7}

.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:13px}
.pick__txt{min-width:0;overflow-wrap:break-word}
.pick{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;min-width:0;
  padding:15px 16px;border:1.5px solid var(--line-2);border-radius:11px;background:var(--paper);cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s var(--ease);
}
.pick:hover{border-color:var(--blue);transform:translateY(-2px)}
.pick.is-active{border-color:var(--orange);background:var(--orange-soft);box-shadow:0 0 0 3px rgba(242,128,42,.15)}
.pick__ico{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--accent-soft,var(--blue-soft));color:var(--accent,var(--blue))}
.pick__ico svg{width:20px;height:20px}
.pick__txt{display:flex;flex-direction:column;min-width:0}
.pick__txt strong{font-size:.98rem;color:var(--ink);font-weight:700;line-height:1.4}
/* The picker is the control the whole site turns on: this is where someone
   chooses Letter over Legal and sees what it costs. Nothing in it is
   decoration, so nothing in it is allowed to be caption-sized. */
.pick__txt small{font-size:.82rem;color:var(--muted);line-height:1.6}
.pick__price{color:var(--teal);font-weight:600}
.pick.is-active .pick__price{color:var(--orange-dark)}

.config{
  margin-top:22px;border:1.5px solid var(--orange);background:var(--orange-soft);
  border-radius:var(--r);padding:22px;animation:pop .24s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.config__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:19px}
.config__top .mono-label{color:var(--orange-dark)}
.config__top h3{font-size:1.22rem;margin-top:6px}
.config__price{font-size:.88rem;color:var(--body);margin-top:5px}
.config__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:20px}
.config .input{background:var(--paper)}

.stepper{display:flex;align-items:center;background:var(--paper);border:1.5px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;max-width:196px}
.stepper__btn{width:48px;height:50px;border:none;background:var(--paper);color:var(--navy);font-size:1.45rem;font-weight:700;cursor:pointer;line-height:1;transition:background .14s ease}
.stepper__btn:hover{background:var(--bg)}
.stepper__input{
  width:100%;min-width:0;border:none;text-align:center;font:inherit;font-weight:800;font-size:1.08rem;color:var(--ink);
  border-inline:1.5px solid var(--line-2);height:50px;-moz-appearance:textfield;font-variant-numeric:tabular-nums;
}
.stepper__input:focus{outline:none;background:var(--blue-soft)}
.stepper__input::-webkit-outer-spin-button,.stepper__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
/* The quantity chips and the till's Full / Deposit pair. `min-height` rather
   than more padding, so the box reaches a thumb's 44px without the chips
   growing wider — the row of four still fits a 320px phone. */
.chip{
  border:1.5px solid var(--line-2);background:var(--paper);border-radius:7px;padding:7px 16px;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.86rem;font-weight:600;color:var(--teal);cursor:pointer;transition:all .15s ease;
}
.chip:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.config__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:13px;padding-top:17px;border-top:1px dashed rgba(242,128,42,.45);margin-top:7px}
.config__sum{display:flex;align-items:baseline;gap:11px}
.config__in{
  display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600;
  color:var(--wa-dark);line-height:1.5;
}
.config__in .ico{width:19px;height:19px;flex:none}
.config__sum strong{font-size:1.65rem;color:var(--navy);letter-spacing:-.04em;font-variant-numeric:tabular-nums}

.drop{
  border:2px dashed var(--line-2);border-radius:var(--r);background:var(--bg);
  padding:34px 20px;text-align:center;cursor:pointer;transition:all .18s ease;
}
.drop:hover,.drop.is-over{border-color:var(--blue);background:var(--blue-soft)}
.drop.is-over{transform:scale(1.01)}
.drop__ico{width:40px;height:40px;color:var(--blue);margin:0 auto 12px}
.drop__title{font-weight:700;color:var(--ink);font-size:1.05rem}
.drop__title span{color:var(--blue);text-decoration:underline}
.drop__hint{font-size:.82rem;color:var(--muted);margin-top:9px;letter-spacing:.09em;text-transform:uppercase}
.files__note{
  margin-top:11px;font-size:.86rem;font-weight:600;line-height:1.5;color:var(--teal);
  padding:9px 12px;border-radius:9px;background:var(--blue-soft);border:1px solid var(--line)
}
.files__note.is-bad{color:#c03d27;background:#fdeeeb;border-color:#f3cfc7}
.files__tally{margin-top:10px;font-family:var(--mono);font-size:.78rem;color:var(--muted);letter-spacing:.05em}
/* Step two: how the file actually travels. Three plain rows, not a control —
   the site cannot take the file, so it explains instead of pretending. */
.howfile{display:grid;gap:16px;margin-top:6px}
.howfile__row{
  display:flex;gap:14px;align-items:flex-start;min-width:0;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
}
.howfile__ico{
  width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);
}
.howfile__ico svg{width:21px;height:21px}
.howfile__ico--wa{background:#e2f6ea;color:var(--wa)}
.howfile__ico--paper{background:var(--orange-soft);color:var(--orange-dark)}
.howfile__row>div{min-width:0}
.howfile__row h3{font-size:1.02rem;font-weight:800;color:var(--ink);margin-bottom:5px}
.howfile__row p{font-size:.95rem;line-height:1.75;color:var(--body);overflow-wrap:break-word}
.howfile__tip{
  margin-top:15px;padding:14px 17px;border-radius:var(--r-sm);
  background:var(--orange-soft);color:var(--ink);font-size:.93rem;line-height:1.7;
}

.files{margin-top:13px;display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.files li{display:flex;align-items:center;gap:12px;min-width:0;padding:11px 14px;background:var(--bg);border:1px solid var(--line);border-radius:10px;animation:pop .2s var(--ease)}
.files__ico{
  width:36px;height:36px;border-radius:7px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none;
  font-family:var(--mono);font-size:.63rem;font-weight:700;
}
.files__meta{min-width:0;flex:1}
.files__meta strong{display:block;font-size:.95rem;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files__meta small{font-family:var(--mono);font-size:.76rem;color:var(--muted)}

.form{display:grid;gap:26px}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* ═══════ DOCKET ═══════════════════════════════════════════════ */
.builder__side{position:sticky;top:calc(var(--header-h) + 22px)}
.docket{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px;box-shadow:var(--sh-2);
}
.docket__head{padding-bottom:17px;border-bottom:2.5px solid var(--ink)}
.docket__title{font-size:1.35rem;margin-top:5px}
.summary__items{display:grid;gap:11px;margin:18px 0;max-height:min(42vh,420px);overflow-y:auto}
.summary__empty{text-align:center;padding:28px 8px;color:var(--muted)}
.summary__empty svg{width:36px;height:36px;margin:0 auto 12px;color:var(--line-2)}
.summary__empty p{font-size:.95rem;line-height:1.55}

.sitem{display:flex;gap:12px;align-items:flex-start;padding:13px;background:var(--bg);border:1px solid var(--line);border-radius:10px;animation:pop .22s var(--ease)}
.sitem__body{flex:1;min-width:0}
.sitem__name{font-size:.97rem;font-weight:700;color:var(--ink);line-height:1.45}
.sitem__meta{font-size:.84rem;color:var(--muted);margin-top:5px;line-height:1.6}
.sitem__price{font-family:var(--display);font-weight:700;color:var(--navy);font-size:1.02rem;white-space:nowrap;font-variant-numeric:tabular-nums}
/* This was a 23px box — the smallest target on the site, and the one that
   takes a line back off the order. It only exists once something is IN the
   order, which is why a green test run never saw it. 44px square now; the
   trash icon is left at 17px so the docket does not get heavier looking.
   The row is ~46px tall already, so nothing grows. */
.sitem__del{
  border:none;background:transparent;color:var(--muted);cursor:pointer;
  width:44px;height:44px;display:grid;place-items:center;flex:none;
  /* The box is 44px to a thumb but only costs the row 33px of width: the last
     11px lean into .sitem's own 13px of right padding, which is empty anyway.
     Without this the service name loses 21px and wraps a line earlier on a
     narrow phone, for no reason. */
  margin-right:-11px;
  line-height:0;border-radius:5px;transition:color .14s ease;
}
.sitem__del:hover{color:#c03d27}
.sitem__del svg{width:17px;height:17px}

.perf{position:relative;border-top:2px dashed var(--line-2);margin:22px -30px 20px}
.perf::before,.perf::after{
  content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;
  background:var(--tint);border:1px solid var(--line);
}
.perf::before{left:-12px}
.perf::after{right:-12px}

.totals{display:grid;gap:11px}
.totals__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:1rem}
.totals__row dt{color:var(--body);font-weight:600}
.totals__row dd{margin:0;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.totals__row--save dt,.totals__row--save dd{color:var(--wa)}
.totals__row--dep dt,.totals__row--dep dd{color:var(--orange-dark);font-weight:800}
.totals__row--dep{padding-top:12px;border-top:1px dashed var(--line-2);margin-top:4px}
.totals__row--rest dt,.totals__row--rest dd{color:var(--muted);font-weight:600;font-size:.95rem}
.totals__row--grand{padding-top:13px;border-top:1px solid var(--line);margin-top:5px;align-items:center}
.totals__row--grand dt{font-size:1.08rem;font-weight:800;color:var(--ink)}
.totals__row--grand dd{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--navy);letter-spacing:-.04em}

.nudge{
  display:flex;gap:9px;background:var(--blue-soft);border-left:3.5px solid var(--blue);
  color:var(--teal);font-size:.89rem;font-weight:600;padding:12px 14px;border-radius:0 8px 8px 0;
  margin:17px 0 0;line-height:1.5;
}
.docket .btn{margin-top:15px}
.docket__fine{font-size:.82rem;color:var(--muted);text-align:center;margin-top:4px;line-height:1.55}
.docket .cmyk-bar{margin:22px 0 13px;justify-content:center}

@keyframes flash{0%{color:var(--orange)}100%{color:inherit}}
.is-counting{animation:flash .5s ease}

/* ═══════ HOW IT WORKS + PHONE ═════════════════════════════════ */
/* One column since the mockup moved to the home page — the same picture was
   telling the same story on two pages. The steps get the full measure, and a
   cap keeps the lines readable rather than stretched across a desktop. */
.how{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,64px);align-items:center}
.how .section__head{margin-bottom:34px}
@media (max-width:900px){
  .how{grid-template-columns:1fr;gap:44px}
}

.flow{display:grid;gap:10px;list-style:none}
.flow li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--sh-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.flow li:hover{transform:translateX(4px);box-shadow:var(--sh-2)}
.flow__n{
  font-size:.82rem;font-weight:700;color:var(--orange-dark);letter-spacing:.14em;
  padding-top:3px;font-variant-numeric:tabular-nums;
}
.flow h3{color:var(--navy);font-size:1.1rem;letter-spacing:-.015em;line-height:1.4;margin-bottom:6px}
.flow p{font-size:.96rem;color:var(--muted);line-height:1.72}

.phone-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.phone{
  width:min(340px,100%);border-radius:42px;padding:11px;
  background:linear-gradient(160deg,#2b3f4a,#16252e 40%,#2b3f4a);
  box-shadow:0 40px 80px rgba(0,0,0,.45), 0 0 0 1.5px rgba(255,255,255,.1),
             inset 0 0 0 1.5px rgba(255,255,255,.06);
  position:relative;transform:rotate(-1.5deg);
  transition:transform .5s var(--ease);
}
.phone:hover{transform:rotate(0deg) translateY(-6px)}
.phone__notch{
  position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:104px;height:22px;background:#16252e;border-radius:0 0 14px 14px;z-index:3;
}
.phone__screen{
  border-radius:32px;overflow:hidden;background:#e9e0d8;
  /* Tall enough for the whole example to be readable from its first line.
     The thread still pins to the bottom, but on the home page this picture IS
     the argument — an order that starts mid-sentence makes it badly. */
  display:flex;flex-direction:column;height:700px;
}
.chat__top{
  display:flex;align-items:center;gap:11px;padding:30px 14px 11px;
  background:#075e54;color:#fff;flex:none;
}
.chat__back{font-size:1.5rem;line-height:1;opacity:.9}
.chat__avatar{width:36px;height:36px;border-radius:50%;background:#fff;padding:3px;flex:none;display:grid;place-items:center}
.chat__avatar img{width:100%;height:100%;object-fit:contain}
.chat__who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.chat__who strong{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat__who small{font-size:.72rem;opacity:.82}
.chat__body{
  /* flex-end keeps the newest messages pinned above the input bar, like a real
     thread — older content scrolls off the top instead of being clipped below */
  flex:1;min-height:0;overflow:hidden;padding:12px 11px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:9px;
  background-color:#e5ddd5;
  background-image:radial-gradient(rgba(11,42,56,.045) 1px, transparent 1.1px);
  background-size:16px 16px;
}
/* fades the top of the clipped thread so it reads as "scrolled up", not cut off */
.chat__body::before{
  content:"";position:absolute;left:0;right:0;top:0;height:34px;z-index:2;pointer-events:none;
  background:linear-gradient(#e5ddd5,rgba(229,221,213,0));
}
.chat__body{position:relative}
.chat__day{
  align-self:center;background:#fff;color:#54656f;font-size:.63rem;font-weight:600;
  letter-spacing:.09em;padding:4px 11px;border-radius:7px;box-shadow:0 1px 1px rgba(0,0,0,.08);
}
.bubble{
  position:relative;max-width:93%;padding:8px 10px 21px;border-radius:9px;
  font-size:.7rem;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.13);
  overflow-wrap:anywhere;flex:none;
}
.bubble--in{align-self:flex-start;background:#fff;color:#111b21;border-top-left-radius:2px}
.bubble--out{align-self:flex-end;background:#d9fdd3;color:#111b21;border-top-right-radius:2px;font-size:.76rem}
.bubble--file{align-self:flex-start;background:#fff;border-top-left-radius:9px;padding:9px 10px 21px}
.bubble__t{margin:0 0 6px;font-size:.7rem;line-height:1.55;word-break:break-word}
.bubble__t:last-of-type{margin-bottom:0}
.bubble__t--dim{color:#667781}
.bubble__t--total{color:#075e54;font-size:.72rem}
.bubble__ind{display:inline-block;padding-left:12px;color:#3b4a54}
.bubble__meta{
  position:absolute;right:9px;bottom:5px;font-size:.6rem;color:#667781;
  display:flex;align-items:center;gap:3px;
}
.ticks{width:15px;height:10px;color:#53bdeb}
.bubble__file{display:flex;align-items:center;gap:10px}
.bubble__file svg{width:26px;height:26px;color:#f2802a;flex:none}
.bubble__file span{display:flex;flex-direction:column;min-width:0}
.bubble__file strong{font-size:.73rem;color:#111b21;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bubble__file small{font-size:.63rem;color:#667781;font-family:var(--mono)}
.chat__bar{
  display:flex;align-items:center;gap:8px;padding:8px 10px 14px;background:#f0f2f5;flex:none;
}
.chat__input{
  flex:1;background:#fff;border-radius:18px;padding:8px 14px;font-size:.72rem;color:#8696a0;
}
.chat__send{
  width:32px;height:32px;border-radius:50%;background:#00a884;display:grid;place-items:center;flex:none;
}
.chat__send svg{width:16px;height:16px;color:#fff}
.phone__cap{font-size:.88rem;color:var(--muted);text-align:center;line-height:1.6;max-width:44ch}
.phone__cap .mono-label{display:block;margin-bottom:6px}
.phone__cap .mono-label{color:var(--orange-dark)}

/* ═══════ DISCOUNTS ════════════════════════════════════════════ */
.disc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px}
.disc{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:36px 32px;box-shadow:var(--sh-1);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.disc:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.disc:hover .crop-frame{opacity:1;--c:var(--orange)}
.disc__badge{width:54px;height:54px;border-radius:13px;display:grid;place-items:center;background:var(--navy);color:#fff;margin-bottom:20px}
.disc__badge svg{width:27px;height:27px}
.disc--edu .disc__badge{background:var(--orange)}
.disc--bulk .disc__badge{background:var(--wa)}
.disc h2{margin-top:7px;font-size:1.26rem}
.disc p{font-size:.97rem;line-height:1.75}
/* NB: must out-specify `.disc p` above — both target the same <p> element */
.disc .disc__value{
  font-family:var(--display);
  font-size:3.1rem;font-weight:800;color:var(--navy);letter-spacing:-.04em;
  margin:12px 0 16px;line-height:1;font-variant-numeric:tabular-nums;
}
.disc .disc__value small{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--muted);margin-left:3px}
/* a word carries more visual weight than a numeral at the same size */
.disc--quote .disc__value,
.disc .disc__value--word{font-size:2.4rem}
.disc--teach .disc__badge{background:var(--blue)}
/* The threshold sits directly under the figure — a rate with no minimum next
   to it is the half-truth that gets argued about at the counter. */
.disc__min{
  font-weight:700;font-size:.87rem;letter-spacing:.02em;color:var(--orange-dark);
  margin-top:-2px;margin-bottom:9px;
}
.disc--bulk .disc__min{color:var(--wa-dark)}
.disc--teach .disc__min{color:var(--blue)}
.disc__foot{
  margin-top:26px;text-align:center;color:var(--body);font-size:.97rem;
}
.tiers{display:grid;gap:8px;margin-top:2px}
.tiers li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;background:var(--bg);border-radius:9px;border:1px solid var(--line);
}
.tiers span{font-size:.88rem;color:var(--body)}
.tiers b{color:var(--wa);font-weight:800;font-variant-numeric:tabular-nums;font-size:1rem}
.disc .link{display:inline-block;margin-top:18px;font-size:1rem}

/* ═══════ FAQ ══════════════════════════════════════════════════ */
.faq{display:grid;gap:0;border-top:1px solid var(--line-2)}
.faq__item{border-bottom:1px solid var(--line-2)}
.faq__item summary{
  cursor:pointer;list-style:none;padding:26px 54px 26px 0;font-weight:700;color:var(--ink);
  font-family:var(--display);font-size:1.12rem;position:relative;letter-spacing:-.015em;
  line-height:1.5;transition:color .15s ease;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--blue)}
.faq__item summary::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2.2px solid var(--muted);border-bottom:2.2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .24s var(--ease)}
.faq__item[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
/* A phone number inside a sentence cannot take vertical padding — it would
   shove the lines above and below apart. An overlay instead: the hit area
   grows to a thumb's worth without the text moving a pixel. */
.faq__body a{position:relative}
.faq__body a::after{
  content:"";position:absolute;left:-6px;right:-6px;top:-13px;bottom:-13px;
}

.faq__body{padding:0 44px 28px 0;font-size:1.01rem;line-height:1.8;animation:pop .22s var(--ease)}

/* ═══════ CONTACT ══════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px}
.contact-card{
  position:relative;display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:36px 32px;box-shadow:var(--sh-1);color:var(--body);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s ease;
}
a.contact-card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--line-2)}
a.contact-card:hover .crop-frame{opacity:1;--c:var(--orange)}
.contact-card__ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);margin-bottom:18px}
.contact-card__ico--wa{background:#e2f6ea;color:var(--wa)}
.contact-card__ico svg{width:26px;height:26px}
.contact-card h3{font-size:1.2rem;margin-top:8px}
.contact-card__value{font-size:1.1rem;font-weight:600;color:var(--ink);margin-top:11px;line-height:1.6;overflow-wrap:anywhere;letter-spacing:-.01em}
.contact-card__go{display:inline-block;margin-top:20px;font-size:.95rem;font-weight:600;color:var(--blue)}
.contact-card__go--static{color:var(--muted)}

/* ── Opening hours ── */
.hours{display:grid;gap:7px;margin-top:13px;list-style:none;padding:0}
.hours li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px dashed var(--line);
}
.hours li:last-child{border-bottom:0}
.hours span{font-size:.92rem;color:var(--body)}
.hours b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hours__off span,.hours__off b{color:var(--muted);font-weight:600}

/* The open/closed line. Computed in the shop's own timezone, so a phone set
   to anywhere else still reads the shop's clock and not its own. */
.open-pill{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  padding:7px 13px;border-radius:999px;font-size:.87rem;font-weight:700;
  background:var(--tint);color:var(--body);
}
.open-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.open-pill.is-open{background:#e2f6ea;color:var(--wa-dark)}
.open-pill.is-open::before{background:var(--wa)}
.open-pill.is-shut{background:var(--tint);color:var(--body)}
.open-pill--docket{margin-top:14px;width:100%;justify-content:center}

/* ═══════ SHOP TILL ════════════════════════════════════════════
   Only ever on screen for the owner, at /#shop. Deliberately plainer than
   the rest of the site — it is a working tool, not a shopfront. */
.till{
  margin:0 clamp(20px,4vw,34px) 4px;padding:18px 20px;
  border:1.5px dashed var(--line-2);border-radius:var(--r);background:var(--bg);
}
.till .optset__opts{margin-top:10px}
.till__amount{margin-top:14px}
.till__amount .chips{margin-top:8px}
.till__amount .chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.till__taking{margin-top:9px;font-weight:700;font-size:.92rem;color:var(--teal);font-variant-numeric:tabular-nums}
.till__cash{margin-top:12px}
.till__change{
  margin-top:8px;font-weight:700;color:var(--wa-dark);font-variant-numeric:tabular-nums;
}
#tillSaveBtn{margin-top:14px}
/* Shown once the sale is banked — the receipt is still on the sheet below. */
.till__done{margin-top:9px;text-align:center;font-weight:700;font-size:.9rem;color:var(--wa-dark)}

/* Visible to a screen reader, not on screen. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.shop__lock{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,44px);text-align:center;box-shadow:var(--sh-1);
  max-width:520px;margin-inline:auto;
}
.shop__lockIco{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:var(--navy);color:#fff;margin:0 auto 18px;
}
.shop__lockIco svg{width:27px;height:27px}
.shop__lock h3{font-size:1.3rem;margin-bottom:8px}
.shop__lock>p{color:var(--body);line-height:1.75}
.shop__lockRow{
  display:flex;gap:10px;justify-content:center;align-items:flex-end;
  margin-top:22px;flex-wrap:wrap;
}
.shop__lockRow .field{width:min(190px,100%)}
.shop__code{
  text-align:center;font-size:1.5rem;letter-spacing:.5em;text-indent:.5em;
  font-variant-numeric:tabular-nums;
}
.shop__lockRow .btn{min-height:52px}
.shop__lock .error{margin-top:12px}
.shop__lockFine{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.87rem;color:var(--muted);line-height:1.7;text-align:left;
}

.shop__paste{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,30px);margin-bottom:26px;box-shadow:var(--sh-1);
}
.shop__pasteHow{color:var(--body);line-height:1.75;margin:6px 0 16px;font-size:.97rem}
.shop__paste textarea{font-size:.94rem;line-height:1.6}
.shop__pasteRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.shop__pasteOk{
  margin-top:14px;padding:13px 16px;border-radius:var(--r-sm);
  background:#e4f7ec;color:var(--wa-dark);font-weight:600;font-size:.94rem;line-height:1.65;
}
.shop__pasteOk b{color:var(--orange-dark)}

.shop__stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:14px;margin-bottom:26px;
}
.shop__stats div{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;display:flex;flex-direction:column;gap:3px;
}
.shop__stats b{font-size:1.7rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.shop__stats span{font-size:.85rem;color:var(--muted);font-weight:600}
#shopOwedWrap b{color:var(--orange-dark)}

.shop__empty{
  background:var(--paper);border:1px dashed var(--line-2);border-radius:var(--r);
  padding:26px 22px;text-align:center;color:var(--body);
}
/* Wide on purpose — it scrolls inside itself rather than pushing the page. */
.shop__table{
  overflow-x:auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);
}
.shop__table table{border-collapse:collapse;width:100%;font-size:.92rem}
.shop__table th,.shop__table td{
  padding:11px 14px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line);
}
.shop__table th{
  background:var(--navy);color:#fff;font-size:.74rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.shop__table tr:last-child td{border-bottom:0}
.shop__table .rc-n{text-align:right;font-variant-numeric:tabular-nums}
.shop__owed{color:var(--orange-dark);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}

.shop__actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px}
#shopClearBtn.is-armed{background:#c03d27;color:#fff}
.shop__fine{margin-top:20px;font-size:.9rem;color:var(--muted);line-height:1.7}

/* ═══════ FOOTER ═══════════════════════════════════════════════ */
.footer{position:relative;background:var(--navy);color:#a8c7d7;padding:60px 0 26px;overflow:hidden}
.footer .wrap{position:relative;z-index:1}
.footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:44px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.14)}
.footer__brand{max-width:36ch}
.footer__logo{
  width:100%;max-width:250px;height:auto;
  background:#fff;padding:14px 18px;border-radius:var(--r);box-shadow:var(--sh-1);
}
.footer__brand p{font-size:.95rem;margin-top:18px;line-height:1.75}
.footer__brand .cmyk-bar{margin:20px 0 0}
.footer__nav,.footer__contact{display:grid;gap:4px;align-content:start;font-size:.96rem}
.footer__nav a,.footer__contact a,.footer__contact span{
  display:flex;align-items:center;min-height:44px;padding:4px 0;
}
.footer__nav .mono-label,.footer__contact .mono-label{color:#7fa4b8;margin-bottom:4px}
.footer__nav a,.footer__contact a{color:#a8c7d7;transition:color .15s ease}
.footer__nav a:hover,.footer__contact a:hover{color:var(--orange)}
.footer__bar{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  padding-top:28px;font-size:.82rem;color:#7fa4b8;letter-spacing:.02em;
}
.footer__bar p{margin:0}

/* The legal links. Buttons rather than links, because they open a dialog on
   this page rather than going anywhere — and a thumb still gets 44px. */
.footer__legal{display:flex;flex-wrap:wrap;gap:4px 18px}
.footer__legal button{
  display:inline-flex;align-items:center;min-height:44px;padding:0;
  background:none;border:0;cursor:pointer;
  font:inherit;color:#a8c7d7;letter-spacing:.02em;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(168,199,215,.4);
}
.footer__legal button:hover{color:#fff;text-decoration-color:currentColor}
.footer__by a{
  color:#a8c7d7;font-weight:700;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px;
}
.footer__by a:hover{color:var(--orange)}

/* ═══════ TERMS, PRIVACY & CREDITS ═════════════════════════════
   A native <dialog>: the browser gives us the backdrop, Escape, and returning
   focus to whatever opened it, none of which is worth rewriting by hand. */
.legal{
  /* Positioned by us, not by the user agent's modal styling. A browser that
     cannot put this in the top layer still gets a centred overlay instead of a
     block dumped under the footer, and a browser that does not know <dialog>
     at all does not print the terms onto the page. */
  position:fixed;inset:0;z-index:300;margin:auto;
  width:min(760px,100%);max-width:100%;
  max-height:min(86vh,900px);
  /* dvh is the viewport you can actually SEE on a phone — vh is measured with
     the address bar hidden, so on a real handset the panel could run off the
     bottom of the screen. The vh line above stays as the fallback. */
  max-height:min(86dvh,900px);
  padding:0;border:0;border-radius:var(--r-xl);background:var(--paper);color:var(--ink);
  box-shadow:var(--sh-3);overflow:hidden;
}
.legal:not([open]){display:none}
.legal::backdrop{background:rgba(7,26,35,.68);backdrop-filter:blur(4px)}
.legal[open]{display:flex;flex-direction:column;animation:rise .28s var(--ease)}
/* Only where the browser could not give us a real ::backdrop — otherwise this
   would darken the page twice. */
html.no-dialog .legal[open]{box-shadow:var(--sh-3),0 0 0 100vmax rgba(7,26,35,.72)}
.legal__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;
  padding:22px clamp(18px,4vw,30px) 16px;border-bottom:1px solid var(--line);
}
.legal__head h2{font-size:clamp(1.2rem,2.6vw,1.5rem);letter-spacing:-.02em;line-height:1.25}
.legal__tabs{
  display:flex;gap:4px;flex:none;padding:12px clamp(14px,4vw,26px) 0;
  border-bottom:1px solid var(--line);overflow-x:auto;
}
.legal__tab{
  flex:none;background:none;border:0;cursor:pointer;font:inherit;font-size:.92rem;font-weight:600;
  color:var(--muted);padding:10px 14px;border-radius:8px 8px 0 0;min-height:44px;
  border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.legal__tab:hover{color:var(--navy);background:var(--tint)}
.legal__tab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--orange)}
.legal__body{
  flex:1;min-height:0;overflow-y:auto;
  padding:clamp(20px,4vw,30px) clamp(18px,4vw,30px) clamp(28px,5vw,38px);
  -webkit-overflow-scrolling:touch;
}
.legal__doc:focus{outline:none}
.legal__doc h3{
  font-size:1.06rem;letter-spacing:-.01em;line-height:1.4;color:var(--navy);
  margin:26px 0 8px;
}
.legal__doc h3:first-of-type{margin-top:0}
.legal__doc p{font-size:.98rem;line-height:1.8;color:var(--ink);margin-bottom:12px}
/* Links in the prose, but NOT the two buttons in the credits — they kept
   their own colours and picked up blue underlined text on top. */
.legal__doc a:not(.btn){color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* The phone number and the email address sit mid-sentence here, and a line of
   prose is only 19px tall — too thin to tap on a phone. Vertical padding
   cancelled by an equal negative margin grows the thumb area to 44px without
   moving a single line: padding on an inline box does not change the line
   height. Only these prose links; the credits buttons are already big. */
.legal__doc a:not(.btn){padding-block:12px;margin-block:-12px}
.legal__doc a:not(.btn):hover{color:var(--orange-dark)}
.legal__meta{
  font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px;
}
.legal__dev{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 10px}
/* The number in plain text under the button, for anyone who wants to save it
   rather than tap it. */
.legal__num{
  font-family:var(--display);font-size:1.18rem;color:var(--navy);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-bottom:16px;
}

@media (max-width:560px){
  .legal{
    width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;margin:0 auto auto;
    max-height:92vh;max-height:92dvh;
  }
  .footer__bar{gap:10px 18px}
}
/* On the smallest phone still in real use the three tab labels come to more
   than the dialog is wide. The strip scrolls, so nothing is unreachable — but
   a tab half off the edge with no hint that it moves reads as a broken dialog,
   and Credits is the tab that pays for the site. Tightened until all three fit
   a 320px screen. */
@media (max-width:380px){
  .legal__tabs{gap:2px;padding-inline:10px}
  .legal__tab{padding:10px 8px;font-size:.84rem}
}

/* A row of links, not a row of buttons. */
.peek__links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px}
.peek__links a{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  color:var(--blue);font-weight:700;font-size:.98rem;text-decoration:none;
}
.peek__links a svg{width:17px;height:17px;transition:transform .18s var(--ease)}
.peek__links a:hover{color:var(--orange-dark)}
.peek__links a:hover svg{transform:translateX(4px)}

/* ═══════ MOBILE BAR ═══════════════════════════════════════════ */
/* Shown ONLY on the order page, once there is something in the order — so it
   is a body class rather than a width, and the page reserves room at the foot
   only when the bar is really there. It used to sit on every page repeating
   "Start an order", which is a strip of a phone's screen spent on a choice the
   page had already offered. */
.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;gap:11px;
  padding:11px 15px calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line-2);
  box-shadow:0 -6px 24px rgba(11,42,56,.08);
}
body.has-bar .mobile-bar:not([hidden]){display:flex}
body.has-bar{padding-bottom:84px}
.mobile-bar__main{flex:1;white-space:nowrap;text-align:center}

/* ═══════ NO SIGNAL ════════════════════════════════════════════
   A line, not a takeover: everything on the page still works offline except
   the trip to WhatsApp at the very end, so it says that and nothing more. */
.offline-note{
  position:fixed;left:0;right:0;bottom:0;z-index:96;margin:0;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--navy);color:#cfe0ea;font-size:.88rem;line-height:1.5;text-align:center;
}
body.is-offline{padding-bottom:66px}
/* Above the bar when there is one, at the foot of the screen when there is not. */
body.is-offline.has-bar{padding-bottom:150px}
body.is-offline.has-bar .offline-note{bottom:76px}

/* ═══════ MODAL ════════════════════════════════════════════════ */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px}
.modal__backdrop{position:absolute;inset:0;background:rgba(7,26,35,.68);backdrop-filter:blur(4px);animation:fade .22s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal__panel{
  position:relative;width:min(670px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  animation:rise .3s var(--ease);
}
@keyframes rise{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.modal__panel .crop-frame{--c:rgba(255,255,255,.4);opacity:.8}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:26px 26px 19px;border-bottom:2.5px solid var(--ink)}
.modal__head .mono-label{color:var(--orange)}
.modal__head h2{font-size:1.5rem;margin-top:5px}
.modal__body{padding:22px 26px;overflow-y:auto}
.modal__intro{font-size:.98rem;margin-bottom:15px}
.modal__msg{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:19px;
  font-family:var(--mono);font-size:.85rem;line-height:1.72;
  color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;
}
.modal__hint{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;color:var(--teal);margin-top:15px;font-weight:600}
.modal__hint .ico{color:var(--orange);width:18px;height:18px;margin-top:2px;flex:none}
.modal__hint--alt{color:var(--body);font-weight:400;font-size:.86rem;margin-top:10px;line-height:1.6}
.modal__hint--alt b{color:var(--teal);font-weight:700}
.modal__hint--alt .ico{color:var(--teal)}
/* Two by two: the utility pair on top, the two ways to send underneath.
   Four buttons in one flex row leaves every label wrapping. */
.share-done{
  margin-top:16px;padding:16px 18px;border-radius:var(--r-sm);
  background:#e4f7ec;color:var(--wa-dark);font-size:.95rem;line-height:1.7;
}
.share-done .btn{margin-top:12px}

.modal__foot{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:19px 26px;border-top:1px solid var(--line);background:var(--bg);border-radius:0 0 var(--r-xl) var(--r-xl)}
.modal__foot .btn{min-width:0}
/* With the share button in play there are five actions, which leaves the
   primary one alone on the last row — so give it the whole row. */
/* Below this the widest label ("Open WhatsApp", 202px) no longer fits a
   half-width column, so the buttons stack instead of wrapping mid-label. */
@media (max-width:520px){
  .modal__foot{grid-template-columns:1fr}
  /* The green send button leads on a phone; the rest are alternatives. */
  .modal__foot #waBtn{order:-1}
}
body.is-locked{overflow:hidden}

/* ═══════ TOAST ════════════════════════════════════════════════ */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(14px);z-index:300;
  background:var(--ink);color:#fff;padding:14px 24px;border-radius:9px;font-size:.96rem;font-weight:600;
  box-shadow:var(--sh-3);opacity:0;transition:opacity .24s ease, transform .24s var(--ease);pointer-events:none;
  border-left:3.5px solid var(--orange);max-width:calc(100vw - 32px);
}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══════ REVEAL ═══════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ═══════ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width:1080px){
  .builder{grid-template-columns:1fr}
  .builder__side{position:static}
  .summary__items{max-height:none}
  .poster{grid-template-columns:1fr;gap:36px}
  .poster__art{max-width:400px;margin-inline:auto}
  .poster__art img{transform:none}
  .sheet::before,.sheet::after{display:none}
}
@media (max-width:880px){
  .nav{
    position:fixed;inset:var(--header-h) 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:14px 22px 22px;box-shadow:var(--sh-2);
    transform:translateY(-150%);transition:transform .32s var(--ease);
    max-height:calc(100vh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav>a{padding:15px 6px;font-size:1.08rem;color:var(--navy);opacity:1;border-bottom:1px solid var(--line)}
  .nav>a.is-active::after{display:none}
  .nav__cta{margin:16px 0 0;justify-content:center;border-bottom:none;color:#fff}
  .nav-toggle{display:block}
  .footer__inner{grid-template-columns:1fr;gap:30px}
  .toast{bottom:96px}
}
@media (max-width:640px){
  :root{--header-h:76px}
  body{font-size:16.5px}
  .wrap{padding-inline:18px}

  .form__grid,.config__grid,.radios{grid-template-columns:1fr}
  .step{padding:22px}
  .docket{padding:22px}
  .perf{margin-inline:-22px}
  .picker{grid-template-columns:1fr 1fr}
  .pick__txt strong{font-size:.92rem}
  /* side-by-side CTAs wrap their labels at this width — stack them instead */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__trust b{font-size:1.8rem}
  .modal__foot .btn{flex:1 1 100%}
  .disc .disc__value{font-size:2.8rem}
  .faq__item summary{font-size:1.06rem;padding-right:44px}
  .faq__body{padding-right:20px}
  .phone{width:min(320px,100%)}
}
@media (max-width:410px){
  .picker{grid-template-columns:1fr}
  .step{padding:18px}
  .docket{padding:18px}
  .perf{margin-inline:-18px}
  .step__head{gap:12px}
  .step__num{width:34px;height:34px;font-size:.98rem}
  .wrap{padding-inline:14px}
  .hero__trust li{padding-inline:10px}
  .phone__screen{height:700px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .btn:hover,.svc:hover,.disc:hover,a.contact-card:hover,.phone:hover{transform:none}
}

/* ═══════ PRINTABLE RECEIPT ════════════════════════════════════
   Built by buildReceipt() in app.js and parked at the end of <body>.
   It never shows on screen — the print stylesheet below is what puts
   it on paper, in place of the whole page.                          */
.receipt{display:none}

@media print{
  /* ── With a receipt built, the sheet IS the page ── */
  body.has-receipt > *{display:none !important}
  body.has-receipt #receipt{display:block !important}
  /* The modal locks body scrolling; leaving it on can clip long printouts. */
  body.is-locked{overflow:visible !important}

  /* ── Plain Ctrl+P with no order reviewed: fall back to the docket ── */
  .site-header,.mobile-bar,.hero,.footer,.builder__main,.modal,.legal,.toast,
  .crop-frame,.hero__deco,.poster{display:none !important}
  .docket{box-shadow:none;border:1px solid #000}

  body{background:#fff;padding:0;color:#000}
  /* 10mm clears the unprintable edge on every desktop printer and still lets
     both copies of a typical order sit on one Letter sheet. */
  @page{margin:10mm}

  .rc-copy{
    page-break-inside:avoid;break-inside:avoid;
    font-family:var(--font);color:#111;font-size:9.5pt;line-height:1.42;
  }

  /* head */
  .rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
    border-bottom:2pt solid #111;padding-bottom:5pt}
  .rc-brand{display:flex;gap:8pt;align-items:flex-start}
  .rc-logo{width:33pt;height:33pt;object-fit:contain;flex:none}
  .rc-head h1{font-family:var(--display);font-size:12.5pt;line-height:1.2;margin:0 0 2pt;letter-spacing:-.01em}
  .rc-head p{margin:0;font-size:8.5pt;color:#444;line-height:1.4}
  .rc-stub{text-align:right;flex:none}
  .rc-kind{font-size:7.5pt !important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#111 !important;border:1pt solid #111;border-radius:2pt;padding:2pt 6pt;display:inline-block}
  .rc-ref{font-size:11pt !important;font-weight:800;color:#111 !important;margin-top:4pt !important;
    font-variant-numeric:tabular-nums}
  .rc-when{font-size:8pt !important;margin-top:1pt !important}

  /* customer block */
  .rc-meta{display:flex;flex-wrap:wrap;gap:3pt 20pt;margin:5pt 0 0;padding:0}
  .rc-meta div{display:flex;gap:5pt;font-size:9pt}
  .rc-meta dt{margin:0;color:#666}
  .rc-meta dd{margin:0;font-weight:700;color:#111}

  /* items */
  .rc-table{width:100%;border-collapse:collapse;margin-top:6pt;font-size:9.5pt}
  .rc-table th{
    text-align:left;font-size:7.5pt;letter-spacing:.12em;text-transform:uppercase;color:#555;
    border-bottom:.75pt solid #111;padding:0 0 2.5pt;font-weight:700;
  }
  .rc-table td{padding:3.5pt 0;border-bottom:.5pt dotted #b9b9b9;vertical-align:top}
  .rc-table th.rc-n,.rc-table td.rc-n{text-align:right;white-space:nowrap;padding-left:10pt;
    font-variant-numeric:tabular-nums}
  .rc-table td:first-child{padding-right:8pt}
  .rc-sub{color:#666;font-size:8.5pt}

  /* totals + terms */
  .rc-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:18pt;margin-top:6pt}
  .rc-side{flex:1;font-size:8.5pt;color:#444}
  .rc-notes{margin:0 0 1.5pt;line-height:1.4}
  .rc-terms{margin:4pt 0 0;color:#111;font-weight:600}
  .rc-sign{margin:6pt 0 0;color:#666;display:flex;align-items:flex-end;gap:6pt}
  .rc-sign span{flex:1;max-width:120pt;border-bottom:.5pt solid #999;height:10pt}

  .rc-sums{margin:0;padding:0;min-width:150pt;flex:none}
  .rc-sums div{display:flex;justify-content:space-between;gap:14pt;font-size:9.5pt;padding:1.5pt 0}
  .rc-sums dt,.rc-sums dd{margin:0}
  .rc-sums dd{font-variant-numeric:tabular-nums;font-weight:600}
  .rc-grand{border-top:1.25pt solid #111;margin-top:2pt;padding-top:3.5pt !important;
    font-family:var(--display);font-size:12pt !important;font-weight:800}
  .rc-grand dd{font-weight:800}

  /* the tear line between the two copies */
  .rc-cut{
    position:relative;text-align:center;margin:10pt 0;
    border-top:1pt dashed #999;
  }
  .rc-cut span{
    position:relative;top:-5.5pt;background:#fff;padding:0 8pt;
    font-size:7pt;letter-spacing:.18em;text-transform:uppercase;color:#999;
  }
}