@font-face{
  font-family:"Rubik";
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url("/fonts/rubik.woff2") format("woff2");
}

/* ---------- tokens (light, Shopify-native) ---------- */
:root{
  color-scheme:light;
  --page:#ffffff;
  --surface:#F6F4FA;
  --surface-2:#FBFAFD;
  --card:#ffffff;
  --ink:#201227;
  --muted:#6E6577;
  --border:#ECE7F2;
  --border-strong:#DED6E8;

  --violet:#3D1A45;
  --violet-700:#512560;
  --violet-900:#2A0F31;
  --on-violet:#F4EAF6;
  --on-violet-dim:#C6ABCE;
  --orange:#E8562A;
  --orange-600:#CB471F;

  /* inventory-state colors (semantic, not the accent) */
  --st-soon:#7A3C86;
  --st-preorder:#E8562A;
  --st-instock:#1E8A5B;
  --st-low:#C07C10;
  --st-sold:#8A8291;
  --st-back:#12808E;
  --st-notify:#2C6FB0;

  --wrap:1180px;
  --sans:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --t-xs:0.8rem; --t-sm:0.92rem; --t-base:1rem; --t-md:1.14rem;
  --t-lg:1.35rem; --t-xl:1.75rem; --t-2xl:2.25rem; --t-3xl:2.9rem;
  --t-hero:clamp(2.6rem,5.2vw,4rem);

  /* ---------- pill scale ----------
     Every rounded label on the site is one of three sizes. Before this existed there
     were ~20 hand-tuned padding/size combinations doing the same three jobs, which is
     why no two "tags" ever matched. Use a tier; don't hand-tune a call site.

       tag   uppercase micro-label   "RETIRED 2024", "TIMESACT"
       chip  small status or count   "Good", "3 guides", a variant name
       lg    large chip / nav item   section nav, lifecycle nodes, cart button

     --pill-tag-indent cancels the trailing letter-space: letter-spacing adds a gap
     AFTER the final character, which centring then counts as content, so the glyphs
     sit visibly left of centre. text-indent shifts them back. */
  --pill-tag-fs:.66rem;   --pill-tag-pad:5px 11px;  --pill-tag-ls:.055em; --pill-tag-indent:.055em;
  --pill-chip-fs:.72rem;  --pill-chip-pad:6px 12px;
  --pill-lg-fs:var(--t-sm); --pill-lg-pad:9px 16px;
  --pill-node-pad:10px 18px;   /* lifecycle nodes / flow links — lg type, roomier box */
  /* Inline annotation (.ts-tag) — sits INSIDE running prose, so it has to stay under the
     tag tier. At tag size it grows the paragraph's line box and collides with the line
     above. Small on purpose; don't "fix" it up to --pill-tag-fs. */
  --pill-mark-fs:.6rem;   --pill-mark-pad:4px 10px;

  /* ---------- radius scale ----------
     Four steps. Before this there were twelve values between 6px and 22px, most of
     them a pixel apart and indistinguishable. Anything below 8px is mock-UI or
     progress-bar detail and stays literal. */
  --r-sm:11px;--r-pill:999px;   /* controls, small cards, icon tiles */
  --r-md:16px;   /* cards, panels, media */
  --r-lg:22px;   /* large surfaces, hero panels */

  /* ---------- elevation ----------
     Four steps, one hue. There were nine variants of the big card shadow alone,
     differing by a few pixels of blur — invisible apart, inconsistent together. */
  --sh-sm:0 10px 22px -18px rgba(61,26,69,.4);
  --sh-md:0 18px 40px -34px rgba(61,26,69,.3);
  --sh-lg:0 28px 52px -30px rgba(61,26,69,.4);
  --sh-xl:0 44px 80px -46px rgba(61,26,69,.44);
  --sh-brand:0 8px 16px -9px rgba(232,86,42,.75);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-base);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;letter-spacing:-0.006em;
  /* Kills widows site-wide — the short card taglines were constantly stranding their
     last word on a line of its own ("later.", "restock.", "low."). Inherited, so it
     reaches every card, list and paragraph; headings override it with balance below.
     Unsupported browsers just wrap normally, so there is nothing to fall back to. */
  text-wrap:pretty;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.028em;line-height:1.08;text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.band{padding:92px 0;}
.band--surface{background:var(--surface);}
.eyebrow{font-size:var(--t-sm);font-weight:600;color:var(--orange);}
.lede{color:var(--muted);font-size:var(--t-md);line-height:1.65;max-width:52ch;}
.sec-head{max-width:38ch;}
.sec-head h2{font-size:var(--t-2xl);margin-top:12px;}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:var(--t-sm);
  padding:12px 22px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,filter .12s ease,background .12s ease,border-color .12s ease;white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--orange);color:#fff;box-shadow:var(--sh-brand);}
.btn--primary:hover{filter:brightness(1.06);}
.btn--violet{background:var(--violet);color:#fff;}
.btn--violet:hover{background:var(--violet-700);}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--border-strong);}
.btn--ghost:hover{border-color:var(--muted);}
.btn--white{background:#fff;color:var(--violet);}
.btn--white:hover{filter:brightness(.96);}

/* ---------- pills ----------
   Base + tier. Anything rounded with a label uses one of these. Tone (colour) is a
   separate axis from size, so a tag and a chip can share a palette without sharing a
   box. inline-flex is not optional: as a plain inline box, vertical padding doesn't
   affect the line box and uppercase text sits visibly high in the pill. */
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);white-space:nowrap;line-height:1;}
.pill--tag{font-size:var(--pill-tag-fs);font-weight:700;letter-spacing:var(--pill-tag-ls);text-indent:var(--pill-tag-indent);text-transform:uppercase;padding:var(--pill-tag-pad);gap:5px;}
.pill--chip{font-size:var(--pill-chip-fs);font-weight:600;padding:var(--pill-chip-pad);gap:6px;}
.pill--lg{font-size:var(--pill-lg-fs);font-weight:600;padding:var(--pill-lg-pad);gap:8px;}

/* Skip link — visually hidden until focused, so keyboard users can jump the nav.
   Sits above the sticky header's z-index:50 so it isn't painted behind it. */
.skip{position:absolute;left:12px;top:-48px;z-index:100;background:var(--violet);color:#fff;
  font-size:var(--t-sm);font-weight:600;padding:10px 16px;border-radius:var(--r-sm);
  transition:top .12s ease;}
.skip:focus{top:12px;outline:2px solid var(--orange);outline-offset:2px;}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--border);}
/* gap is load-bearing: with only justify-content:space-between, .nav-links and .nav-cta
   collapse to a measured 0px gap at 861px (the width just above the mobile breakpoint),
   so the last link visually touches "Book a setup call". gap sets a floor space-between
   can't eat; the tighter link gap in the band below buys the room to honour it. */
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.18rem;letter-spacing:-0.035em;color:var(--ink);}
.brand-logo{height:34px;width:auto;display:block;}
.foot-logo{height:30px;width:auto;display:block;}
.bfs{height:40px;width:auto;display:block;}

/* ---------- icon system ----------
   Every monochrome glyph on the site comes from src/data/icons.js (24×24,
   stroke 1.7). Nothing is hand-inlined in a page — one glyph per idea, drawn once.

   Weight is optical, and set HERE, never at the call site:
     default          1.7  — icons at ~20px and up
     .ico--sm         2.4  — icons under ~18px, which read thin at 1.7
   Size comes from whatever box the icon sits in; .ico just makes the svg fill it. */
.ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ico svg{width:100%;height:100%;display:block;}
.ico--sm svg{stroke-width:2.4;}

/* Default sizes for the shared icon containers. These MUST live here, not in a
   page's <style> block: icons are injected with set:html, so they never carry
   Astro's data-astro-cid attribute and a scoped `.box svg{}` rule misses them
   silently — the icon renders at 0×0 and just disappears. A page that needs a
   different size writes `.box :global(svg){…}`. */
.cico svg{width:22px;height:22px;}
.cico.sm svg{width:19px;height:19px;}
.cc-ic svg{width:22px;height:22px;}
.mk svg{width:16px;height:16px;stroke-width:2.4;}
.nd-ic svg{width:16px;height:16px;stroke-width:2.4;}

.i-check{width:15px;height:15px;display:inline-block;vertical-align:-0.14em;}
.i-star{width:15px;height:15px;display:inline-block;}
.i-star-sm{width:.9em;height:.9em;display:inline-block;vertical-align:-0.08em;color:var(--orange);margin-left:2px;}
.plan li .c{width:15px;height:15px;}
.plan li .c svg{width:15px;height:15px;stroke-width:2.4;}
.flist .row .mk{width:16px;height:16px;}
.flist .row .mk svg{width:16px;height:16px;stroke-width:2.4;}
.rev .stars{display:inline-flex;gap:3px;align-items:center;}
.rev .stars svg{width:15px;height:15px;}
.notify-done .nd-ic svg{width:16px;height:16px;stroke-width:2.4;}
.drawer-x svg{width:16px;height:16px;stroke-width:2.4;}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a,.nav-links .nl{font-size:var(--t-sm);color:var(--muted);font-weight:500;}
.nav-links a:hover,.nav-links .nl:hover{color:var(--ink);}
.nav-cta{display:flex;gap:12px;align-items:center;}
.nav-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-sm);background:none;border:1px solid var(--border-strong);cursor:pointer;color:var(--ink);transition:border-color .12s ease,background .12s ease;}
.nav-cart:hover{border-color:var(--muted);background:var(--surface-2);}
.nav-cart svg{width:20px;height:20px;}
.nav-cart .cart-badge{position:absolute;top:-6px;right:-6px;box-shadow:0 0 0 2px #fff;}
.nav-cta .call{font-size:var(--t-sm);font-weight:600;white-space:nowrap;}

/* Nav dropdowns. Open on hover for pointers, on :focus-within for keyboards, and
   on .open for click/touch — all three drive the same visual state. */
.nav-drop{position:relative;}
.navd-btn{display:inline-flex;align-items:center;gap:5px;padding:0;background:none;border:0;cursor:pointer;font:inherit;font-size:var(--t-sm);font-weight:500;color:var(--muted);transition:color .12s ease;}
.navd-chev{width:13px;height:13px;display:inline-flex;transition:transform .18s ease;}
.navd-chev svg{width:100%;height:100%;stroke-width:2.4;}
.navd-menu{position:absolute;top:calc(100% + 15px);left:50%;min-width:326px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 18px 44px rgba(28,16,32,.13);opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-5px);transition:opacity .16s ease,transform .16s ease,visibility .16s;}
/* Bridges the gap under the button so the menu doesn't close as the pointer travels. */
.navd-menu::before{content:"";position:absolute;left:0;right:0;top:-17px;height:17px;}
.nav-drop:hover .navd-menu,.nav-drop:focus-within .navd-menu,.nav-drop.open .navd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav-drop:hover .navd-chev,.nav-drop:focus-within .navd-chev,.nav-drop.open .navd-chev{transform:rotate(180deg);}
.nav-drop:hover .navd-btn,.nav-drop.open .navd-btn{color:var(--ink);}
.navd-item{display:block;padding:10px 12px;border-radius:var(--r-sm);transition:background .12s ease;}
.navd-item:hover{background:var(--surface);}
.navd-t{display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink);}
.navd-d{display:block;margin-top:2px;font-size:.8rem;font-weight:400;line-height:1.45;color:var(--muted);}
.navd-ext{margin-left:4px;font-size:.75em;color:var(--muted);}

