/* ==========================================================================
   Zon Staff — part 2
   Mega menu, pinned card deck, denser dashboard, sub page components.
   Loaded after styles.css.
   ========================================================================== */

/* ---------- nav with mega menus ---------- */

.nav-item{
  position:relative;
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 13px; border-radius:var(--r-pill);
  font-size:14.6px; font-weight:500; color:var(--ink-2);
  background:transparent; border:0; cursor:pointer;
  transition:color .24s var(--ease), background .24s var(--ease);
}
.nav-item:hover,.nav-item.open{ color:var(--ink); background:var(--paper-2); }
.nav-item .chev{ width:11px; height:11px; opacity:.55; transition:transform .3s var(--ease); }
.nav-item.open .chev{ transform:rotate(180deg); }

.mega{
  position:fixed; left:50%; top:calc(var(--nav-h) - 4px);
  transform:translateX(-50%) translateY(-10px);
  width:min(900px, calc(100vw - 40px));
  z-index:81;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  padding:16px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s var(--ease), transform .32s var(--ease-out), visibility .26s;
}
.mega.show{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }

.mega-grid{ display:grid; grid-template-columns:1.6fr .9fr; gap:16px; }
.mega-cols{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.mega-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; border-radius:var(--r-sm);
  transition:background .22s var(--ease), transform .3s var(--ease-out);
}
.mega-item:hover{ background:var(--paper-2); transform:translateX(2px); }
.mega-item .mi{
  width:34px; height:34px; flex:none; border-radius:10px;
  background:var(--accent-lo); color:var(--accent-deep);
  display:grid; place-items:center;
  transition:background .22s var(--ease), color .22s var(--ease);
}
.mega-item:hover .mi{ background:var(--accent); color:#fff; }
.mega-item .mi svg{ width:16px; height:16px; }
.mega-item b{ display:block; font-size:13.8px; font-weight:600; letter-spacing:-.02em; }
.mega-item span{ display:block; font-size:12.4px; color:var(--muted); margin-top:2px; line-height:1.45; }

.mega-promo{
  border-radius:var(--r-md); padding:22px;
  background:linear-gradient(158deg, var(--ink), #16221e);
  color:#fff;
  display:flex; flex-direction:column; justify-content:space-between; gap:18px;
  position:relative; overflow:hidden;
}
.mega-promo::after{
  content:""; position:absolute; inset:auto -30% -60% auto; width:230px; height:230px;
  background:radial-gradient(closest-side, rgba(15,157,110,.42), transparent 70%);
}
.mega-promo > *{ position:relative; z-index:1; }
.mega-promo .promo-title{ font-size:15.5px; font-weight:650; letter-spacing:-.026em; }
.mega-promo p{ font-size:12.8px; color:rgba(255,255,255,.62); margin-top:7px; line-height:1.5; }
.mega-promo .btn{ --bg:#fff; --fg:var(--ink); --bd:#fff; height:38px; font-size:13.4px; align-self:flex-start; }
.mega-promo .btn:hover{ --bg:var(--accent); --fg:#fff; --bd:var(--accent); }

@media (max-width:860px){ .mega{ display:none; } }

/* drawer accordions */
.drawer-group{ border-bottom:1px solid var(--line); }
.drawer-group > button{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:14px 4px; background:transparent; border:0; cursor:pointer;
  font-size:20px; font-weight:550; letter-spacing:-.03em; text-align:left; color:inherit;
}
.drawer-group > button svg{ width:15px; height:15px; opacity:.5; transition:transform .3s var(--ease); }
.drawer-group.open > button svg{ transform:rotate(180deg); }
.drawer-sub{ overflow:hidden; height:0; transition:height .35s var(--ease); }
.drawer-sub > div{ padding-bottom:12px; display:flex; flex-direction:column; }
.nav-drawer .drawer-sub a{ font-size:15px; font-weight:450; color:var(--muted); padding:9px 4px; border-bottom:0; }

/* ---------- browser chrome + denser dashboard ---------- */

.app.framed{ grid-template-rows:auto minmax(0,1fr); }
.app.framed .app-side{ grid-row:2; grid-column:1; }
.app.framed .app-main{ grid-row:2; grid-column:2; }

.app-chrome{
  grid-column:1 / -1; grid-row:1;
  display:flex; align-items:center; gap:10px;
  padding:9px 14px;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.app-chrome .dots{ display:flex; gap:5px; }
.app-chrome .dots i{ width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block; }
.app-chrome .url{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-inline:auto; padding:4px 14px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--line);
  font-size:10.6px; color:var(--muted);
}
.app-chrome .url svg{ width:10px; height:10px; }
.app-chrome .spacer{ width:44px; flex:none; }

.side-store{
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; margin-bottom:12px;
  border:1px solid var(--line); border-radius:11px; background:#fff;
}
.side-store .ic{ width:26px; height:26px; border-radius:8px; background:var(--accent-lo); color:var(--accent-deep); display:grid; place-items:center; flex:none; }
.side-store .ic svg{ width:14px; height:14px; }
.side-store b{ display:block; font-size:11.8px; font-weight:650; letter-spacing:-.02em; }
.side-store span{ display:block; font-size:10px; color:var(--muted-2); }

.side-foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }

.stat-row.four{ grid-template-columns:repeat(4,1fr); }

/* below the sidebar breakpoint the main column has to move back to column 1,
   otherwise it creates an implicit second track and the mock overflows */
@media (max-width:860px){
  .app.framed .app-main{ grid-column:1; }
  .app-chrome .spacer{ display:none; }
}
@media (max-width:700px){
  .stat-row.four{ grid-template-columns:repeat(2,1fr); }
  .app-top .app-search{ display:none; }
  .app-chrome .url{ font-size:9.4px; padding:4px 10px; }
}

.gauge{ display:flex; align-items:center; gap:13px; }
.gauge svg{ width:64px; height:64px; flex:none; }
.gauge .ring-bg{ fill:none; stroke:var(--paper-2); stroke-width:7; }
.gauge .ring-fg{ fill:none; stroke:var(--accent); stroke-width:7; stroke-linecap:round; transform:rotate(-90deg); transform-origin:center; }
.gauge .val{ font-size:22px; font-weight:650; letter-spacing:-.035em; line-height:1; }
.gauge .lbl{ font-size:10.6px; color:var(--muted); margin-top:4px; }

.sat-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; }
.sat-row + .sat-row{ border-top:1px solid var(--line); }
.sat-row b{ font-size:11.4px; font-weight:600; }
.sat-row em{ font-style:normal; font-size:10.2px; color:var(--muted-2); display:block; }
.sat-stars{ display:flex; gap:2px; }
.sat-stars svg{ width:10px; height:10px; color:var(--amber); }

.tl{ display:flex; flex-direction:column; gap:10px; }
.tl-item{ display:flex; gap:10px; }
.tl-item .bar{ width:3px; border-radius:2px; background:var(--accent); flex:none; }
.tl-item .bar.amber{ background:var(--amber); }
.tl-item .bar.grey{ background:var(--line-2); }
.tl-item b{ display:block; font-size:11.4px; font-weight:600; letter-spacing:-.015em; }
.tl-item span{ display:block; font-size:10.2px; color:var(--muted-2); margin-top:2px; }
.tl-item em{ font-style:normal; font-size:9.6px; font-weight:650; color:var(--muted); }

/* ---------- pinned card deck ---------- */

.deck-ix{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(30px,5vw,68px); align-items:start; }
.deck-aside{ position:sticky; top:118px; }
.deck-aside .lede{ margin-top:20px; }
.deck-steps{ margin-top:30px; display:flex; flex-direction:column; gap:2px; }
.deck-step{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--r-sm);
  font-size:14.4px; font-weight:550; color:var(--muted);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.deck-step .n{
  width:23px; height:23px; flex:none; border-radius:50%;
  border:1px solid var(--line-2); display:grid; place-items:center;
  font-size:10.6px; font-weight:700; font-variant-numeric:tabular-nums;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.deck-step.on{ background:var(--paper-2); color:var(--ink); }
.deck-step.on .n{ background:var(--accent); border-color:var(--accent); color:#fff; }

.deck{ display:flex; flex-direction:column; gap:40px; }
.dcard{
  position:sticky; top:calc(110px + var(--i) * 16px); z-index:var(--i);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--sh-lg);
  padding:28px 28px 30px;
}
.dcard-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.dcard-ic{
  width:44px; height:44px; border-radius:14px 14px 14px 5px; flex:none;
  display:grid; place-items:center;
  background:var(--accent-lo); color:var(--accent-deep);
}
.dcard-ic.amber{ background:var(--amber-lo); color:#a8760a; }
.dcard-ic.ink{ background:var(--paper-2); color:var(--ink); }
.dcard-ic svg{ width:20px; height:20px; }
.dcard-n{ font-size:12px; font-weight:700; letter-spacing:.09em; color:var(--muted-2); font-variant-numeric:tabular-nums; }
.dcard h3{ font-size:clamp(20px,2.3vw,25px); letter-spacing:-.032em; }
.dcard > p{ color:var(--muted); font-size:14.6px; margin-top:10px; max-width:54ch; line-height:1.58; }
.dcard .meta{ margin-top:18px; display:flex; flex-wrap:wrap; gap:7px; }
.dcard .meta span{
  font-size:12px; font-weight:600; color:var(--ink-2);
  background:var(--paper-2); border:1px solid var(--line);
  padding:5px 11px; border-radius:var(--r-pill);
}
.dcard .mock{ margin-top:22px; border-radius:var(--r-sm); }

@media (max-width:960px){
  .deck-ix{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .deck-aside{ position:static; }
  .deck-steps{ display:none; }
}
@media (max-width:640px){
  .dcard{ position:static; padding:22px 20px 24px; }
  .deck{ gap:16px; }
}

/* ---------- sub page hero ---------- */

.page-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + 76px) 0 70px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.page-hero .hero-grid-bg{
  mask-image:radial-gradient(96% 110% at 42% 0%, #000, transparent 74%);
  -webkit-mask-image:radial-gradient(96% 110% at 42% 0%, #000, transparent 74%);
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero .section-head{ max-width:740px; }
.page-hero .h-display{ font-size:clamp(2.3rem,4.6vw,3.5rem); }
.crumb{ font-size:12.6px; font-weight:600; color:var(--muted-2); margin-bottom:18px; display:flex; align-items:center; gap:7px; }
.crumb a{ color:var(--muted); transition:color .24s var(--ease); }
.crumb a:hover{ color:var(--accent-deep); }
.crumb svg{ width:11px; height:11px; opacity:.5; }
.page-hero .hero-cta{ margin-top:30px; }

/* ---------- feature detail sections ---------- */

.fsec{ display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:clamp(34px,5vw,64px); align-items:center; scroll-margin-top:110px; }
.fsec + .fsec{ margin-top:110px; }
.fsec.flip .fsec-visual{ order:-1; }
.fsec h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-top:20px; }
.fsec > div > p{ color:var(--muted); font-size:1.02rem; margin-top:16px; line-height:1.62; max-width:52ch; }
.fsec ul{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.fsec ul li{ display:flex; gap:10px; font-size:14.8px; color:var(--ink-2); line-height:1.5; }
.fsec ul svg{ width:15px; height:15px; color:var(--accent); flex:none; margin-top:3px; }
.fsec .btn{ margin-top:28px; }
.fsec-visual .mock{ border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-md); }
@media (max-width:900px){
  .fsec{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .fsec.flip .fsec-visual{ order:0; }
  .fsec + .fsec{ margin-top:70px; }
}

/* ---------- stat band ---------- */

.stat-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat-band > div{
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
  padding:26px 24px;
}
.stat-band .big{ font-size:clamp(2rem,3.4vw,2.7rem); font-weight:650; letter-spacing:-.035em; line-height:1; }
.stat-band .cap{ font-size:13.4px; color:var(--muted); margin-top:10px; line-height:1.45; }
@media (max-width:860px){ .stat-band{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .stat-band{ grid-template-columns:minmax(0,1fr); } }

/* ---------- before / after ---------- */

.vs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vs-card{ border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; background:#fff; }
.vs-card.good{ background:var(--ink); border-color:var(--ink); color:#fff; }
.vs-card h3{ font-size:1.1rem; letter-spacing:-.028em; }
.vs-card .tagl{ font-size:11.6px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); margin-bottom:12px; }
.vs-card.good .tagl{ color:rgba(255,255,255,.44); }
.vs-card ul{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.vs-card li{ display:flex; gap:11px; font-size:14.6px; line-height:1.5; color:var(--ink-2); }
.vs-card.good li{ color:rgba(255,255,255,.86); }
.vs-card li svg{ width:15px; height:15px; flex:none; margin-top:3px; color:var(--muted-2); }
.vs-card.good li svg{ color:var(--accent); }
@media (max-width:820px){ .vs-grid{ grid-template-columns:minmax(0,1fr); } }

/* ---------- resources ---------- */

.res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.res-card{
  border:1px solid var(--line); border-bottom-color:var(--line-2); border-radius:18px; background:#fff;
  padding:26px 24px 24px; display:flex; flex-direction:column;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
}
.res-card:hover{ transform:translateY(-2px); box-shadow:var(--sh-sm); border-color:var(--line-2); }
.res-card h3{ font-size:1rem; letter-spacing:-.008em; margin-top:16px; }
.res-card p{ color:var(--muted); font-size:14.2px; margin-top:9px; line-height:1.56; flex:1; }
.res-card .go{ margin-top:20px; font-size:13.4px; font-weight:650; color:var(--accent-deep); display:inline-flex; align-items:center; gap:7px; }
.res-card .go svg{ width:14px; height:14px; transition:transform .35s var(--ease); }
.res-card:hover .go svg{ transform:translateX(4px); }
@media (max-width:900px){ .res-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .res-grid{ grid-template-columns:minmax(0,1fr); } }

.guide-list{ border-top:1px solid var(--line); }
.guide{
  display:flex; align-items:center; gap:20px;
  padding:22px 4px; border-bottom:1px solid var(--line);
  transition:background .25s var(--ease), padding-inline .3s var(--ease);
}
.guide:hover{ background:var(--paper); padding-inline:14px; }
.guide .num{ font-size:12px; font-weight:700; color:var(--muted-2); font-variant-numeric:tabular-nums; width:26px; flex:none; }
.guide b{ font-size:15.6px; font-weight:600; letter-spacing:-.024em; display:block; }
.guide span{ font-size:13.4px; color:var(--muted); display:block; margin-top:3px; }
.guide .time{ margin-left:auto; font-size:12.4px; color:var(--muted-2); font-weight:600; flex:none; }

.code-card{
  background:var(--ink); border-radius:14px; padding:24px 26px;
  font-family:ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;
  font-size:12.8px; line-height:1.85; color:rgba(255,255,255,.82);
  overflow-x:auto;
}
.code-card .k{ color:#7fe3bd; }
.code-card .s{ color:#f4b740; }
.code-card .c{ color:rgba(255,255,255,.36); }

/* ---------- contact ---------- */

.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(34px,5vw,62px); align-items:start; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-size:12.8px; font-weight:650; color:var(--ink-2); letter-spacing:-.01em; }
/* bare form controls carry a ~233px intrinsic width, which becomes the auto
   minimum of each grid track and pushes the page wider than the viewport */
.field input,.field textarea,.field select{
  min-width:0;
  font:inherit; font-size:14.6px; color:var(--ink);
  padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:#fff; outline:none;
  transition:border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,157,110,.14);
}
.field textarea{ resize:vertical; min-height:126px; }
.field-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-card{ border:1px solid var(--line); border-bottom-color:var(--line-2); border-radius:20px; background:#fff; padding:30px; box-shadow:var(--sh-sm); }
.form-note{ font-size:12.4px; color:var(--muted); margin-top:14px; }

.contact-item{ display:flex; gap:14px; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-item:first-of-type{ border-top:1px solid var(--line); }
.contact-item .ic{ width:38px; height:38px; border-radius:11px; background:var(--accent-lo); color:var(--accent-deep); display:grid; place-items:center; flex:none; }
.contact-item .ic svg{ width:17px; height:17px; }
.contact-item b{ display:block; font-size:14.4px; font-weight:600; letter-spacing:-.02em; }
.contact-item span{ display:block; font-size:13.6px; color:var(--muted); margin-top:3px; }

/* ---------- booking band ---------- */

.book-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(34px,5vw,58px);
  align-items:start;
}
.book-list{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.book-list li{ display:flex; gap:10px; font-size:14.8px; color:var(--ink-2); line-height:1.5; }
.book-list svg{ width:15px; height:15px; color:var(--accent); flex:none; margin-top:3px; }

.book-facts{ margin-top:26px; }
/* the plate goes neutral here, otherwise the band adds three more green squares */
.book-facts .contact-item .ic{ background:var(--paper-2); color:var(--ink-2); }
/* the booking band is the last thing in its column, so a rule under the final
   row has nothing beneath it to separate and just reads as a dangling line */
.book-facts .contact-item:last-child{ border-bottom:0; padding-bottom:0; }

.book-embed{
  position:relative; min-height:700px;
  border:1px solid var(--line); border-bottom-color:var(--line-2);
  border-radius:20px; background:#fff; overflow:hidden;
  box-shadow:var(--sh-sm);
}
/* Calendly injects an iframe into the widget div. No iframe means the script
   never ran, so collapse the reserved box and show the link instead. CSS only,
   so it covers JavaScript being off, the script being blocked, and a failed
   request, where a noscript block would only catch the first. */
.book-embed .calendly-inline-widget:not(:has(iframe)){ height:0 !important; min-height:0; }
.book-embed:has(.calendly-inline-widget iframe) .book-fallback{ display:none; }
.book-fallback{ padding:34px 28px; }
.book-fallback b{ display:block; font-size:15.4px; font-weight:650; letter-spacing:-.024em; }
.book-fallback p{ font-size:14px; color:var(--muted); margin-top:8px; line-height:1.56; max-width:38ch; }
.book-fallback .btn{ margin-top:18px; }

@media (max-width:960px){
  .book-grid{ grid-template-columns:minmax(0,1fr); }
  .book-embed{ min-height:640px; }
}

@media (max-width:860px){ .contact-grid{ grid-template-columns:minmax(0,1fr); } .field-row{ grid-template-columns:minmax(0,1fr); } }

/* ---------- store badges ----------
   Black pill, small line over a big line, mark on the left. Built in markup so
   it stays vector at any size and picks up the site's own type. */

.badge-row{ display:flex; flex-wrap:wrap; gap:12px; }
.badge{
  display:inline-flex; align-items:center; gap:11px;
  height:58px; padding:0 20px 0 17px;
  background:#000; color:#fff;
  border:1px solid rgba(255,255,255,.24);
  border-radius:11px;
  transition:transform .34s var(--ease), box-shadow .34s var(--ease), background .3s var(--ease);
}
.badge:hover{ transform:translateY(-2px); background:#141414; box-shadow:0 10px 24px rgba(0,0,0,.24); }
.badge.shopify:hover > svg{ --bag-knock:#141414; }
.badge > svg{ width:27px; height:27px; flex:none; color:#fff; }
.badge .bt{ display:block; }
.badge .bt small{ display:block; font-size:10.6px; font-weight:500; letter-spacing:.005em; line-height:1.15; color:rgba(255,255,255,.94); }
.badge .bt b{ display:block; font-size:18px; font-weight:600; letter-spacing:-.035em; line-height:1.18; margin-top:1px; }
.badge.shopify .bt small{ font-size:9.8px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.badge.shopify .bt b{ font-size:17.4px; }
.badge.light{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.badge.light > svg{ color:var(--ink); }
.badge.light .bt small{ color:var(--muted); }
.badge.light:hover{ background:#fff; border-color:var(--ink); box-shadow:var(--sh-sm); }

/* ---------- integration logos ----------
   Bare marks with nothing behind them, two rows where the second runs wider,
   matching the reference comp. */

.int-rows{ display:flex; flex-direction:column; align-items:center; gap:34px; margin-top:54px; }
.int-row{ display:flex; justify-content:center; align-items:center; gap:clamp(24px,4.4vw,54px); flex-wrap:wrap; }
.int-chip{ display:grid; place-items:center; transition:transform .4s var(--ease-out); }
.int-chip:hover{ transform:translateY(-6px) scale(1.1); }
.int-chip svg{ width:60px; height:60px; }
@media (max-width:900px){ .int-chip svg{ width:50px; height:50px; } }
@media (max-width:700px){
  .int-rows{ gap:24px; }
  .int-row{ gap:24px; }
  .int-chip svg{ width:42px; height:42px; }
}
@media (max-width:420px){
  .int-row{ gap:18px; }
  .int-chip svg{ width:34px; height:34px; }
}

@media (max-width:640px){
  .badge-row{ width:100%; }
  .badge{ flex:1 1 100%; justify-content:flex-start; }
  .cta-btns .badge-row{ flex-direction:column; }
}

/* ---------- a day on the floor ---------- */

.day{
  position:relative;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:60px;
}
.day::before{
  content:""; position:absolute; left:10%; right:10%; top:31px; height:2px;
  background:linear-gradient(to right, var(--accent-lo-2), var(--accent-lo-2) 62%, var(--line-2));
  border-radius:2px;
}
.day-step{ text-align:center; padding:0 14px; position:relative; }
.day-ic{
  width:62px; height:62px; margin:0 auto 20px;
  border-radius:50%; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; box-shadow:var(--sh-sm);
  position:relative; z-index:1;
  transition:transform .45s var(--ease-out), border-color .3s var(--ease);
}
.day-step:hover .day-ic{ transform:translateY(-4px); border-color:var(--accent); }
.day-ic svg{ width:25px; height:25px; color:var(--accent-deep); }
.day-ic.amber svg{ color:#a8760a; }
.day-t{ font-size:11.4px; font-weight:700; letter-spacing:.1em; color:var(--muted-2); font-variant-numeric:tabular-nums; }
.day-step h3{ font-size:1rem; margin-top:9px; letter-spacing:-.008em; }
.day-step p{ font-size:13.6px; color:var(--muted); margin-top:8px; line-height:1.52; }
@media (max-width:900px){
  .day{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 0; }
  .day::before{ display:none; }
}
@media (max-width:520px){
  .day{ grid-template-columns:minmax(0,1fr); gap:30px; }
}

/* ---------- scene illustrations ---------- */

.scenes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:52px; }
.scene{
  border:1px solid var(--line); border-bottom-color:var(--line-2); border-radius:18px; background:#fff;
  padding:0 0 28px; overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.scene:hover{ border-color:var(--line-2); }
.scene-art{
  background:linear-gradient(168deg, var(--accent-lo), #fff 78%);
  border-bottom:1px solid var(--line);
  padding:26px 26px 0;
}
.scene-art.amber{ background:linear-gradient(168deg, var(--amber-lo), #fff 78%); }
.scene-art.grey{ background:linear-gradient(168deg, var(--paper-2), #fff 78%); }
.scene-art svg{ width:100%; height:auto; display:block; }

/* ---------- scene animation ----------
   Every loop is transform or opacity only, and everything is parked until the
   card scrolls into view, so nothing burns frames off screen. */

.sc [class^="s1-"], .sc [class^="s2-"], .sc [class^="s3-"]{
  animation-play-state:paused;
}
.scene.playing .sc [class^="s1-"],
.scene.playing .sc [class^="s2-"],
.scene.playing .sc [class^="s3-"]{
  animation-play-state:running;
}
.sc [class^="s1-"], .sc [class^="s2-"], .sc [class^="s3-"]{
  transform-box:fill-box;
}

/* scene one, the register */
.s1-row{ transform-origin:left center; animation:rowIn 3.6s cubic-bezier(.16,1,.3,1) infinite; opacity:0; }
.s1-row:nth-of-type(2){ animation-delay:.18s; }
.s1-row:nth-of-type(3){ animation-delay:.36s; }
.s1-row-b{ transform-origin:left center; animation:rowIn 3.6s cubic-bezier(.16,1,.3,1) .5s infinite; opacity:0; }
.s1-row-c{ transform-origin:left center; animation:rowIn 3.6s cubic-bezier(.16,1,.3,1) .62s infinite; opacity:0; }
.s1-check{ transform-origin:center; animation:popIn 3.6s cubic-bezier(.34,1.56,.64,1) .9s infinite; opacity:0; }
.s1-ripple{ transform-origin:center; animation:ripple 3.6s ease-out 1s infinite; opacity:0; }
.s1-led{ transform-origin:center; animation:blink 3.6s ease-in-out infinite; }

@keyframes rowIn{
  0%   { opacity:0; transform:translateX(-8px) }
  14%  { opacity:1; transform:translateX(0) }
  78%  { opacity:1; transform:translateX(0) }
  90%,100%{ opacity:0; transform:translateX(-8px) }
}
@keyframes popIn{
  0%   { opacity:0; transform:scale(.4) }
  12%  { opacity:1; transform:scale(1) }
  76%  { opacity:1; transform:scale(1) }
  88%,100%{ opacity:0; transform:scale(.4) }
}
@keyframes ripple{
  0%   { opacity:.55; transform:scale(1) }
  30%  { opacity:0;   transform:scale(2.1) }
  100% { opacity:0;   transform:scale(2.1) }
}
@keyframes blink{
  0%,44%,100%{ opacity:1 } 50%,58%{ opacity:.25 }
}

/* scene two, the phone */
.s2-wave{ transform-origin:center; animation:waveOut 2.6s ease-out infinite; opacity:0; }
.s2-wave.w2{ animation-delay:.3s; }
.s2-wave.w3{ animation-delay:.6s; }
.s2-dot{ transform-origin:center; animation:pulseDot 2.6s ease-in-out infinite; }
.s2-card{ transform-origin:center; animation:cardUp 3.6s cubic-bezier(.16,1,.3,1) infinite; opacity:0; }
.s2-card.c2{ animation-delay:.22s; }
.s2-tick{ transform-origin:left center; animation:tickRun 3.6s linear infinite; }

@keyframes waveOut{
  0%   { opacity:0;  transform:scale(.7) }
  25%  { opacity:.9; transform:scale(1) }
  70%,100%{ opacity:0; transform:scale(1.25) }
}
@keyframes pulseDot{
  0%,100%{ transform:scale(1);   opacity:1 }
  50%    { transform:scale(1.35); opacity:.75 }
}
@keyframes cardUp{
  0%   { opacity:0; transform:translateY(10px) }
  16%  { opacity:1; transform:translateY(0) }
  80%  { opacity:1; transform:translateY(0) }
  92%,100%{ opacity:0; transform:translateY(10px) }
}
@keyframes tickRun{
  0%,100%{ transform:scaleX(.25) } 50%{ transform:scaleX(1) }
}

/* scene three, the back office */
.s3-bar{ transform-origin:bottom center; animation:growBar 3.2s cubic-bezier(.16,1,.3,1) infinite; }
.s3-bar.b2{ animation-delay:.14s; }
.s3-bar.b3{ animation-delay:.28s; }
.s3-row{ transform-origin:left center; animation:rowIn 3.2s cubic-bezier(.16,1,.3,1) .4s infinite; opacity:0; }
.s3-row.r2{ animation-delay:.58s; }
.s3-steam{ transform-origin:center bottom; animation:steam 2.8s ease-out infinite; opacity:0; }
.s3-steam.st2{ animation-delay:.7s; }

@keyframes growBar{
  0%   { transform:scaleY(.18) }
  30%  { transform:scaleY(1) }
  70%  { transform:scaleY(1) }
  100% { transform:scaleY(.18) }
}
@keyframes steam{
  0%   { opacity:0;  transform:translateY(4px) scaleY(.6) }
  30%  { opacity:.85; transform:translateY(-2px) scaleY(1) }
  100% { opacity:0;  transform:translateY(-12px) scaleY(1.1) }
}

@media (prefers-reduced-motion:reduce){
  .sc [class^="s1-"], .sc [class^="s2-"], .sc [class^="s3-"]{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}
.scene-body{ padding:24px 26px 0; }
.scene-body h3{ font-size:1rem; letter-spacing:-.008em; }
.scene-body p{ font-size:14.3px; color:var(--muted); margin-top:9px; line-height:1.56; }
@media (max-width:900px){ .scenes{ grid-template-columns:minmax(0,1fr); } }

/* ---------- legal prose ---------- */

.legal-grid{ display:grid; grid-template-columns:216px minmax(0,1fr); gap:clamp(30px,5vw,68px); align-items:start; }
.prose{ max-width:74ch; }
.prose h2{ font-size:1.32rem; letter-spacing:-.03em; margin-top:46px; scroll-margin-top:110px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.02rem; letter-spacing:-.024em; margin-top:28px; }
.prose p{ color:var(--muted); font-size:15.4px; line-height:1.72; margin-top:14px; }
.prose ul{ margin:14px 0 0; padding-left:20px; color:var(--muted); font-size:15.4px; line-height:1.72; }
.prose li{ margin-top:8px; }
.prose a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
.legal-meta{ font-size:13px; color:var(--muted-2); margin-bottom:34px; }
.toc{ position:sticky; top:112px; }
.toc b{ font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-2); }
.toc ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.toc a{ font-size:13.8px; color:var(--muted); transition:color .24s var(--ease); }
.toc a:hover{ color:var(--accent-deep); }
@media (max-width:860px){ .legal-grid{ grid-template-columns:minmax(0,1fr); } .toc{ position:static; } }

/* ---------- feature rail ----------
   The six features used to alternate left and right down the page, which meant
   the reader lost the set as soon as they scrolled past one. The rail stays put
   instead: it holds the six names and highlights whichever pane is nearest the
   top, so the whole feature set stays legible from one position. */

.frail-block{
  display:grid;
  grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);
  gap:clamp(36px,5vw,64px);
  align-items:start;
}
.frail{ position:sticky; top:calc(var(--nav-h) + 34px); }
.frail-list{ display:flex; flex-direction:column; margin-top:30px; }
.frail-btn{
  position:relative; display:flex; align-items:center; gap:11px;
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:11px 0 11px 16px;
  font-size:14.6px; font-weight:550; letter-spacing:-.02em; color:var(--muted);
  transition:color .3s var(--ease);
}
.frail-btn::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px; width:2px;
  border-radius:2px; background:var(--accent);
  transform:scaleY(0); transform-origin:center;
  transition:transform .4s var(--ease);
}
.frail-btn svg{ width:16px; height:16px; flex:none; opacity:.55; transition:opacity .3s var(--ease); }
/* the week rail numbers its steps instead of showing an icon */
.frail-btn .n{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--paper-2); color:var(--muted);
  font-size:11.4px; font-weight:650;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.frail-btn.on .n{ background:var(--accent); color:#fff; }
.frail-btn:hover{ color:var(--ink); }
.frail-btn.on{ color:var(--accent-deep); }
.frail-btn.on svg{ opacity:1; }
.frail-btn.on::before{ transform:scaleY(1); }

.fpanes{ display:flex; flex-direction:column; gap:clamp(56px,7vw,86px); }
.fpane h2{ font-size:clamp(1.55rem,2.4vw,2rem); letter-spacing:-.03em; }
.fpane h3{ font-size:clamp(1.35rem,2vw,1.7rem); letter-spacing:-.03em; margin-top:18px; }
.fpane-top{ display:flex; align-items:center; justify-content:space-between; }
.fpane-ic{
  width:42px; height:42px; border-radius:14px 14px 14px 5px;
  background:var(--accent-lo); color:var(--accent-deep); display:grid; place-items:center;
}
.fpane-ic.amber{ background:var(--amber-lo); color:#a8760a; }
.fpane-ic.ink{ background:var(--paper-2); color:var(--ink); }
.fpane-ic svg{ width:19px; height:19px; }
.fpane-n{ font-size:13px; font-weight:650; color:var(--muted-2); letter-spacing:.04em; }
.fpane .meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.fpane .meta span{
  font-size:12.4px; font-weight:550; color:var(--muted);
  padding:5px 11px; border:1px solid var(--line); border-radius:var(--r-pill);
}
.fpane p{ color:var(--muted); font-size:15.2px; line-height:1.62; margin-top:12px; max-width:52ch; }
.fpane ul{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.fpane li{ display:flex; gap:10px; font-size:14.4px; color:var(--ink-2); line-height:1.5; }
.fpane li svg{ width:15px; height:15px; color:var(--accent); flex:none; margin-top:3px; }
.fpane-visual{
  margin-top:26px; border:1px solid var(--line); border-bottom-color:var(--line-2);
  border-radius:var(--r-md); background:var(--paper); padding:18px; overflow:hidden;
}

@media (max-width:1000px){
  .frail-block{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .frail{ position:static; }
  .frail-list{ flex-direction:row; flex-wrap:wrap; gap:4px; margin-top:22px; }
  .frail-btn{ width:auto; padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-pill); }
  .frail-btn::before{ display:none; }
  .frail-btn.on{ border-color:var(--accent); }
}

/* ---------------------------------------------------------------------------
   pricing, the lifetime deal, redemption and what's new

   Everything below is for the AppSumo pages. The tier panel borrows .plan from
   styles.css, so a change to a plan card lands on both price panels at once.
   --------------------------------------------------------------------------- */

.price-panel.tri{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.plan-was{
  font-size:11.8px; color:var(--muted-2); margin-top:4px;
}
.plan.featured .plan-was{ color:rgba(255,255,255,.5); }

/* the band under the monthly plans that points at the lifetime deal */
.price-alt{
  margin-top:26px; padding:22px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
}
.price-alt b{ display:block; margin-top:12px; font-size:17px; letter-spacing:-.014em; }
.price-alt p{ color:var(--muted); font-size:14.2px; margin-top:6px; max-width:58ch; line-height:1.56; }
.price-alt .btn{ flex:none; }

/* the three tier summary on pricing.html */
.ltd-mini{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:44px; }
.ltd-card{
  border:1px solid var(--line); border-bottom-color:var(--line-2);
  border-radius:var(--r-md); background:#fff; padding:22px 24px;
}
.ltd-card b{ font-size:13px; font-weight:650; color:var(--muted-2); letter-spacing:.01em; }
.ltd-card .amt{ display:block; font-size:32px; font-weight:650; letter-spacing:-.035em; margin-top:10px; }
.ltd-card em{ display:block; font-style:normal; font-size:13.2px; color:var(--muted); margin-top:8px; }

/* the deal terms checklist */
.terms-list{
  list-style:none; margin:44px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 32px;
}
.terms-list li{ display:flex; gap:11px; font-size:14.8px; color:var(--ink-2); line-height:1.5; }
.terms-list svg{ width:16px; height:16px; color:var(--accent); flex:none; margin-top:3px; }

.note-card{
  margin-top:44px; padding:26px 28px;
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-md); background:var(--paper);
}
.note-card b{ font-size:15.4px; letter-spacing:-.01em; }
.note-card p{ color:var(--muted); font-size:14.6px; line-height:1.65; margin-top:10px; max-width:74ch; }

/* redemption steps: the .guide row, without the link behaviour */
.rstep-list{ border-top:1px solid var(--line); }
.rstep{
  display:flex; align-items:center; gap:18px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.rstep .num{
  font-size:12px; font-weight:700; color:var(--muted-2);
  font-variant-numeric:tabular-nums; width:26px; flex:none;
}
.rstep > div{ flex:1; }
.rstep b{ display:block; font-size:15.4px; letter-spacing:-.012em; }
.rstep span{ display:block; color:var(--muted); font-size:14px; margin-top:5px; line-height:1.5; }
.rstep .time{
  flex:none; font-size:12px; color:var(--muted-2); font-weight:600;
  padding:5px 11px; border:1px solid var(--line); border-radius:var(--r-pill);
}

/* what's new */
.log-list{ border-top:1px solid var(--line); }
.log{
  display:flex; align-items:flex-start; gap:20px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.log-date{
  flex:none; width:120px; font-size:13px; font-weight:650; color:var(--muted-2);
  padding-top:2px;
}
.log > div{ flex:1; }
.log b{ display:block; font-size:16px; letter-spacing:-.014em; }
.log span{ display:block; color:var(--muted); font-size:14.4px; margin-top:6px; line-height:1.6; max-width:70ch; }
.chip{
  display:inline-block; flex:none; font-size:11.6px; font-weight:650;
  color:var(--accent-deep); background:var(--accent-lo);
  padding:5px 11px; border-radius:var(--r-pill); letter-spacing:.01em;
}
.res-card .chip{ align-self:flex-start; }

@media (max-width:1000px){
  .price-panel.tri{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ltd-mini{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .terms-list{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .price-panel.tri{ grid-template-columns:minmax(0,1fr); }
  .ltd-mini{ grid-template-columns:minmax(0,1fr); }
  .price-alt{ flex-direction:column; align-items:flex-start; }
  .log{ flex-wrap:wrap; gap:10px 16px; }
  .log-date{ width:auto; }
  .rstep .time{ display:none; }
}