/* ═══════════════════════════════════════════════════════════════
   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;
}
.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;
}
.tag--onDark{color:#9fd0e8}
.tag--onDark .tag__idx{background:var(--orange);color:#fff}
.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}

.icon-btn{
  width:40px;height:40px;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--dark{
  background:linear-gradient(160deg,var(--navy) 0%,#07202b 58%,#0c3446 100%);
  color:#b6d2df;overflow:hidden;
}
.section--dark::before{display:none}
.section--dark .wrap{position:relative;z-index:1}
.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;
}
.section__head--light h1,
.section__head--light h2{color:#fff}
.section__head--light .section__sub{color:#a8c7d7}

/* ═══════ 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}
.chip{
  border:1.5px solid var(--line-2);background:var(--paper);border-radius:7px;padding:7px 16px;
  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}
.sitem__del{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:3px;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{max-width:760px;margin-inline:auto}
.how .section__head{margin-bottom:34px}
.how__go{margin-top:34px}

.flow{display:grid;gap:6px}
.flow li{
  display:flex;gap:20px;padding:22px 24px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  transition:background .25s ease, transform .25s var(--ease);
}
.flow li:hover{background:rgba(31,127,181,.16);transform:translateX(5px)}
.flow__n{font-size:.82rem;font-weight:700;color:var(--orange);letter-spacing:.14em;padding-top:5px}
.flow h2{color:#fff;font-size:1.1rem;margin-bottom:7px}
.flow p{font-size:.95rem;color:#a8c7d7;line-height:1.7}

.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;
  display:flex;flex-direction:column;height:610px;
}
.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:#a8c7d7;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)}

/* ═══════ 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:10px;justify-content:space-between;padding-top:28px;font-size:.8rem;color:#7fa4b8;letter-spacing:.02em}

/* ═══════ HOME: THE PRICE TABLE ════════════════════════════════
   Seven services in a plain grid always left a hole in the last row and read
   as a wall of figures. Three headed groups instead: a customer scans the
   heading that matches what they came for, then one line. */
.peek{
  margin-top:34px;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  align-items:start;
}
.peek__group{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
}
.peek__title{
  margin:0;padding:18px 22px 14px;border-bottom:1px solid var(--line);
  font-size:1.06rem;letter-spacing:-.01em;color:var(--navy);
}
.peek__title small{
  display:block;margin-top:5px;font-family:var(--font);font-size:.8rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.peek__group ul{list-style:none;margin:0;padding:6px 0}
.peek__group li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 22px;
}
.peek__group li + li{border-top:1px dotted var(--line)}
.peek__name{font-weight:700;color:var(--ink);line-height:1.4}
.peek__name small{display:block;margin-top:3px;font-weight:500;font-size:.84rem;color:var(--muted)}
.peek__fig{
  display:flex;align-items:baseline;gap:6px;white-space:nowrap;
  font-family:var(--display);font-size:1.34rem;color:var(--navy);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.peek__fig span{
  font-family:var(--font);font-size:.8rem;font-weight:600;color:var(--muted);
  letter-spacing:.09em;text-transform:uppercase;
}
/* A sentence, not a row of buttons. The hero already offered both choices. */
.peek__note{margin-top:24px;color:var(--muted);font-size:.98rem;line-height:1.8;max-width:62ch}

/* Two links buried in that sentence were 19px tall, and giving each an
   invisible overlay did not help: on consecutive lines the overlays land on
   top of one another, so half of each target belonged to the other link. Out
   of the sentence and onto their own row, where they can simply BE big. */
.peek__links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:14px}
.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)}
.peek__note a:hover{color:var(--orange-dark)}

/* ═══════ HOME: WHAT THE SHOP RECEIVES ═════════════════════════
   The only place below the hero that asks for the order, and it asks after
   showing what actually happens rather than before. */
.receive__inner{
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,70px);align-items:center;
}
.receive .section__head{margin-bottom:30px}
.receive__go{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
@media (max-width:900px){
  .receive__inner{grid-template-columns:1fr;gap:40px}
}

/* ═══════ 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:560px}
}

@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,.section--dark,.footer,.builder__main,.modal,.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;
  }
}