/* Mobile menu. Below 860px the desktop bar is hidden, so this is the only nav —
   every link in the bar has to have a home in here. */
.nav-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-sm);background:none;border:1px solid var(--border-strong);cursor:pointer;color:var(--ink);}
.nav-burger .ico{width:20px;height:20px;}
.nav-burger .bc{display:none;}
.nav-burger[aria-expanded="true"] .bo{display:none;}
.nav-burger[aria-expanded="true"] .bc{display:inline-flex;}
.nav-mobile{background:#fff;border-top:1px solid var(--border);max-height:calc(100dvh - 66px);overflow-y:auto;}
/* padding-block, not shorthand — .wrap's horizontal 24px has to survive. */
.nm-inner{display:grid;gap:22px;padding-block:20px 28px;}
.nm-h{margin-bottom:6px;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
.nm-link{display:block;padding:10px 0;font-size:1rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--border);}
.nm-cta{display:grid;gap:10px;}
body.nav-open{overflow:hidden;}

@media (max-width:860px){.nav-links{display:none;}.nav-cta .call{display:none;}.nav-burger{display:inline-flex;}}
/* tablet band: full nav is shown but space is tight — tighten the link row so the
   .nav-inner gap above can actually be honoured instead of squeezing the links. */
@media (min-width:861px) and (max-width:1080px){.nav-links{gap:20px;}}
@media (min-width:861px){.nav-mobile{display:none !important;}}

/* ---------- state chip ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--pill-chip-fs);font-weight:600;padding:var(--pill-chip-pad);border-radius:var(--r-pill);color:#fff;white-space:nowrap;line-height:1;}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,#FAF7FD, #ffffff 72%);}
/* padding-block, not shorthand — .hero-grid shares an element with .wrap ("wrap
   hero-grid"), and a `padding:70px 0 84px` shorthand reset .wrap's horizontal 24px
   to 0. Harmless at desktop, where the grid is nowhere near the viewport edge; on a
   390px phone it put the eyebrow, H1, lede and CTAs flush against the screen edge.
   Same trap already noted on .nm-inner above. */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding-block:70px 84px;}
.hero h1{font-size:var(--t-hero);font-weight:800;letter-spacing:-0.04em;}
.hero h1 .u{color:var(--orange);}
.hero .lede{margin-top:22px;font-size:1.2rem;max-width:36ch;}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;}
.trust{display:flex;align-items:center;gap:14px;margin-top:26px;color:var(--muted);font-size:var(--t-sm);flex-wrap:wrap;}
.trust b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;}
.trust .sep{width:4px;height:4px;border-radius:50%;background:var(--border-strong);}

/* product card (storefront preview, brand-recolored widgets) */
.pcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-xl);overflow:hidden;max-width:420px;margin-left:auto;}
.pcard-media{aspect-ratio:5/4;position:relative;background:linear-gradient(150deg,#efe7f3,#e2d6ea);display:flex;align-items:flex-end;padding:16px;}
.pcard-media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b79cbe;font-weight:700;font-size:.85rem;letter-spacing:.02em;}
.pcard .chip{position:absolute;top:16px;left:16px;}
.pcard-body{padding:20px 20px 22px;}
.pcard .name{font-size:var(--t-lg);font-weight:700;}
.pcard .price{font-size:var(--t-md);margin-top:2px;font-variant-numeric:tabular-nums;color:var(--ink);}
.pcard .msg{margin-top:12px;font-size:var(--t-sm);color:var(--muted);}
.pcard .w-btn{margin-top:14px;}

/* recolored storefront widgets */
.w-btn{width:100%;padding:14px;border-radius:var(--r-sm);border:0;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:var(--t-sm);color:#fff;background:var(--violet);transition:background .12s ease;}
.w-btn:hover{background:var(--violet-700);}
.w-btn--buy{background:var(--orange);}
.w-btn--buy:hover{filter:brightness(1.06);}

.w-form{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 30px 60px -40px rgba(61,26,69,.4);padding:30px 28px;max-width:400px;text-align:center;}
.w-form h4{font-size:var(--t-lg);color:var(--ink);}
.w-form p{margin-top:8px;font-size:var(--t-sm);color:var(--muted);}
/* A real <input> now, not a div dressed as one — the demo asked for an email and then
   accepted an empty submit. Styles have to suit both: the homepage mock is still a
   static div, the experience-page form is typed into. */
.w-form .field{margin-top:18px;width:100%;height:46px;border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:0 14px;font-family:var(--sans);font-size:var(--t-sm);color:var(--muted);display:flex;align-items:center;background:var(--surface-2);}
input.field{display:block;color:var(--ink);}
input.field::placeholder{color:var(--muted);opacity:1;}
input.field:focus{outline:2px solid color-mix(in srgb,var(--orange) 55%,transparent);outline-offset:1px;border-color:var(--orange);}
/* Disabled until something is typed. Deliberately not an email-format check — any text
   clears it (Vlad: "forget about them filling in email address, the placeholder is
   enough"), the point is only that an empty form can't be submitted. */
.w-btn:disabled{background:var(--border-strong);cursor:not-allowed;filter:none;}
.w-form .note{margin-top:12px;font-size:var(--t-xs);color:var(--muted);}
.w-form .w-btn{margin-top:12px;}
.w-form .pb{margin-top:16px;font-size:var(--t-xs);color:var(--muted);}
.w-form .pb b{color:var(--violet);font-weight:600;}

.w-timer{background:var(--violet);border-radius:var(--r-md);padding:26px;text-align:center;color:var(--on-violet);max-width:420px;box-shadow:0 30px 60px -40px rgba(61,26,69,.5);}
.w-timer .tt{font-size:var(--t-xl);font-weight:700;color:#fff;}
.w-timer .ts{margin-top:4px;color:var(--on-violet-dim);font-size:var(--t-sm);}
.w-timer .clock{margin-top:16px;display:flex;align-items:baseline;justify-content:center;gap:6px;}
.w-timer .num{font-size:2.6rem;font-weight:700;color:var(--orange);font-variant-numeric:tabular-nums;line-height:1;}
.w-timer .colon{font-size:2rem;color:var(--on-violet-dim);font-weight:700;}
.w-timer .labs{margin-top:8px;display:flex;justify-content:center;gap:38px;color:var(--on-violet-dim);font-size:0.72rem;}

/* ---------- trust strip ---------- */
.strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface-2);}
.strip-inner{display:flex;align-items:center;justify-content:center;gap:38px;padding:22px 0;flex-wrap:wrap;color:var(--muted);font-size:var(--t-sm);font-weight:500;}
.strip-inner b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;}
.strip .dot{width:5px;height:5px;border-radius:50%;background:var(--border-strong);}

/* merchant logo strip (white logos on brand violet) */
.logos{background:var(--violet-900);padding:36px 0 40px;overflow:hidden;}
.logos-h{text-align:center;color:var(--on-violet-dim);font-size:var(--t-sm);font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin:0 0 26px;}
.logos-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
/* trailing margin (not gap) so 4 identical copies loop perfectly seamlessly at -25% */
.logos-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:logosScroll 36s linear infinite;}
.logos-track img{height:30px;width:auto;max-width:150px;flex:0 0 auto;margin-right:64px;filter:brightness(0) invert(1);opacity:.95;}
.logos-marquee:hover .logos-track{animation-play-state:paused;}
@keyframes logosScroll{to{transform:translateX(-25%);}}
@media (max-width:640px){.logos-track img{height:24px;margin-right:44px;}}
@media (prefers-reduced-motion:reduce){.logos-track{animation:none;flex-wrap:wrap;white-space:normal;justify-content:center;}.logos-track img[aria-hidden="true"]{display:none;}}

/* ---------- experiences grid (real icons) ---------- */
/* The experience tiles are detailed 3D stickers, not flat glyphs — at 46px the gem,
   the percent sign and the clock face all read as mush. So the card is a media row
   rather than a vertical stack: three columns instead of four buys the width for a
   72px tile, and the row costs no extra height because the old stack spent as much
   of it on the gap between tagline and link as it did on the icon.
   Shared with .dt-rel (related experiences) — check both when touching this. */
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;}
.exp-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:22px;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;}
.exp-card:hover{box-shadow:0 22px 44px -30px rgba(61,26,69,.35);transform:translateY(-2px);border-color:var(--border-strong);}
/* Radius is deliberately wider than the artwork's own 12% corner — the CSS clip wins,
   and 22% is the app-icon shape the set is drawn to sit in. */
.exp-card img{width:72px;height:72px;border-radius:var(--r-md);}
.exp-card h3{font-size:var(--t-md);}
.exp-card p{margin-top:6px;font-size:var(--t-sm);color:var(--muted);line-height:1.5;}
.exp-note{margin-top:28px;text-align:center;font-size:var(--t-sm);color:var(--muted);}
.exp-note b{color:var(--ink);font-weight:600;}

/* ---------- feature spotlight ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.feat.rev{direction:rtl;}
.feat.rev>*{direction:ltr;}
.feat h2{font-size:var(--t-2xl);margin-top:12px;}
.feat .lede{margin-top:16px;}
.flist{margin-top:22px;display:flex;flex-direction:column;gap:12px;}
.flist .row{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-sm);}
.flist .row .mk{margin-top:1px;color:var(--st-instock);flex:0 0 auto;font-weight:700;}
.feat .stage{display:flex;justify-content:center;}
.bis-mock{width:100%;max-width:520px;}
/* Back-in-stock spotlight: mock in the LEFT column on desktop (alternates with Preorders); copy-first when stacked on mobile */
@media (min-width:921px){.bis-flip .stage{order:-1;}}

/* contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start;}
.contact-cards{display:flex;flex-direction:column;gap:16px;}
.ccard{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:22px 24px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.ccard:hover{border-color:var(--border-strong);box-shadow:0 22px 44px -32px rgba(61,26,69,.3);transform:translateY(-2px);}
.cc-ic{width:44px;height:44px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--st-preorder);margin-bottom:14px;}
.cc-ic svg{width:22px;height:22px;}
.ccard h3{font-size:var(--t-md);}
.ccard p{margin-top:4px;font-size:var(--t-sm);color:var(--ink);font-weight:600;}
.ccard .cc-meta{display:block;margin-top:6px;font-size:var(--t-xs);color:var(--muted);}
.contact-form{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:28px;box-shadow:0 30px 60px -44px rgba(61,26,69,.34);}
.contact-form h3{font-size:var(--t-lg);}
.cf-row{margin-top:16px;}
.cf-row label{display:block;font-size:var(--t-xs);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.cf-row input,.cf-row textarea{margin-top:7px;width:100%;border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:11px 13px;font-family:var(--sans);font-size:var(--t-sm);color:var(--ink);background:var(--surface-2);}
.cf-row input:focus,.cf-row textarea:focus{outline:none;border-color:var(--orange);background:#fff;}
.cf-row textarea{resize:vertical;}
.contact-form button{margin-top:20px;width:100%;}
.cf-note{margin-top:12px;font-size:var(--t-xs);color:var(--muted);text-align:center;}
.cf-note.is-err{color:var(--orange);font-weight:600;}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr;}}
/* low-fi app mockup — rebuilt in the site's own UI style, 3 synced auto-cycling scenes */
.mock{width:100%;max-width:460px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-lg);overflow:hidden;}
.mock-bar{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border);}
.mock-bar .dot{width:16px;height:16px;border-radius:6px;background:var(--orange);flex:0 0 auto;}
.mock-bar .t{font-size:var(--t-xs);color:var(--muted);font-weight:500;}
.mock-stage{position:relative;min-height:280px;}
.scene{position:absolute;inset:0;padding:24px 22px;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;pointer-events:none;}
.scene.act{opacity:1;transform:none;pointer-events:auto;}
.mock-lbl{font-size:var(--t-xs);color:var(--muted);font-weight:600;}
/* product + price */
.sc-prod{display:flex;gap:12px;align-items:center;}
.sc-thumb{width:46px;height:46px;border-radius:var(--r-sm);background:linear-gradient(150deg,#efe7f3,#e2d6ea);flex:0 0 auto;overflow:hidden;position:relative;}
.sc-thumb.sm{width:36px;height:36px;border-radius:var(--r-sm);}
.sc-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.sc-n{font-weight:600;font-size:var(--t-sm);}
.sc-p{font-size:var(--t-sm);color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px;}
/* segmented (billing) */
.seg{position:relative;display:flex;margin-top:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:5px;}
.seg .thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--r-sm);background:var(--orange);box-shadow:var(--sh-brand);transition:transform .5s cubic-bezier(.4,.02,.2,1);}
.seg.dep .thumb{transform:translateX(100%);}
.seg .opt{position:relative;z-index:1;flex:1;text-align:center;padding:11px 8px;font-size:var(--t-sm);font-weight:600;color:var(--muted);transition:color .35s ease;}
.seg.dep .opt:last-child{color:#fff;}
.pay-split{display:flex;gap:10px;margin-top:14px;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;}
.scene.act .pay-split{opacity:1;transform:none;transition-delay:.28s;}
.ps{flex:1;border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;background:var(--surface-2);}
.ps .k{display:block;font-size:var(--t-xs);color:var(--muted);}
.ps .v{font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--t-md);margin-top:2px;}
/* variants */
.vrow{display:flex;align-items:center;justify-content:space-between;padding:13px 2px;border-bottom:1px solid var(--border);opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease;}
.vrow:last-child{border-bottom:0;}
.scene.act .vrow{opacity:1;transform:none;}
.scene.act .vrow:nth-child(3){transition-delay:.08s;}
.scene.act .vrow:nth-child(4){transition-delay:.16s;}
.scene.act .vrow:nth-child(5){transition-delay:.24s;}
.vn{font-size:var(--t-sm);font-weight:500;}
.vchip{display:inline-flex;align-items:center;justify-content:center;font-size:var(--pill-chip-fs);font-weight:600;padding:var(--pill-chip-pad);border-radius:var(--r-pill);color:#fff;line-height:1;}
.vchip.in{background:var(--st-instock);}
.vchip.pre{background:var(--st-preorder);}
/* order tag */
.ord-line{display:flex;gap:11px;align-items:center;font-size:var(--t-sm);margin-top:16px;}
.ord-tags{margin-top:16px;}
.otag{display:inline-flex;align-items:center;background:var(--st-preorder);color:#fff;font-size:.75rem;font-weight:600;padding:6px 13px;border-radius:var(--r-sm);opacity:0;transform:scale(.88);transition:opacity .4s ease,transform .4s ease;}
.scene.act .otag{opacity:1;transform:none;transition-delay:.32s;}
.ord-note{margin-top:14px;font-size:var(--t-xs);color:var(--muted);line-height:1.5;}
/* bullet sync (only while JS is driving the cycle) */
.flist.syncing .row{color:var(--muted);transition:color .3s ease;}
.flist.syncing .row .mk{color:var(--muted);transition:color .3s ease;}
.flist.syncing .row.act{color:var(--ink);}
.flist.syncing .row.act .mk{color:var(--orange);}

/* ---------- demo ---------- */
.demo-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.demo-note{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-xs);color:var(--muted);border:1px dashed var(--border-strong);border-radius:var(--r-pill);padding:var(--pill-lg-pad);line-height:1;}
.demo-note b{color:var(--ink);font-weight:600;}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;}
.mini{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:box-shadow .18s ease,transform .18s ease;}
.mini:focus-visible{outline:2px solid var(--violet);outline-offset:3px;}
.mini:hover{box-shadow:0 22px 44px -30px rgba(61,26,69,.32);transform:translateY(-2px);}
.mini-media{aspect-ratio:1/1;position:relative;background:linear-gradient(150deg,#efe7f3,#e2d6ea);}
.mini-media .chip{position:absolute;top:12px;left:12px;}
/* real product photos fill their media box; chips/labels stay on top */
.pcard-media,.mini-media,.sf-media,.fp-media{overflow:hidden;}
.fc-thumb{position:relative;}
.pcard-media>img,.mini-media>img,.sf-media>img,.fp-media>img,.fc-thumb>img,.ci-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.mini-body{padding:15px 15px 17px;}
.mini-body .n{font-weight:600;font-size:var(--t-sm);}
.mini-body .pr{font-size:var(--t-sm);color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;}
.mini-body .cd{font-size:var(--t-sm);color:var(--ink);margin-top:8px;font-variant-numeric:tabular-nums;}
.mini-body .was{text-decoration:line-through;color:var(--muted);opacity:.72;margin-right:3px;}
.mini-body .cd-lbl{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:9px;}
.mini-body .cd-lbl + .cd{margin-top:2px;}
/* The card is the link, so this is the collection message line, not a control. */
.mini-body .cta{display:block;margin-top:4px;}
.cartbar{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:30px;flex-wrap:wrap;}
.cartbar .count{font-size:var(--t-sm);color:var(--muted);}
.cartbar .count b{color:var(--ink);font-variant-numeric:tabular-nums;}
#blockmsg{margin-top:12px;text-align:center;font-size:var(--t-sm);color:var(--st-preorder);font-weight:500;min-height:1.3em;}

/* ---------- social proof ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:36px;}
.stat{text-align:center;padding:24px;border:1px solid var(--border);border-radius:var(--r-md);background:#fff;}
.stat .v{font-size:1.8rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.stat .l{font-size:var(--t-sm);color:var(--muted);margin-top:5px;}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.rev{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:24px;}
.rev .stars{color:var(--orange);letter-spacing:2px;font-size:.9rem;}
.rev q{display:block;margin-top:14px;font-size:var(--t-sm);line-height:1.65;flex:1;quotes:none;}
.rev .by{margin-top:18px;border-top:1px solid var(--border);padding-top:14px;}
.rev .by .who{font-weight:600;font-size:var(--t-sm);}
.rev .by .meta{font-size:var(--t-xs);color:var(--muted);margin-top:2px;}

/* ---------- homepage performance band (dark, mirrors the logo strip surface) ---------- */
.perf-band{background:var(--violet-900);color:var(--on-violet-dim);padding:76px 0;}
.perf-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.perf-eye{color:var(--orange);}
.perf-band h2{font-size:var(--t-2xl);color:#fff;margin-top:12px;max-width:18ch;}
.perf-lede{margin-top:16px;font-size:var(--t-md);line-height:1.65;color:var(--on-violet-dim);max-width:50ch;}
.perf-cta{display:flex;align-items:center;gap:20px;margin-top:28px;flex-wrap:wrap;}
.perf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.perf-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:20px 18px;}
/* display-scale figure: proportional digits — tabular reads loose this large */
.perf-stat .pv{font-size:2.1rem;font-weight:800;letter-spacing:-.035em;color:#fff;line-height:1.05;}
.perf-stat .pl{margin-top:8px;font-size:var(--t-xs);color:var(--on-violet-dim);line-height:1.45;}
.perf-stat .pl .pk{color:#fff;font-weight:600;}
.perf-stat .pg{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:.68rem;font-weight:600;color:#8FD9B0;}
.perf-stat .pg .mk{display:inline-flex;flex:0 0 auto;}
.perf-stat .pg .mk svg{width:13px;height:13px;stroke-width:2.4;}
.perf-note{grid-column:1/-1;margin-top:4px;font-size:var(--t-xs);color:var(--on-violet-dim);text-align:center;}
@media (max-width:920px){.perf-grid{grid-template-columns:1fr;gap:34px;}}
@media (max-width:560px){.perf-stats{grid-template-columns:1fr;}.perf-stat{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}.perf-stat .pl,.perf-stat .pg{margin-top:0;}}

/* ---------- pricing ----------
   Two version groups (CORE, PRO) × plan, plus the standalone add-on — the same shape as
   the app's billing screen. Fixed prices follow the merchant's Shopify subscription
   level, so headlines read "from $X" and the Monthly/Yearly switch swaps the figure.
   Both figures are in the markup; these rules decide which one shows, so the page still
   states a correct monthly price with JS off. */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px;align-items:stretch;}
.price-grid--2{grid-template-columns:repeat(2,1fr);max-width:min(100%,720px);}
.plan{border:1px solid var(--border);border-radius:var(--r-md);padding:26px 24px;background:#fff;position:relative;display:flex;flex-direction:column;}
.plan.hi{border:1.5px solid var(--violet);box-shadow:0 30px 60px -42px rgba(61,26,69,.5);}
.plan .tag{position:absolute;top:-11px;right:20px;background:var(--orange);color:#fff;font-size:var(--pill-chip-fs);font-weight:600;padding:var(--pill-chip-pad);border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.plan .pname{font-size:var(--t-sm);font-weight:700;color:var(--muted);letter-spacing:.01em;margin-bottom:6px;}
.plan .ph h3,.plan .ph .pprice{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;}
.plan .ph h3 span,.plan .ph .pprice span{font-size:.95rem;font-weight:500;color:var(--muted);}
.plan .ph .sub{font-size:var(--t-xs);color:var(--muted);margin-top:3px;}

/* per-order line — the same slot on every card, hard against the price.
   A per-order charge found late is the surprise-fee problem, and "no transaction fees"
   only reads as a contradiction when the $0.20 is eight lines further down. Sitting here
   the two are one statement. The dashed rule repeats across the row, so the eye can scan
   the answer for all three plans without reading a single feature list. Kept neutral in
   colour on purpose: green for $0 and amber for a charge would editorialise our own
   pricing, and reads as a warning about the plan a merchant just chose. */
.plan .pmeter{margin-top:12px;padding-top:11px;border-top:1px dashed var(--border-strong);font-size:var(--t-xs);font-weight:500;color:var(--ink);line-height:1.45;}

/* homepage pricing summary — two cards, no switch, no feature lists.
   Narrower than the full grid on purpose: at the width of five plan cards these two
   read as a matrix with three columns missing, rather than as a summary. */
.psum{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:30px auto 0;max-width:min(100%,760px);}
.psum-card{border:1px solid var(--border);border-radius:var(--r-md);padding:26px 24px;background:#fff;}
.psum-label{font-size:var(--t-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);}
.psum-price{margin-top:8px;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;}
.psum-price span{font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:0;}
.psum-blurb{margin-top:10px;font-size:var(--t-sm);color:var(--muted);line-height:1.55;}
/* list-style/padding reset is load-bearing: without it the browser's own 40px
   padding-inline-start pushes the three lines in off the card's text column, and
   they read as floating rather than as part of the card. Same reset as .plan ul. */
.psum-card ul{list-style:none;padding:0;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;}
.psum-card li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);line-height:1.5;}
/* --st-instock, same as .plan li .c — a merchant moving from here to /pricing/ should
   not see the tick change colour between the summary and the cards it summarises. */
.psum-card li .c{flex:0 0 auto;width:15px;height:15px;margin-top:2px;color:var(--st-instock);font-weight:700;}
.psum-card li .c svg{width:15px;height:15px;stroke-width:2.4;}
.psum-facts{margin-top:20px;text-align:center;font-size:var(--t-sm);color:var(--muted);}
.psum-facts .dot{margin:0 10px;opacity:.55;}
@media (max-width:700px){
  .psum{grid-template-columns:1fr;}
  .psum-facts .dot{display:none;}
  .psum-facts span{display:block;}
}

/* group headers */
.plan-group + .plan-group{margin-top:44px;}
.pg-head{display:flex;flex-direction:column;gap:6px;}
.pg-label{font-size:var(--t-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);}
.pg-blurb{font-size:var(--t-sm);color:var(--muted);max-width:62ch;line-height:1.55;}

/* monthly / yearly switch */
.billing-switch{display:inline-flex;gap:4px;padding:4px;margin:30px auto 0;border:1px solid var(--border);border-radius:var(--r-pill);background:#fff;}
.plans-root{display:flex;flex-direction:column;align-items:stretch;}
.plans-root > .billing-switch{align-self:center;}
.bs-opt{border:0;background:none;cursor:pointer;font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--muted);padding:8px 18px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:8px;}
.bs-opt.is-on{background:var(--violet);color:#fff;}
.bs-save{font-size:var(--t-xs);font-weight:500;opacity:.85;}
.bs-opt:not(.is-on) .bs-save{color:var(--orange);opacity:1;}
.bs-note{align-self:center;margin-top:9px;font-size:var(--t-xs);color:var(--muted);text-align:center;}
/* default (no JS / monthly): show monthly, hide yearly */
.plans-root .py{display:none;}
.plans-root.is-yearly .py{display:block;}
.plans-root.is-yearly .pm{display:none;}

/* ---------- monthly order volume ----------
   Drives both Flexible cards, the way the switch above drives both Fixed ones, and on
   the same contract: the entry tier is server-rendered, so /pricing/ states a real price
   with JS off. A card rather than a pill because unlike Monthly/Yearly this control has
   a question to ask, and it has to be noticed BEFORE the price it explains — a merchant
   who reads "$5 / month" and never sees the selector has been quoted the wrong number.

   A native <select>, not a custom listbox: six options, one choice, and it gets a phone's
   own picker and the keyboard behaviour for free. Only the chevron is ours, because
   appearance:none takes the platform one away with the rest of the chrome. */
.volume{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;
  margin-top:26px;padding:22px 26px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);}
.vol-copy{display:flex;flex-direction:column;gap:3px;line-height:1.35;}
.vol-eyebrow{font-size:var(--pill-tag-fs);font-weight:700;letter-spacing:var(--pill-tag-ls);
  text-transform:uppercase;color:var(--orange);}
.vol-q{font-size:var(--t-md);font-weight:700;letter-spacing:-.015em;}
.vol-hint{font-size:var(--t-xs);color:var(--muted);}
.vol-field{display:flex;align-items:center;flex:0 0 auto;}
/* the first group heading sits directly under the panel and had nothing between them,
   so "CORE" read as a caption on the control rather than a heading for the row below */
.volume + .plan-group{margin-top:36px;}
.volume select{font-family:var(--sans);font-size:var(--t-base);font-weight:700;color:var(--ink);
  cursor:pointer;appearance:none;min-width:11.5rem;
  /* 12px, not 11: at 11 the control measured 43px tall, one pixel under the 44px
     minimum touch target. It is the only thing a merchant taps on this page. */
  padding:12px 44px 12px 18px;border:1px solid var(--border-strong);border-radius:var(--r-pill);
  background-color:#fff;background-repeat:no-repeat;background-position:right 17px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23E8562A' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow:var(--sh-sm);transition:border-color .12s ease;}
.volume select:hover{border-color:var(--muted);}
.volume select:focus-visible{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,86,42,.18);}
/* the selector-driven figure. .plan .ph .pprice span is the "/ month" suffix rule — small,
   muted, light — and it would swallow this number whole without an explicit reset. */
.plan .ph .pprice .pnum{font:inherit;color:inherit;letter-spacing:inherit;}
@media (max-width:700px){
  .volume{flex-direction:column;align-items:stretch;gap:14px;padding:18px 18px 20px;}
  .volume select{width:100%;min-width:0;}
}

/* ---------- the add-on card ----------
   Sits in the PRO row, right of PRO Fixed (Andrei, 2026-08-14). It replaces the
   full-width band the add-on used to get below the plans.

   The whole design problem is that the row it sits in is titled PRO, and the add-on is
   not a PRO thing — it pairs with any plan, Free included, and sells on its own. Shared
   position implies shared category, so the card has to break the grouping visually while
   still lining up on the grid:
     · tinted ground and a dashed edge, against the plans' solid white and solid border
     · a neutral tag, top-LEFT — the plans' orange "Limited time deal" tag is top-right
     · a smaller price, written "+$10", so it reads as an increment beside $27, not a rival
     · a ghost CTA that says "add", never "install"
   Styling alone still isn't enough, which is why .pmeter--addon spells the relationship
   out in words. Don't drop that line to tidy the card up. */
/* --surface, not --surface-2: at #FBFAFD the ground was so close to the plans' white that
   the card only read as different once you noticed the dashed edge, which is too late. */
.plan--addon{background:var(--surface);border:1px dashed var(--border-strong);}
.plan--addon .tag{left:20px;right:auto;background:var(--violet);}
.plan--addon .ph .pprice{font-size:1.45rem;}
/* the one line that stops this reading as a third PRO plan — ink, not muted */
.pmeter--addon{color:var(--ink);font-weight:500;}
/* SMS is a conditional usage charge, so it reads as a footnote to the per-order line
   rather than a second headline: no rule above it, muted, and it shares the block. */
.plan .pmeter--sms{margin-top:6px;padding-top:0;border-top:0;color:var(--muted);font-weight:400;}
.plan--addon .btn{margin-top:22px;}

/* ---------- shopify-level tier table ----------
   One row per Shopify subscription level, one column per Timesact version. The billing
   switch above swaps every figure at once, exactly as it does on the cards — which is why
   this is three columns and not five. CORE × PRO × monthly × yearly laid out at once is a
   grid a merchant has to search rather than a row they can read, and it does not fit a
   phone. Both figures are in the markup either way, so monthly is correct with JS off. */
.tier-table{margin-top:44px;}
.tier-table h3{font-size:var(--t-lg);font-weight:700;}
.tt-note{margin-top:8px;font-size:var(--t-xs);color:var(--muted);line-height:1.6;max-width:68ch;}
.tt-scroll{overflow-x:auto;margin-top:16px;}
/* capped well under the 1180px wrap: at full width the two price columns end up stranded
   on the right, a hand-span from the plan name they belong to */
.tier-table table{border-collapse:collapse;width:100%;max-width:760px;min-width:420px;font-size:var(--t-sm);}
.tier-table th,.tier-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);}
.tier-table thead th{font-weight:600;color:var(--muted);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;}
/* version headings carry the brand colour, and both price columns are the same width so
   CORE and PRO compare straight across; the plan column takes whatever is left */
.tier-table thead th + th{color:var(--violet);width:27%;}
.tier-table tbody th{font-weight:500;}
.tier-table td{font-variant-numeric:tabular-nums;font-weight:600;}
.tt-sub{display:block;font-size:var(--t-xs);font-weight:400;text-transform:none;letter-spacing:0;opacity:.8;}

/* Phones: let the table fit instead of scroll. The 420px min-width was survivable when
   the third column was CORE's yearly figure — a nice-to-have you could swipe for. Now the
   third column is PRO, and at 390px exactly that column sat off-screen, so the one thing
   this table was rebuilt to show was the one thing a phone couldn't see. Dropping the
   min-width and tightening the cells fits all three in ~342px; the longest plan names
   wrap to two lines, which is a far better trade than hidden prices. .tt-scroll stays,
   so anything narrower still degrades to a contained scroll rather than breaking out. */
@media (max-width:560px){
  .tier-table table{min-width:0;font-size:var(--t-xs);}
  .tier-table th,.tier-table td{padding:10px 8px;}
  .tier-table thead th + th{width:29%;}
}
@media (max-width:700px){.price-grid--2{grid-template-columns:1fr;}}
.plan ul{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px;flex:1;}
.plan li{font-size:var(--t-sm);display:flex;gap:9px;line-height:1.45;}
.plan li .c{color:var(--st-instock);font-weight:700;flex:0 0 auto;margin-top:1px;}
.plan .btn{margin-top:22px;width:100%;}
.fineprint{margin-top:20px;font-size:var(--t-xs);color:var(--muted);text-align:center;}

/* ---------- final cta (the single brand band) ---------- */
.final{background:linear-gradient(140deg,var(--violet),var(--violet-900));text-align:center;color:#fff;}
.final h2{font-size:var(--t-3xl);color:#fff;max-width:18ch;margin:0 auto;}
.final p{color:var(--on-violet-dim);margin-top:16px;font-size:var(--t-md);}
.final .btns{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap;}

/* ---------- footer ---------- */
footer{background:var(--violet-900);color:var(--on-violet-dim);padding:56px 0 34px;}
.foot-news{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1);}
.foot-news .fn-copy h4{color:#fff;font-size:var(--t-lg);}
.foot-news .fn-copy p{margin-top:6px;font-size:var(--t-sm);color:var(--on-violet-dim);max-width:42ch;}
.fn-form{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap;}
.fn-input{height:46px;width:min(280px,68vw);border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);padding:0 15px;font-family:var(--sans);font-size:var(--t-sm);color:#fff;}
.fn-input::placeholder{color:var(--on-violet-dim);}
.fn-input:focus{outline:none;border-color:var(--orange);background:rgba(255,255,255,.1);}
.fn-done{color:#fff;font-weight:600;font-size:var(--t-sm);}
.fn-err{margin-top:8px;font-size:var(--t-xs);color:#FFC9BA;}
/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
@media (max-width:640px){.foot-news{flex-direction:column;align-items:flex-start;}.fn-form{width:100%;}.fn-input{flex:1;width:auto;}}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px 24px;}.foot-grid>div:first-child{grid-column:1/-1;}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}
footer h5{color:#fff;font-size:var(--t-sm);margin:0 0 14px;font-weight:600;}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
footer a{font-size:var(--t-sm);color:var(--on-violet-dim);}
footer a:hover{color:#fff;}
.foot-bar{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:var(--t-xs);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.foot-brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:1.12rem;letter-spacing:-.035em;}

/* nav active state */
.nav-links a.is-active,.nav-links .nl.is-active{color:var(--ink);font-weight:600;}

/* ---------- experiences hub ---------- */
.xhero{background:linear-gradient(180deg,#FAF7FD,#ffffff 82%);padding:76px 0 86px;position:relative;overflow:hidden;}
/* soft floating brand glow behind the hero */
.xhero::before{content:"";position:absolute;top:-140px;left:50%;width:640px;height:340px;transform:translateX(-50%);background:radial-gradient(circle at 30% 40%,rgba(232,86,42,.10),transparent 60%),radial-gradient(circle at 72% 55%,rgba(61,26,69,.10),transparent 62%);filter:blur(10px);pointer-events:none;}
.xhero .wrap{position:relative;}
.xhero-head{text-align:center;max-width:56ch;margin:0 auto;}
.xhero-head h1{font-size:var(--t-3xl);margin-top:12px;font-weight:800;letter-spacing:-0.038em;}
.xhero-head .lede{margin:20px auto 0;font-size:var(--t-md);}
.xhero .hero-cta{justify-content:center;margin-top:28px;}

/* lifecycle spine — animated signature: one live state travels the lifecycle */
.lifespine{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;margin:54px auto 0;max-width:980px;}
.ls-node{display:flex;align-items:center;}
.ls-pill{display:inline-flex;align-items:center;gap:14px;padding:var(--pill-node-pad);border-radius:var(--r-pill);line-height:1;background:#fff;border:1px solid var(--border);font-size:var(--t-sm);font-weight:600;white-space:nowrap;box-shadow:var(--sh-sm);transition:transform .5s cubic-bezier(.4,.02,.2,1),box-shadow .5s ease,border-color .5s ease;}
.ls-pill .d{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:var(--c);transition:transform .5s ease,box-shadow .5s ease;}
.ls-pill.is-on{border-color:color-mix(in srgb,var(--c) 42%,var(--border));box-shadow:0 16px 32px -12px color-mix(in srgb,var(--c) 55%,transparent);transform:translateY(-3px) scale(1.05);}
.ls-pill.is-on .d{transform:scale(1.28);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent);}
.ls-arrow{color:var(--border-strong);margin:0 8px;flex:0 0 auto;font-weight:700;transition:color .5s ease;}
.ls-arrow.is-lit{color:var(--muted);}
@media (max-width:720px){.lifespine{flex-direction:column;gap:8px;}.ls-arrow{transform:rotate(90deg);margin:4px 0;}}

/* stage sections — alternating tint for rhythm, no hard divider lines */
.xstage{padding:66px 0;}
.xstage--tint{background:var(--surface);}
.xstage-head{display:flex;align-items:flex-start;gap:16px;max-width:64ch;}
.xstage-idx{font-size:var(--t-sm);font-weight:700;font-variant-numeric:tabular-nums;color:#fff;background:var(--stage-c,var(--violet));width:34px;height:34px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 10px 20px -10px color-mix(in srgb,var(--stage-c,var(--violet)) 65%,transparent);}
.xstage-head h2{font-size:var(--t-xl);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.xstage-head .cnt{font-size:var(--pill-chip-fs);font-weight:600;color:var(--stage-c,var(--muted));background:color-mix(in srgb,var(--stage-c,var(--muted)) 12%,#fff);padding:var(--pill-chip-pad);border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.xstage-head .bl{color:var(--muted);font-size:var(--t-sm);margin-top:8px;line-height:1.55;}
.xstage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;}

/* experience card = link: state-colored top accent, icon lift, learn-more slide */
/* Media row: tile in column 1 spanning the card, text stacked in column 2. The middle
   row takes the slack so "Learn more" sits on the baseline of every card in a row. */
a.exp-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:18px;position:relative;overflow:hidden;}
a.exp-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
a.exp-card:hover::before{transform:scaleX(1);}
a.exp-card img{grid-column:1;grid-row:1/span 3;align-self:start;transition:transform .3s ease;}
a.exp-card:hover img{transform:scale(1.08);}
a.exp-card h3,a.exp-card p,a.exp-card .more{grid-column:2;}
a.exp-card .more{align-self:end;justify-self:start;margin-top:14px;font-size:var(--t-sm);font-weight:600;color:var(--orange);display:inline-flex;align-items:center;gap:5px;transition:gap .15s ease;}
a.exp-card:hover .more{gap:9px;}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;transition-delay:var(--d,0ms);}
.reveal.in{opacity:1;transform:none;}

/* work-together band */
.together{text-align:center;max-width:48ch;margin:0 auto;}

@media (max-width:920px){
  .hero-grid,.feat,.price-grid,.stats,.reviews,.pgrid{grid-template-columns:1fr;}
  .exp-grid{grid-template-columns:repeat(2,1fr);}
  .xstage-grid{grid-template-columns:repeat(2,1fr);}
  .feat.rev{direction:ltr;}
  .pcard,.w-form,.w-timer{margin:0 auto;}
  .price-grid .plan.hi{order:-1;}
}
@media (max-width:600px){
  .exp-grid,.xstage-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;}
}
/* ============ experience detail pages (shared across all 12) ============ */
.dt-hero{background:linear-gradient(180deg,#FAF7FD,#ffffff 80%);padding:30px 0 74px;}
.dt-crumb{display:flex;align-items:center;gap:9px;font-size:var(--t-sm);color:var(--muted);margin-bottom:22px;}
.dt-crumb a{color:var(--muted);}
.dt-crumb a:hover{color:var(--ink);}
.dt-crumb .sep{color:var(--border-strong);}
.dt-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
/* The experience's own tile, opening the hero. Big enough to actually read as the
   illustration it is, and it gives the left column a mark to start on rather than
   dropping straight into the badge. */
.dt-hero-ico{display:block;width:80px;height:80px;border-radius:var(--r-md);margin-bottom:20px;}
.dt-badge{display:inline-flex;align-items:center;gap:9px;font-size:var(--pill-lg-fs);font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--border);padding:var(--pill-lg-pad);border-radius:var(--r-pill);line-height:1;box-shadow:var(--sh-sm);}
.dt-badge .d{width:11px;height:11px;border-radius:50%;background:var(--c,var(--orange));}
.dt-hero h1{font-size:var(--t-3xl);font-weight:800;letter-spacing:-.038em;margin-top:18px;}
.dt-hero .lede{margin-top:18px;font-size:var(--t-md);}
.dt-hero .hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;}

/* interactive storefront card */
.sf-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xl);max-width:410px;margin-left:auto;width:100%;}
.sf-media{aspect-ratio:5/4;position:relative;background:linear-gradient(150deg,#efe7f3,#e2d6ea);}
.sf-media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b79cbe;font-weight:700;font-size:.85rem;}
.sf-media .chip{position:absolute;top:15px;left:15px;}
.sf-body{padding:22px;}
.sf-name{font-weight:700;font-size:var(--t-lg);}
.sf-price{color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;}
.sf-lbl{font-size:var(--t-xs);font-weight:600;color:var(--muted);margin-top:16px;}
.dt-seg{position:relative;display:flex;margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:5px;}
.dt-seg .thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--r-sm);background:var(--orange);box-shadow:var(--sh-brand);transition:transform .45s cubic-bezier(.4,.02,.2,1);}
.dt-seg.dep .thumb{transform:translateX(100%);}
.dt-seg .opt{position:relative;z-index:1;flex:1;text-align:center;padding:11px 8px;font-size:var(--t-sm);font-weight:600;color:var(--muted);background:none;border:0;cursor:pointer;font-family:var(--sans);transition:color .35s ease;}
.dt-seg .opt.sel{color:#fff;}
.dt-split{margin-top:14px;display:flex;flex-direction:column;gap:9px;}
.dt-ps{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface-2);}
.dt-ps .k{font-size:var(--t-xs);color:var(--muted);}
.dt-ps .v{font-weight:700;font-variant-numeric:tabular-nums;}
.sf-cta{margin-top:16px;width:100%;padding:14px;border-radius:var(--r-sm);border:0;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:var(--t-sm);color:#fff;background:var(--orange);transition:filter .12s ease;}
.sf-cta:hover{filter:brightness(1.06);}
.sf-timer{margin-top:16px;}
.sf-timer span{font-size:1.3rem;min-width:44px;padding:7px 10px;}

/* section shell */
.dt-sec{padding:72px 0;}
.dt-sec--tint{background:var(--surface);}
.dt-head{max-width:48ch;}
.dt-head h2{font-size:var(--t-2xl);margin-top:12px;}
.dt-head .lede{margin-top:14px;}

/* capabilities bento */
.dt-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;}
.dt-cap{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:22px;box-shadow:var(--sh-md);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.dt-cap:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--border-strong);}
.dt-cap .cico{width:42px;height:42px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c,var(--orange)) 13%,#fff);color:color-mix(in srgb,var(--c,var(--orange)) 78%,var(--ink));margin-bottom:15px;}
.dt-cap .cico svg{width:22px;height:22px;}
.dt-cap h3{font-size:var(--t-md);}
.dt-cap p{font-size:var(--t-sm);color:var(--muted);line-height:1.55;margin-top:7px;}
/* mini-visuals inside caps */
.mini-vr{margin-top:14px;display:flex;flex-direction:column;gap:7px;}
.mini-vr .vr{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--t-sm);}
/* Mock scale: .mini-* and .dm-* are miniature UI illustrations, not page chrome.
   They stay below the pill scale on purpose — normalising them blows out the mocks. */
.mini-vr .vchip{font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);color:#fff;}
.mini-vr .vchip.in{background:var(--st-instock);}
.mini-vr .vchip.pre{background:var(--st-preorder);}
.mini-tag{margin-top:14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);padding:13px 14px;}
.mini-tag .ol{font-size:var(--t-xs);color:var(--muted);}
.mini-tag .ot{display:inline-flex;margin-top:8px;background:var(--st-preorder);color:#fff;font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:8px;}

/* steps */
.dt-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px;counter-reset:step;}
.dt-step{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:22px;position:relative;}
.dt-step .n{width:32px;height:32px;border-radius:var(--r-sm);background:var(--violet);color:#fff;font-weight:700;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-sm);}
.dt-step h3{font-size:var(--t-md);margin-top:14px;}
.dt-step p{font-size:var(--t-sm);color:var(--muted);line-height:1.55;margin-top:7px;}
/* low-fi wireframe mockups on each setup step */
.dt-mock{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;margin-bottom:18px;display:flex;flex-direction:column;gap:9px;min-height:92px;justify-content:center;}
.dm-row,.dm-prow,.dm-field{display:flex;align-items:center;gap:8px;}
.dm-bar{height:7px;border-radius:4px;background:var(--border-strong);flex:1;}
.dm-bar.w60{flex:0 0 55%;}.dm-bar.w50{flex:0 0 48%;}.dm-bar.w40{flex:0 0 38%;}
.dm-dot{width:14px;height:14px;border-radius:4px;flex:0 0 auto;}
.dm-toggle{width:26px;height:15px;border-radius:var(--r-pill);background:var(--border-strong);flex:0 0 auto;position:relative;}
.dm-toggle::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;}
.dm-toggle.on{background:var(--st-instock);}.dm-toggle.on::after{left:13px;}
.dm-thumb{width:22px;height:22px;border-radius:6px;background:var(--border-strong);flex:0 0 auto;}
.dm-pill{font-size:.6rem;font-weight:700;color:#fff;background:var(--st-preorder);padding:3px 8px;border-radius:var(--r-pill);flex:0 0 auto;}
.dm-pill.ghost{background:transparent;color:var(--muted);border:1px solid var(--border-strong);}
.dm-lbl{height:6px;width:32px;border-radius:3px;background:var(--border-strong);flex:0 0 auto;}
.dm-lbl.w30{width:22px;}
.dm-input{height:16px;border-radius:5px;background:#fff;border:1px solid var(--border-strong);flex:1;}
.dm-input.w50{flex:0 0 50%;}
.dm-seg{display:flex;border:1px solid var(--border-strong);border-radius:7px;overflow:hidden;}
.dm-seg-o{flex:1;text-align:center;font-size:.6rem;font-weight:600;color:var(--muted);padding:4px 0;}
.dm-seg-o.on{background:var(--orange);color:#fff;}
.dm-prev{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px;}
.dm-chip{font-size:.58rem;font-weight:700;color:#fff;background:var(--st-preorder);padding:2px 7px;border-radius:6px;flex:0 0 auto;}
.dm-btn{height:14px;border-radius:5px;background:var(--violet);flex:0 0 34%;}
.dm-live{display:inline-flex;align-items:center;gap:6px;font-size:.63rem;font-weight:700;color:var(--st-instock);}
.dm-live-dot{width:7px;height:7px;border-radius:50%;background:var(--st-instock);}
.dm-cta{height:24px;border-radius:8px;background:var(--violet);color:#fff;font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.dm-timer{display:flex;gap:6px;}
.dm-timer span{background:var(--violet);color:#fff;font-size:.62rem;font-weight:800;padding:4px 0;border-radius:6px;min-width:26px;text-align:center;font-variant-numeric:tabular-nums;}
.dm-num{width:34px;height:22px;border-radius:7px;border:1px solid var(--border-strong);background:#fff;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700;color:var(--ink);flex:0 0 auto;}

/* lifecycle placement */
.dt-flow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px;}
.dt-flow a,.dt-flow span.here{display:inline-flex;align-items:center;gap:9px;padding:var(--pill-node-pad);border-radius:var(--r-pill);line-height:1;border:1px solid var(--border);background:#fff;font-size:var(--t-sm);font-weight:600;color:var(--muted);}
.dt-flow a:hover{color:var(--ink);border-color:var(--border-strong);}
.dt-flow .here{color:var(--ink);border-color:color-mix(in srgb,var(--st-preorder) 55%,transparent);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--st-preorder) 55%,transparent);}
.dt-flow .d{width:10px;height:10px;border-radius:50%;}
.dt-flow .ar{color:var(--border-strong);font-weight:700;margin:0;}
.dt-flow-note{text-align:center;max-width:52ch;margin:32px auto 0;color:var(--muted);font-size:var(--t-sm);}
.dt-flow-note a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px;}

/* related experiences — same .exp-card media row as the homepage grid.
   Three across fits the usual three related links in one row. Pre-order has four,
   which would leave a lone orphan card, so that case drops to a balanced 2x2. */
.dt-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;}
.dt-rel--pair{grid-template-columns:repeat(2,1fr);}

/* faq */
.dt-faq{max-width:760px;margin:32px auto 0;display:flex;flex-direction:column;gap:12px;}
.dt-faq details{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:4px 20px;transition:border-color .2s ease,box-shadow .2s ease;}
.dt-faq details[open]{border-color:var(--border-strong);box-shadow:var(--sh-md);}
.dt-faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:600;font-size:var(--t-md);display:flex;justify-content:space-between;align-items:center;gap:16px;}
.dt-faq summary::-webkit-details-marker{display:none;}
.dt-faq summary .plus{flex:0 0 auto;width:22px;height:22px;position:relative;color:var(--orange);}
.dt-faq summary .plus::before,.dt-faq summary .plus::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform .25s ease;}
.dt-faq summary .plus::before{left:0;right:0;top:calc(50% - 1px);height:2px;}
.dt-faq summary .plus::after{top:0;bottom:0;left:calc(50% - 1px);width:2px;}
.dt-faq details[open] summary .plus::after{transform:scaleY(0);}
.dt-faq .ans{padding:0 0 20px;font-size:var(--t-sm);color:var(--muted);line-height:1.65;}

@media (max-width:920px){
  .dt-hero-grid{grid-template-columns:1fr;gap:38px;}
  .sf-card{margin:0 auto;}
  .dt-caps{grid-template-columns:repeat(2,1fr);}
  .dt-steps{grid-template-columns:repeat(2,1fr);}
  .dt-rel{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .dt-caps,.dt-steps,.dt-rel{grid-template-columns:1fr;}
}

/* ---- customer flow demo: product → cart → checkout (up to payment) ---- */
.flow{max-width:860px;margin:34px auto 0;}
.flow-rail{display:flex;align-items:center;justify-content:center;margin-bottom:24px;flex-wrap:wrap;}
.flow-step-btn{display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:var(--t-sm);font-weight:600;color:var(--muted);padding:6px 2px;}
.flow-step-btn .num{width:27px;height:27px;border-radius:50%;border:1.5px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-xs);color:var(--muted);transition:background .3s,border-color .3s,color .3s;}
.flow-step-btn.active{color:var(--ink);}
.flow-step-btn.active .num,.flow-step-btn.done .num{background:var(--orange);border-color:var(--orange);color:#fff;}
.flow-conn{width:46px;height:2px;background:var(--border);margin:0 10px;position:relative;overflow:hidden;border-radius:2px;}
.flow-conn::after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;}
.flow-conn.filled::after{transform:scaleX(1);}

.flow-frame{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-xl);overflow:hidden;}
.flow-chrome{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);}
.flow-chrome .cd{width:11px;height:11px;border-radius:50%;background:var(--border-strong);}
.flow-chrome .u{margin-left:8px;font-size:var(--t-xs);color:var(--muted);}
/* align-items:start keeps each stage at its natural height so the script can size the frame
   to whichever one is showing; without JS the grid row falls back to the tallest, as before. */
.flow-stage-wrap{position:relative;display:grid;align-items:start;transition:height .4s ease;}
@media (prefers-reduced-motion:reduce){.flow-stage-wrap{transition:none;}}
.flow-stage{grid-area:1/1;padding:26px;opacity:0;transform:translateX(16px);pointer-events:none;transition:opacity .4s ease,transform .4s ease;}
.flow-stage.act{opacity:1;transform:none;pointer-events:auto;}
.flow-legend{text-align:center;margin-top:16px;font-size:var(--t-xs);color:var(--muted);}
.flow-restart{color:var(--orange);font-weight:600;cursor:pointer;}

/* the ✦ Timesact tag marking each app-added element */
.ts-tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--pill-mark-fs);font-weight:700;letter-spacing:var(--pill-tag-ls);text-indent:var(--pill-tag-indent);text-transform:uppercase;color:var(--orange);background:color-mix(in srgb,var(--orange) 12%,#fff);border:1px solid color-mix(in srgb,var(--orange) 26%,#fff);padding:var(--pill-mark-pad);border-radius:var(--r-pill);white-space:nowrap;line-height:1;vertical-align:baseline;}
.ts-tag::before{content:"✦";font-size:1.05em;text-indent:0;}

.flow-cta{margin-top:18px;width:100%;padding:14px;border-radius:var(--r-sm);border:0;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:var(--t-sm);color:#fff;background:var(--st-preorder);transition:filter .12s ease;}
.flow-cta:hover{filter:brightness(1.06);}
.flow-cta:disabled{background:var(--border-strong);color:#fff;cursor:not-allowed;filter:none;}
/* The confirmation tick inside a CTA. Sized here, because icons.js glyphs carry a
   viewBox and no intrinsic size — unboxed, one fills whatever it is dropped into. */
.btn-check{width:17px;height:17px;vertical-align:-3px;margin-left:7px;}
/* advance buttons pulse + arrow so shoppers know they drive the demo */
@keyframes flowCtaPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-preorder) 45%,transparent);}70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--st-preorder) 0%,transparent);}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-preorder) 0%,transparent);}}
.flow-cta[data-go],.flow-cta[data-pop]{animation:flowCtaPulse 2s ease-out infinite;}
.flow-cta[data-go]::after,.flow-cta[data-pop]::after{content:"→";margin-left:9px;display:inline-block;transition:transform .18s ease;}
.flow-cta[data-go]:hover::after,.flow-cta[data-pop]:hover::after{transform:translateX(4px);}
@media (prefers-reduced-motion:reduce){.flow-cta[data-go],.flow-cta[data-pop]{animation:none;}}
.flow-caption{text-align:center;max-width:60ch;margin:20px auto 0;font-size:var(--t-sm);color:var(--ink);line-height:1.6;}

/* product stage */
.fp{display:grid;grid-template-columns:148px 1fr;gap:20px;align-items:start;}
.fp-media{aspect-ratio:1;border-radius:var(--r-md);background:linear-gradient(150deg,#efe7f3,#e2d6ea);position:relative;}
.fp-media .chip{position:absolute;top:10px;left:10px;}
.fp-tagrow{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap;}
.fp-name{font-weight:700;font-size:var(--t-lg);}
.fp-price{color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px;}
.fp-desc{margin-top:12px;font-size:var(--t-sm);color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;line-height:1.5;}

/* cart stage */
.fc-line{display:flex;gap:14px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--border);}
.fc-thumb{width:56px;height:56px;border-radius:var(--r-sm);background:linear-gradient(150deg,#efe7f3,#e2d6ea);flex:0 0 auto;}
.fc-nm{font-weight:600;font-size:var(--t-sm);}
.fc-plan{font-size:var(--t-xs);color:var(--muted);margin-top:3px;}
.fc-labels{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap;align-items:center;}
.fc-label{font-size:.7rem;font-weight:700;color:#fff;background:var(--st-preorder);padding:4px 10px;border-radius:7px;}
.fc-pr{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--t-sm);}
.fc-tot{display:flex;justify-content:space-between;margin-top:15px;font-size:var(--t-sm);}
.fc-tot .v{font-weight:700;font-variant-numeric:tabular-nums;}
.fc-alert{margin-top:16px;border:1px solid color-mix(in srgb,var(--st-preorder) 32%,var(--border));background:color-mix(in srgb,var(--st-preorder) 6%,#fff);border-radius:var(--r-sm);padding:15px;}
.fc-alert h5{font-size:var(--t-sm);margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.fc-alert p{font-size:var(--t-xs);color:var(--muted);margin-top:7px;line-height:1.55;}
.fc-alert .ok{margin-top:12px;font-size:var(--t-xs);font-weight:600;padding:8px 15px;border-radius:8px;border:1px solid var(--border-strong);background:#fff;cursor:pointer;font-family:var(--sans);}
.fc-alert .ok:hover{border-color:var(--muted);}

/* the cart alert as it really behaves — a pop-up over the product page, agreed before add-to-cart */
.flow-pop{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:22px;background:color-mix(in srgb,var(--ink) 32%,transparent);animation:flowPopIn .18s ease-out;}
.flow-pop[hidden]{display:none;} /* flex declaration above otherwise beats the [hidden] attribute */
.flow-pop .fc-alert{margin-top:0;width:min(430px,100%);background:#fff;box-shadow:var(--sh-xl);padding:19px;}
@keyframes flowPopIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.flow-pop{animation:none;}}

/* checkout stage */
.fk-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;font-size:var(--t-sm);margin-top:11px;}
.fk-item{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.fk-nm2{font-weight:600;}
.fk-amt{font-variant-numeric:tabular-nums;flex:0 0 auto;margin-left:auto;}
/* Checkout's product thumb. .fk-item is the flexible middle, so the amount is pushed
   right by margin-left:auto rather than by space-between, which the thumb would break. */
.fk-thumb{align-self:flex-start;}
.fk-row .fk-item{flex:1;}
.fk-plan{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:10px;font-size:var(--t-xs);color:var(--muted);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;}
.fk-sep{height:1px;background:var(--border);margin:15px 0;}
.fk-split{border:1px solid color-mix(in srgb,var(--st-preorder) 32%,var(--border));border-radius:var(--r-sm);padding:16px;background:var(--surface);}
.fk-split .lead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px;}
.fk-split .big{display:flex;justify-content:space-between;align-items:baseline;}
.fk-split .big .k{font-weight:600;font-size:var(--t-sm);}
.fk-split .big .v{font-weight:800;font-size:var(--t-xl);font-variant-numeric:tabular-nums;}
.fk-split .bal{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--muted);margin-top:9px;padding-top:9px;border-top:1px dashed var(--border-strong);}
.fk-note{font-size:var(--t-xs);color:var(--muted);text-align:center;margin-top:14px;line-height:1.5;}

/* notify flow success + countdown element */
.notify-done{display:flex;gap:13px;align-items:flex-start;margin-top:10px;background:color-mix(in srgb,var(--st-back) 8%,#fff);border:1px solid color-mix(in srgb,var(--st-back) 26%,var(--border));border-radius:var(--r-sm);padding:16px;}
.notify-done[hidden]{display:none;} /* flex declaration above otherwise beats the [hidden] attribute */
.notify-done .nd-ic{width:30px;height:30px;border-radius:50%;background:var(--st-back);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
/* Inheriting the body's 1.6 left this two-line confirmation looking double-spaced. */
.notify-done b{font-size:var(--t-sm);line-height:1.4;display:block;}
.flow-count{margin-top:8px;display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;}
.flow-count span{background:var(--violet);color:#fff;font-weight:800;font-size:1.5rem;padding:8px 12px;border-radius:var(--r-sm);min-width:48px;text-align:center;}
.flow-count i{color:var(--border-strong);font-style:normal;font-weight:700;}

@media (max-width:560px){
  .flow-conn{width:26px;margin:0 6px;}
  .fp{grid-template-columns:1fr;}
  .flow-stage{padding:20px;}
  .flow-stage[style*="grid"]{grid-template-columns:1fr !important;}
}

/* ===== homepage demo store: cart button, toast, slide-in drawer ===== */
.demo-top{align-items:center;}
.cart-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:var(--pill-lg-pad);line-height:1;font-family:var(--sans);font-weight:600;font-size:var(--t-sm);color:var(--ink);cursor:pointer;box-shadow:var(--sh-sm);transition:transform .12s ease,border-color .12s ease;}
.cart-btn:hover{border-color:var(--muted);}
.cart-btn svg{width:19px;height:19px;}
.cart-badge{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--orange);color:#fff;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;transition:transform .3s cubic-bezier(.3,1.6,.5,1);}
.cart-badge.bump{transform:scale(1.45);}
.cart-badge.empty{background:var(--border-strong);}
.demo-hint{margin-top:14px;font-size:var(--t-xs);color:var(--muted);display:inline-flex;align-items:center;gap:8px;}
.demo-hint svg{width:15px;height:15px;flex:0 0 auto;}

/* toast */
.toast-wrap{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-left:3px solid var(--st-instock);border-radius:var(--r-sm);padding:12px 15px;box-shadow:0 24px 50px -24px rgba(61,26,69,.5);min-width:250px;max-width:330px;transform:translateX(120%);opacity:0;transition:transform .4s cubic-bezier(.2,.9,.3,1),opacity .3s ease;}
.toast.show{transform:none;opacity:1;}
.toast .tt{width:38px;height:38px;border-radius:var(--r-sm);background:linear-gradient(150deg,#efe7f3,#e2d6ea);flex:0 0 auto;overflow:hidden;position:relative;}
.toast .tt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.toast .tx{font-size:var(--t-sm);line-height:1.35;}
.toast .tx b{font-weight:700;}
.toast .tx .vc{color:var(--orange);font-weight:600;cursor:pointer;font-size:var(--t-xs);}
.toast--info{border-left-color:var(--st-notify);}
.toast--soon{border-left-color:var(--st-soon);}

/* drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(28,14,33,.42);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;z-index:130;}
.drawer-overlay.open{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:#fff;box-shadow:-30px 0 70px -30px rgba(61,26,69,.5);transform:translateX(100%);transition:transform .38s cubic-bezier(.4,.02,.2,1);z-index:131;display:flex;flex-direction:column;}
.drawer.open{transform:none;}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:19px 22px;border-bottom:1px solid var(--border);}
.drawer-head b{font-size:var(--t-md);}
.drawer-x{background:none;border:0;font-size:1.05rem;cursor:pointer;color:var(--muted);line-height:1;}
.drawer-x:hover{color:var(--ink);}
.drawer-body{flex:1;overflow-y:auto;padding:20px 22px;}

/* cart items */
.ci{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--border);align-items:flex-start;}
.ci-thumb{width:56px;height:56px;border-radius:var(--r-sm);background:linear-gradient(150deg,#efe7f3,#e2d6ea);flex:0 0 auto;position:relative;}
.ci-thumb .cchip{position:absolute;top:-7px;left:-7px;font-size:.58rem;font-weight:700;color:#fff;padding:2px 7px;border-radius:6px;white-space:nowrap;}
.ci-nm{font-weight:600;font-size:var(--t-sm);}
.ci-plan{font-size:var(--t-xs);color:var(--muted);margin-top:2px;}
.ci-pr{font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--t-sm);flex:0 0 auto;}
.ci-pr .was{text-decoration:line-through;color:var(--muted);opacity:.72;font-weight:500;margin-right:3px;}
.ci-rm{background:none;border:0;color:var(--muted);font-size:var(--t-xs);cursor:pointer;padding:0;margin-top:7px;text-decoration:underline;font-family:var(--sans);}
.ci-rm:hover{color:var(--ink);}
.cart-empty{text-align:center;color:var(--muted);padding:36px 6px;font-size:var(--t-sm);line-height:1.65;}
.cart-empty .ce-ic{width:52px;height:52px;margin:0 auto 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--st-preorder);}
.cart-empty .ce-ic svg{width:24px;height:24px;}
.cart-empty .ce-lead{font-size:var(--t-md);font-weight:700;color:var(--ink);margin-bottom:8px;}
.cart-empty b{color:var(--ink);}
.cart-empty .btn{margin-top:20px;}
.mixed-note{margin-top:16px;font-size:var(--t-xs);color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;line-height:1.5;}
.cart-sub{display:flex;justify-content:space-between;font-size:var(--t-sm);}
.cart-sub b{font-variant-numeric:tabular-nums;}
.drawer-cta{margin-top:18px;width:100%;padding:14px;border-radius:var(--r-sm);border:0;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:var(--t-sm);color:#fff;background:var(--violet);transition:background .12s;}
.drawer-cta:hover{background:var(--violet-700);}

/* checkout view */
.ck-back{background:none;border:0;color:var(--muted);font-size:var(--t-sm);cursor:pointer;padding:0;margin-bottom:14px;font-family:var(--sans);}
.ck-back:hover{color:var(--ink);}
.ck-split{border:1px solid color-mix(in srgb,var(--st-preorder) 30%,var(--border));border-radius:var(--r-sm);padding:15px;background:var(--surface);margin:12px 0;}
.ck-split .big{display:flex;justify-content:space-between;align-items:baseline;}
.ck-split .big .v{font-weight:800;font-size:var(--t-lg);font-variant-numeric:tabular-nums;}
.ck-split .bal{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-xs);color:var(--muted);margin-top:9px;padding-top:9px;border-top:1px dashed var(--border-strong);}
.ck-lock{text-align:center;padding:24px 18px;border:1px dashed var(--border-strong);border-radius:var(--r-md);background:var(--surface-2);margin-top:10px;}
.ck-lock .ic{color:var(--violet);display:flex;justify-content:center;}
.ck-lock .ic svg{width:30px;height:30px;}
.ck-lock h4{margin-top:8px;font-size:var(--t-md);}
.ck-lock p{margin-top:8px;font-size:var(--t-sm);color:var(--muted);line-height:1.55;}
.ck-lock .btn{margin-top:16px;}

@media (max-width:560px){.toast-wrap{left:14px;right:14px;bottom:14px;}.toast{max-width:none;}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto;}}

/* "At a glance" spec list on experience detail pages. A real <dl> — the key/value pairing
   is semantic, not decorative, which is the point: it's what makes these facts extractable.
   Two columns on desktop, one on mobile; the rule between rows does the visual work so it
   stays legible without boxing every pair. */
.dt-specs{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:0 34px;
  border-top:1px solid var(--border);}
.dt-spec{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--border);align-items:baseline;}
.dt-spec dt{font-size:var(--t-xs);font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;text-indent:.04em;}
.dt-spec dd{margin:0;font-size:var(--t-sm);color:var(--ink);font-weight:500;line-height:1.45;}
@media (max-width:820px){
  .dt-specs{grid-template-columns:1fr;gap:0;}
  .dt-spec{grid-template-columns:1fr;gap:3px;padding:11px 0;}
}

/* ---------- live demo-store embed (experience detail, section 2) ----------
   Replaces the stylised flow mock as the primary artefact: the real product page
   from /demo/, running the merchant's own Timesact config, in a browser frame you
   can scroll and click. The annotated walkthrough moves behind a <details>. */
.live{margin-top:30px;}
.live-frame{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sh-lg);background:#fff;}
.live-chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--border);}
.live-chrome .cd{width:10px;height:10px;border-radius:50%;background:var(--border-strong);flex:0 0 auto;}
.live-chrome .u{flex:1;margin-left:9px;font-size:var(--t-xs);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.live-open{font-size:var(--t-xs);font-weight:600;color:var(--orange);text-decoration:none;white-space:nowrap;}
.live-frame iframe{display:block;width:100%;height:760px;border:0;background:#fff;}
.live-note{margin-top:14px;font-size:var(--t-sm);color:var(--muted);line-height:1.6;max-width:70ch;}
.live-note a{color:var(--orange);font-weight:600;}
.annot{margin-top:26px;border-top:1px solid var(--border);padding-top:18px;}
.annot summary{cursor:pointer;font-size:var(--t-sm);font-weight:600;color:var(--muted);list-style:none;}
.annot summary::-webkit-details-marker{display:none;}
.annot summary::before{content:"▸ ";}
.annot[open] summary::before{content:"▾ ";}
.annot summary:hover{color:var(--ink);}
@media (max-width:700px){.live-frame iframe{height:600px;}}

/* ============================================================================
   blog.css — the new site's design system, applied to WordPress.
   Served with global.css as /blog-theme.css and injected by the cutover Worker.

   READ THIS BEFORE EDITING.

   These rules land on a page Divi has already styled with its own 824 KB
   stylesheet, so two things are true here that are not true anywhere else on
   the site:

   1. SPECIFICITY IS THE WHOLE GAME. Divi's rules are class-scoped
      (`.et_pb_text_inner p`), so global.css's bare-element rules (`p{margin:0}`)
      LOSE to Divi inside its own modules. That is mostly a mercy — it means
      importing global.css does not flatten the article. But it also means every
      rule below has to be at least as specific as Divi's to take effect.

   2. THE MARKUP IS NOT OURS. Everything targeted here is Divi output, and the
      article bodies come from `pipelines/wordpress/wp_publish.py`, which emits
      a deliberately narrow set: et_pb_heading for H2s, et_pb_text for prose,
      et_pb_toggle for the five FAQs, et_pb_code for the JSON-LD. If that
      publisher changes its shortcodes, this file needs revisiting.

   Structure of a post, for orientation:
     header.et-l--header   <- replaced by the Worker with the real site nav
     #et-main-area
       .et-l--body         <- Divi Theme Builder tb-242831: title, meta, image
       .et_pb_section_0    <- the article itself, from wp_publish.py
     footer.et-l--footer   <- replaced by the Worker with the real site footer
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Repairs — global.css bare-element rules that must not reach WP content.

   global.css owns the whole document everywhere else on the site, so it sets
   `p{margin:0}` and `a{color:inherit;text-decoration:none}` and lets components
   put the spacing back. On a Divi page there are no such components. Divi wins
   on specificity in most places, but not all, so these are asserted explicitly
   rather than left to chance.
   --------------------------------------------------------------------------- */
/* Divi ships a bare `p{padding-bottom:1em}`. It does not conflict with a margin,
   it STACKS with it — so setting margin alone doubles every paragraph gap.
   Measured in Divi's style-static.min.css, not assumed. */
#et-main-area p { margin: 0 0 1.15em; padding-bottom: 0; }
#et-main-area ul,
#et-main-area ol { margin: 0 0 1.15em; padding-left: 1.35em; }
#et-main-area li { margin: 0 0 .5em; }
#et-main-area h1,
#et-main-area h2,
#et-main-area h3,
#et-main-area h4,
#et-main-area h5 { margin: 0; }

/* ---------------------------------------------------------------------------
   2. Page frame — put the article on the site's measure.

   Divi rows are 80% wide up to 1080px, which on a text page reads as an
   over-wide, under-padded slab. The site's own measure is --wrap (1180px) with
   24px gutters, and long-form text wants to be narrower still.
   --------------------------------------------------------------------------- */
#et-main-area { background: var(--page); }

/* Two measures, because the blog has two jobs. A listing wants the site's full
   --wrap so a 3-up card grid has room; an article wants a prose measure. Both
   were 760px in the first pass, which crushed the index cards to ~230px and
   wrapped every card title over three lines. */
#et-main-area .et_pb_row {
  width: 100%;
  max-width: var(--wrap);
  padding-left: 24px;
  padding-right: 24px;
}
body.single-post #et-main-area .et_pb_row { max-width: 760px; }

#et-main-area .et_pb_section { padding: 0; background: transparent; }
#et-main-area .et_pb_section.et_pb_section_0 { padding-bottom: 72px; }

/* The Theme Builder body template — post title, byline, featured image. */
.et-l--body .et_pb_section:first-child { padding-top: 56px; }

/* ---------------------------------------------------------------------------
   3. Typography — the site's scale, applied to Divi's modules.
   --------------------------------------------------------------------------- */
#et-main-area,
#et-main-area .et_pb_text_inner,
#et-main-area .et_pb_toggle_content {
  font-family: var(--sans);
  color: var(--ink);
  font-size: var(--t-base);
  line-height: 1.7;
  letter-spacing: -0.006em;
}

/* Post title (H1) — the site's hero-adjacent scale, not Divi's default. */
#et-main-area h1,
#et-main-area .et_pb_title_container h1 {
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: .5rem;
}

/* Section headings. wp_publish.py emits these as et_pb_heading modules, so the
   module wrapper needs the spacing — a bare h2 rule would sit inside a box that
   still has Divi's own margins. */
#et-main-area .et_pb_heading,
#et-main-area .et_pb_module_heading { margin: 0; }
#et-main-area .et_pb_heading_container { margin: 2.6rem 0 .9rem; }
#et-main-area .et_pb_heading_container h2,
#et-main-area .et_pb_module_heading,
#et-main-area h2 {
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
#et-main-area h3 {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.024em;
  margin: 2rem 0 .7rem;
  color: var(--ink);
}

#et-main-area .et_pb_text_inner strong { font-weight: 600; color: var(--ink); }

/* Byline row. Divi renders it as .et_pb_title_meta_container; the site has no
   equivalent element, so this is the one piece of genuinely new design here. */
#et-main-area .et_pb_title_meta_container,
#et-main-area .post-meta {
  font-size: var(--t-sm);
  color: var(--muted);
  margin-bottom: 2rem;
  padding-bottom: 0;   /* Divi targets this element by name with padding-bottom:1em */
}
#et-main-area .et_pb_title_meta_container a,
#et-main-area .post-meta a { color: var(--muted); border: 0; }
#et-main-area .et_pb_title_meta_container a:hover { color: var(--orange); }

/* ---------------------------------------------------------------------------
   4. Links — orange, underlined in prose only.

   Deliberately scoped to running text: the same rule applied blind would also
   repaint the byline, the pagination and every card title on the index.
   --------------------------------------------------------------------------- */
#et-main-area .et_pb_text_inner a,
#et-main-area .et_pb_toggle_content a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--orange) 38%, transparent);
  transition: text-decoration-color .12s ease;
}
#et-main-area .et_pb_text_inner a:hover,
#et-main-area .et_pb_toggle_content a:hover {
  text-decoration-color: var(--orange);
}

/* ---------------------------------------------------------------------------
   5. Inline code and tables — the site has no prose equivalents, so these are
   built from the same tokens rather than invented.
   --------------------------------------------------------------------------- */
#et-main-area code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .1em .38em;
  color: var(--violet-700);
}

#et-main-area table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0 0 1.6em;
  font-size: var(--t-sm);
}
#et-main-area thead th {
  background: var(--surface);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}
#et-main-area th,
#et-main-area td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
#et-main-area tbody tr:last-child td { border-bottom: 0; }

/* Wide tables must scroll inside their own box rather than widening the page. */
#et-main-area .et_pb_text_inner { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   6. Featured image — the site's card treatment.
   --------------------------------------------------------------------------- */
#et-main-area .et_pb_image_wrap,
#et-main-area .et_pb_image_wrap img {
  border-radius: var(--r-md);
  width: 100%;
}
#et-main-area .et_pb_image { margin-bottom: 2.4rem; }

/* ---------------------------------------------------------------------------
   7. The five FAQs — Divi toggles, restyled as the site's cards.
   --------------------------------------------------------------------------- */
#et-main-area .et_pb_toggle {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 0;
  margin: 0 0 10px;
}
#et-main-area .et_pb_toggle_title {
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  padding: 16px 52px 16px 20px;
  margin: 0;
  cursor: pointer;
}
#et-main-area .et_pb_toggle_title:before {
  color: var(--orange);
  right: 20px;
  left: auto;
  top: 20px;
}
#et-main-area .et_pb_toggle_content { padding: 0 20px 18px; color: var(--muted); }
#et-main-area .et_pb_toggle_open { border-color: var(--border-strong); }

/* ---------------------------------------------------------------------------
   8. Blog index — the post cards and the featured slider.
   --------------------------------------------------------------------------- */
#et-main-area .et_pb_post {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
#et-main-area .et_pb_post:hover {
  box-shadow: var(--sh-md);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
#et-main-area .et_pb_post .entry-title { font-size: var(--t-md); line-height: 1.3; }
#et-main-area .et_pb_post .entry-title a { color: var(--ink); }
#et-main-area .et_pb_post .entry-title a:hover { color: var(--orange); }
#et-main-area .et_pb_post .post-content { color: var(--muted); font-size: var(--t-sm); }

/* The featured post slider — the single most visible piece of the old identity
   left on the blog.

   The old brand blue is NOT on the slide. It is on `.et_pb_slide_overlay_container`,
   an element that paints OVER the slide, and the rule lives in the *deferred*
   stylesheet (et-core-unified-…-deferred-….min.css) which loads after this file.
   Styling the slide alone therefore looks correct in the CSS and changes nothing
   on screen — which is exactly what the first attempt did.

   Found by sampling the rendered pixel (#488cc9) and grepping all four of Divi's
   generated bundles for it, rather than reading the markup and guessing. */
#et-main-area .et_pb_post_slider .et_pb_slide .et_pb_slide_overlay_container,
#et-main-area .et_pb_post_slider .et_pb_slide {
  background-color: var(--violet) !important;
  background-image: none !important;
}
#et-main-area .et_pb_post_slider { border-radius: var(--r-lg); overflow: hidden; }
#et-main-area .et_pb_post_slider .et_pb_slide_description .et_pb_slide_title,
#et-main-area .et_pb_post_slider .et_pb_slide_description .et_pb_slide_title a { color: #fff; }
#et-main-area .et_pb_post_slider .et_pb_slide_content,
#et-main-area .et_pb_post_slider .post-meta,
#et-main-area .et_pb_post_slider .post-meta a { color: var(--on-violet-dim); }
#et-main-area .et_pb_post_slider .et-pb-controllers .et-pb-active-control { background-color: var(--orange); }

/* Cards in the grid are equal height, so a short excerpt does not leave a
   ragged row — the same rule the site's own card grids rely on. */
#et-main-area .et_pb_blog_grid .et_pb_salvattore_content > div { display: flex; flex-direction: column; }
#et-main-area .et_pb_blog_grid .et_pb_post { display: flex; flex-direction: column; height: 100%; }

/* Divi's "Read More" and any button module take the site's primary button. */
#et-main-area .et_pb_button,
#et-main-area .more-link {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-sm);
  background: var(--orange);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 12px 22px;
  box-shadow: var(--sh-brand);
  transition: filter .12s ease;
}
#et-main-area .et_pb_button:hover,
#et-main-area .more-link:hover { filter: brightness(1.06); background: var(--orange); }
#et-main-area .et_pb_button:after { display: none; }

/* ---------------------------------------------------------------------------
   9. Chrome the Worker injects.

   The nav is sticky on the site. Divi also ships sticky-element JS
   (et_pb_sticky_module on its own header), but that header is removed before
   this CSS applies, so there is nothing to collide with.
   --------------------------------------------------------------------------- */
body { background: var(--page); }

/* Divi and Max Mega Menu both reserve space for the header they no longer own. */
#page-container { padding-top: 0 !important; margin-top: 0 !important; }

/* The cookie-notice plugin renders its own bar. It is the last piece of old
   chrome a reader sees, so it takes the site's tokens too. */
#cookie-notice .cookie-notice-container {
  font-family: var(--sans);
  font-size: var(--t-sm);
}
#cookie-notice #cn-notice-text { color: var(--on-violet); }
#cookie-notice .cn-set-cookie,
#cookie-notice .cn-more-info {
  background: var(--orange) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--sans);
  font-weight: 600;
  padding: 7px 16px !important;
}
#cookie-notice { background: var(--violet-900) !important; }

@media (max-width: 980px) {
  #et-main-area .et_pb_row { max-width: 100%; }
}