/* ==========================================================================
   Marketing pages (home, faq, about, contact)
   Loaded only by app/Views/layouts/marketing.php. Uses the --ink/--green/
   --porcelain etc. tokens added to tokens.css — do not reuse --color-*
   app-shell tokens here, and do not use these tokens outside this layout.
   ========================================================================== */

body.marketing{
  margin:0;background:var(--porcelain);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased
}
body.marketing html{scroll-behavior:smooth}
html:has(body.marketing){scroll-behavior:smooth;scroll-padding-top:146px}
body.marketing img{display:block;max-width:100%}
body.marketing a{color:var(--green-dark)}
body.marketing .wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 24px}

/* ---------- type ---------- */
body.marketing .display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.005em}
body.marketing h1.display{font-size:clamp(2.6rem,7.2vw,5rem)}
body.marketing h2.display{font-size:clamp(1.9rem,4.2vw,3rem);margin:0 0 .35em}
body.marketing h3{font-size:1.06rem;font-weight:700;margin:0 0 .4em;letter-spacing:-.01em}
body.marketing p{margin:0 0 1em}
body.marketing .lede{font-size:clamp(1.05rem,1.9vw,1.28rem);color:var(--ink-2);line-height:1.55}
body.marketing .eyebrow{
  font:600 .72rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-dark);display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.1em
}
body.marketing .eyebrow::before{content:"";width:26px;height:2px;background:var(--amber);display:block}
body.marketing .muted{color:var(--ink-3)}
body.marketing .small{font-size:.88rem;line-height:1.5}
body.marketing .tiny{font-size:.78rem;line-height:1.5;color:var(--ink-3)}

/* ---------- buttons ---------- */
body.marketing .btn{
  display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  font:600 .95rem/1 var(--body);letter-spacing:.01em;
  padding:15px 24px;border-radius:4px;text-decoration:none;border:1.5px solid transparent;
  transition:transform .14s ease, background .14s ease, box-shadow .14s ease;
}
body.marketing .btn--primary{background:var(--green);color:#fff;box-shadow:0 8px 20px -12px rgba(31,138,76,.9)}
body.marketing .btn--primary:hover{background:var(--green-dark);transform:translateY(-1px)}
body.marketing .btn--ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
body.marketing .btn--ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.6)}
body.marketing .btn--onDark{background:var(--amber);color:#20180A}
body.marketing .btn--onDark:hover{background:#F0B32C;transform:translateY(-1px)}
body.marketing :focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}

/* ---------- header ---------- */
body.marketing .site-head{
  position:sticky;top:0;z-index:50;background:rgba(242,245,241,.92);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)
}
body.marketing .site-head__in{display:flex;align-items:center;gap:20px;height:130px}
body.marketing .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
body.marketing .brand img{width:102px;height:102px;border-radius:18px}
body.marketing .brand b{font-family:var(--display);font-size:1.12rem;letter-spacing:.02em;text-transform:uppercase;font-weight:400}
body.marketing .site-head nav{display:flex;gap:22px;align-items:center}
body.marketing .site-head nav a{
  font:500 .9rem/1 var(--body);color:var(--ink-2);text-decoration:none;padding:6px 0;
  border-bottom:2px solid transparent
}
body.marketing .site-head nav a:hover{color:var(--ink);border-color:var(--amber)}
body.marketing .site-head nav a[aria-current="page"]{color:var(--ink);border-color:var(--green)}
body.marketing .site-head .btn{padding:11px 18px}
@media(max-width:880px){body.marketing .site-head nav a:not(.btn){display:none}}
@media(max-width:560px){
  body.marketing .brand img{width:52px;height:52px;border-radius:10px}
  body.marketing .site-head__in{height:76px}
  body.marketing .rail{top:76px}
  html:has(body.marketing){scroll-padding-top:92px}
}

/* ---------- hero ---------- */
body.marketing .hero{padding:72px 0 0;background:
  radial-gradient(1200px 420px at 15% -10%, #E4EEE6 0%, rgba(228,238,230,0) 70%),
  var(--porcelain)}
body.marketing .hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:end}
body.marketing .hero h1{margin:0 0 .35em}
body.marketing .hero h1 em{font-style:normal;color:var(--green)}
body.marketing .hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
body.marketing .hero__facts{border-left:2px solid var(--line-strong);padding-left:20px;margin-bottom:6px}
body.marketing .hero__facts dt{font:600 .7rem/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
body.marketing .hero__facts dd{margin:0 0 16px;font-size:.95rem;color:var(--ink-2)}
body.marketing .hero__facts dd:last-child{margin-bottom:0}
@media(max-width:900px){body.marketing .hero{padding-top:44px}body.marketing .hero__grid{grid-template-columns:1fr;gap:32px;align-items:start}}

/* ---------- signature: the wrap band ---------- */
body.marketing .band{margin:56px 0 0;padding-bottom:64px}
body.marketing .band__stage{position:relative;background:#0F2A1D;border-radius:6px 6px 0 0;padding:26px 26px 0}
body.marketing .band__ruler{
  display:flex;justify-content:space-between;align-items:center;
  font:600 .68rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);
  padding-bottom:12px
}
body.marketing .band__ruler span{display:flex;align-items:center;gap:8px}
body.marketing .band__ruler i{display:block;width:32px;height:1px;background:rgba(255,255,255,.3)}
body.marketing .band__img{position:relative;aspect-ratio:2400/1120;overflow:hidden;border-radius:3px}
body.marketing .band__img img{width:100%;height:100%;object-fit:cover}
body.marketing .tag{
  position:absolute;font:600 .68rem/1.35 var(--body);letter-spacing:.09em;text-transform:uppercase;
  padding:6px 9px;border-radius:3px;backdrop-filter:blur(3px);white-space:nowrap
}
body.marketing .tag--logo{top:5%;left:2.4%;width:19%;height:30%;border:1.5px dashed rgba(255,255,255,.75);
  background:rgba(15,42,29,.28);color:#fff;display:flex;align-items:flex-end;padding:8px}
body.marketing .tag--handle{top:0;right:0;width:12.5%;height:100%;border-left:1.5px dashed rgba(224,161,27,.9);
  background:repeating-linear-gradient(135deg,rgba(224,161,27,.16) 0 6px,transparent 6px 12px);
  color:#FFDFA0;display:flex;align-items:center;justify-content:center;text-align:center;
  writing-mode:vertical-rl;letter-spacing:.16em}
body.marketing .tag--words{bottom:8%;right:16%;background:rgba(255,255,255,.9);color:var(--ink);border:1px solid rgba(15,42,29,.15)}
body.marketing .band__foot{
  background:#0F2A1D;color:rgba(255,255,255,.62);border-radius:0 0 6px 6px;
  padding:16px 26px 20px;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center
}
body.marketing .band__foot p{margin:0;font-size:.87rem;max-width:62ch}
body.marketing .band__foot b{color:#fff;font-weight:600}
@media(max-width:640px){
  body.marketing .band__stage{padding:18px 14px 0}
  body.marketing .tag--words{display:none}
  body.marketing .tag{font-size:.6rem}
}

/* ---------- section frame ---------- */
body.marketing section{padding:76px 0}
body.marketing .sec-head{max-width:66ch;margin-bottom:44px}
body.marketing .rule{height:1px;background:var(--line);border:0;margin:0}
body.marketing .on-paper{background:var(--paper)}

/* ---------- scale stat strip ---------- */
body.marketing .stat-strip-section{padding:48px 0}
body.marketing .stat-strip{display:flex;justify-content:center;text-align:center;gap:48px;flex-wrap:wrap}
body.marketing .stat-strip__item{max-width:340px}
body.marketing .stat-strip__item + .stat-strip__item{border-left:1px solid var(--line-strong);padding-left:48px}
body.marketing .stat-strip__num{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,6vw,3.2rem);line-height:1;color:var(--green-dark)}
body.marketing .stat-strip__label{display:block;margin-top:10px;font-size:.92rem;color:var(--ink-2)}
@media(max-width:640px){
  body.marketing .stat-strip{gap:28px}
  body.marketing .stat-strip__item + .stat-strip__item{border-left:0;padding-left:0}
}

/* ---------- the flow ---------- */
body.marketing .act{margin-bottom:8px}
body.marketing .act__label{
  display:flex;align-items:baseline;gap:14px;padding:0 0 18px;margin-top:44px;
}
body.marketing .act__label:first-of-type{margin-top:0}
body.marketing .act__label b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.15rem;letter-spacing:.04em}
body.marketing .act__label span{font-size:.85rem;color:var(--ink-3)}
body.marketing .act__label hr{flex:1;height:1px;background:var(--line);border:0}

body.marketing .step{
  display:grid;grid-template-columns:78px minmax(0,1fr) minmax(0,300px);
  gap:0 28px;padding:26px 0;border-top:1px solid var(--line);align-items:start
}
body.marketing .step__n{
  font-family:var(--display);font-weight:400;font-size:2.9rem;line-height:.8;color:var(--green);
  padding-top:2px
}
body.marketing .step__body h3{font-size:1.22rem;letter-spacing:-.015em}
body.marketing .step__body p{margin:0 0 .7em;color:var(--ink-2)}
body.marketing .step__body p:last-child{margin-bottom:0}
body.marketing .step__aside{align-self:start}
body.marketing .step__aside img{border-radius:4px;border:1px solid var(--line);width:100%;height:auto}
body.marketing .note{
  border-left:2px solid var(--amber);background:var(--amber-soft);
  padding:10px 14px;border-radius:0 4px 4px 0;font-size:.88rem;color:#5B4412
}
body.marketing .chips{display:flex;flex-wrap:wrap;gap:7px;margin:.6em 0 0;padding:0;list-style:none}
body.marketing .chips li{
  font:500 .78rem/1 var(--body);padding:7px 11px;border:1px solid var(--line-strong);
  border-radius:999px;background:var(--paper);color:var(--ink-2)
}
body.marketing .chips li.is-hot{border-color:var(--green);color:var(--green-dark);background:#EAF5EE}
body.marketing .pricepair{display:flex;gap:10px;flex-wrap:wrap;margin-top:.5em}
body.marketing .pricepair div{
  flex:1 1 150px;border:1px solid var(--line);border-radius:5px;padding:12px 14px;background:var(--paper)
}
body.marketing .pricepair b{display:block;font-size:.95rem}
body.marketing .pricepair span{font-family:var(--display);font-size:1.5rem;color:var(--green-dark);display:block;margin-top:4px}
body.marketing .pricepair__item--soon{position:relative;overflow:hidden}
body.marketing .pricepair__item--soon b,
body.marketing .pricepair__item--soon>span{opacity:.35}
body.marketing .pricepair__item--soon .stamp{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-9deg);
  padding:6px 14px;border:2px solid var(--amber);border-radius:4px;
  background:var(--amber-soft);color:#8A6A10;
  font:700 .82rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;opacity:1;box-shadow:0 2px 6px rgba(0,0,0,.14)
}
@media(max-width:920px){
  body.marketing .step{grid-template-columns:56px minmax(0,1fr);gap:0 18px}
  body.marketing .step__aside{grid-column:2;margin-top:16px;max-width:340px}
  body.marketing .step__n{font-size:2.1rem}
}

/* ---------- tones ---------- */
body.marketing .tones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
body.marketing .tone{
  background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow, 0 1px 2px rgba(15,42,29,.05), 0 12px 32px -18px rgba(15,42,29,.35))
}
body.marketing .tone__img{aspect-ratio:2400/1120;overflow:hidden;background:#0F2A1D}
body.marketing .tone__img img{width:100%;height:100%;object-fit:cover}
body.marketing .tone__in{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
body.marketing .tone__name{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.45rem;margin:0 0 10px;letter-spacing:.02em}
body.marketing .dial{display:flex;gap:5px;margin-bottom:14px;align-items:center}
body.marketing .dial i{display:block;height:7px;flex:1;background:var(--line);border-radius:2px;transition:background .5s ease}
body.marketing .dial i.on{background:var(--green)}
body.marketing .dial--3 i.on{background:var(--amber)}
body.marketing .dial em{font:600 .68rem/1 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-style:normal;margin-left:8px;white-space:nowrap}
body.marketing .tone p{font-size:.94rem;color:var(--ink-2)}
body.marketing .tone dl{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.86rem}
body.marketing .tone dt{font:600 .68rem/1 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
body.marketing .tone dd{margin:0 0 12px;color:var(--ink-2)}
body.marketing .tone dd:last-child{margin-bottom:0}
body.marketing .tone dd.cap{font-family:var(--hand);font-size:1.05rem;color:var(--ink);line-height:1.3}
@media(max-width:900px){body.marketing .tones{grid-template-columns:1fr;max-width:520px}}

/* tone matrix */
body.marketing .matrix__head{margin-top:56px;margin-bottom:16px}
body.marketing .matrix__head h3{font-size:1.15rem;margin-bottom:.2em}
body.marketing .matrix__head .tiny{margin:0}
body.marketing .mcells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
body.marketing .mcell{
  position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--line);
  background:#0F2A1D;aspect-ratio:2400/1120
}
body.marketing .mcell img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1);pointer-events:none}
body.marketing .mcell:hover img{transform:scale(1.045)}
body.marketing .mcell__zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
body.marketing .mcell__zoom::after{
  content:"";position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(15,42,29,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.3' y1='15.3' x2='21' y2='21'/%3E%3Cline x1='10.5' y1='7.5' x2='10.5' y2='13.5'/%3E%3Cline x1='7.5' y1='10.5' x2='13.5' y2='10.5'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:0;transition:opacity .18s ease
}
body.marketing .mcell:hover .mcell__zoom::after,
body.marketing .mcell__zoom:focus-visible::after{opacity:1}
@media(hover:none){body.marketing .mcell__zoom::after{opacity:.85}}
body.marketing .mcell__tone{
  position:absolute;left:0;bottom:0;background:rgba(15,42,29,.86);color:#fff;
  font:600 .6rem/1 var(--body);letter-spacing:.13em;text-transform:uppercase;padding:6px 9px;display:none;pointer-events:none
}

body.marketing .lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:min(6vh,48px) min(6vw,48px)}
body.marketing .lightbox[hidden]{display:none}
body.marketing .lightbox__backdrop{position:absolute;inset:0;background:rgba(11,32,22,.92)}
body.marketing .lightbox__img{position:relative;max-width:100%;max-height:100%;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
body.marketing .lightbox__close{
  position:absolute;top:18px;right:18px;z-index:1;width:40px;height:40px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);background:rgba(15,42,29,.6);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer
}
body.marketing .lightbox__close:hover{background:rgba(15,42,29,.85);border-color:#fff}
@media(max-width:720px){
  body.marketing .mcells{grid-template-columns:1fr}
  body.marketing .mcell__tone{display:block}
}

/* theme/tone explorer -- view-only browse of the full catalog (category >
   theme > tone), driven entirely by native radios + :has(), no JS needed for
   the drill-down; the tap-to-enlarge tone tiles reuse .mcells/.mcell/
   .mcell__zoom above and the same #lightbox already wired up on this page. */
body.marketing .explorer{margin-top:8px}
body.marketing .explorer__rail{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
body.marketing .explorer__cat{position:relative;display:block;cursor:pointer}
body.marketing .explorer__cat input{position:absolute;opacity:0;width:1px;height:1px}
body.marketing .explorer__cat span{
  display:flex;align-items:center;gap:6px;font:500 .78rem/1 var(--body);padding:8px 13px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);color:var(--ink-2)
}
body.marketing .explorer__cat span b{font:600 .68rem/1 var(--body);color:var(--ink-3)}
body.marketing .explorer__cat input:checked+span{border-color:var(--green);color:var(--green-dark);background:#EAF5EE}
body.marketing .explorer__cat input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
body.marketing .explorer__group{display:none;padding-top:4px}
body.marketing .explorer__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:22px
}
body.marketing .explorer__card{position:relative;display:block;cursor:pointer;text-align:center}
body.marketing .explorer__card input{position:absolute;opacity:0;width:1px;height:1px}
body.marketing .explorer__thumb{
  display:block;aspect-ratio:1/1;border-radius:4px;overflow:hidden;border:2px solid var(--line);background:#0F2A1D
}
body.marketing .explorer__thumb img{width:100%;height:100%;object-fit:cover;display:block}
body.marketing .explorer__card input:checked~.explorer__thumb{border-color:var(--green)}
body.marketing .explorer__card input:focus-visible~.explorer__thumb{outline:2px solid var(--green);outline-offset:2px}
body.marketing .explorer__name{display:block;margin-top:6px;font:500 .78rem/1.2 var(--body);color:var(--ink-2)}
body.marketing .explorer__tones{display:none;padding:18px 0 8px;border-top:1px solid var(--line)}
@media(max-width:720px){
  body.marketing .explorer__grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* pets showcase -- same .mcells/.mcell/.mcell__zoom grid the tone matrix
   already uses (and the lightbox it's already wired to), just four columns
   instead of three. Own breakpoints rather than relying on cascade order
   against the .mcells rules above, so this doesn't silently break if those
   are ever reordered. */
body.marketing .mcells--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){body.marketing .mcells--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){body.marketing .mcells--4{grid-template-columns:1fr}}

/* ---------- yours ---------- */
body.marketing .yours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
body.marketing .your{border:1px solid var(--line);border-radius:6px;padding:24px;background:var(--paper)}
body.marketing .your__k{
  font-family:var(--display);font-weight:400;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-dark);margin-bottom:12px;display:block
}
body.marketing .your h3{font-size:1.12rem}
body.marketing .your p{font-size:.93rem;color:var(--ink-2);margin-bottom:.7em}
body.marketing .field{
  border:1px solid var(--line-strong);border-radius:4px;padding:11px 13px;background:var(--porcelain);
  font-size:.9rem;color:var(--ink-3);margin-top:10px
}
body.marketing .field b{color:var(--ink);font-weight:500}
@media(max-width:900px){body.marketing .yours{grid-template-columns:1fr;max-width:520px}}

/* ---------- good to know ---------- */
body.marketing .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
body.marketing .fact{padding:26px 22px 26px 0;border-right:1px solid var(--line)}
body.marketing .fact:last-child{border-right:0;padding-right:0}
body.marketing .fact:not(:first-child){padding-left:22px}
body.marketing .fact b{display:block;font-family:var(--display);font-weight:400;font-size:1.55rem;color:var(--ink);margin-bottom:8px;text-transform:uppercase;letter-spacing:.02em}
body.marketing .fact p{font-size:.9rem;color:var(--ink-2);margin:0}
@media(max-width:860px){body.marketing .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.marketing .fact{border-bottom:1px solid var(--line);padding:22px}
  body.marketing .fact:nth-child(2n){border-right:0}
  body.marketing .fact:first-child{padding-left:0}body.marketing .fact:nth-child(3){padding-left:0}}
@media(max-width:520px){body.marketing .facts{grid-template-columns:1fr}body.marketing .fact{border-right:0;padding-left:0!important;padding-right:0}}

/* ---------- closing ---------- */
body.marketing .close{background:var(--ink);color:#fff;text-align:center;padding:84px 0}
body.marketing .close h2{color:#fff;margin-bottom:.3em}
body.marketing .close p{color:rgba(231,238,233,.8);max-width:52ch;margin:0 auto 28px}
body.marketing .close .btn--ghost{border-color:rgba(255,255,255,.35);color:#fff}
body.marketing .close .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
body.marketing .close__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
body.marketing footer.site-foot{background:#0B2016;color:rgba(255,255,255,.5);padding:32px 0;font-size:.85rem}
body.marketing footer.site-foot .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
body.marketing footer.site-foot a{color:rgba(255,255,255,.7);text-decoration:none;margin-left:18px}
body.marketing footer.site-foot a:hover{color:#fff}

/* ==========================================================================
   FAQ page — jump rail, accordions, callout notes, "still stuck" band
   ========================================================================== */
body.marketing .wrap--narrow{max-width:940px}
body.marketing .hero--faq{padding-bottom:46px}

body.marketing .rail{
  position:sticky;top:130px;z-index:40;background:rgba(242,245,241,.93);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
body.marketing .rail__in{display:flex;gap:8px;overflow-x:auto;padding:12px 24px;scrollbar-width:none}
body.marketing .rail__in::-webkit-scrollbar{display:none}
body.marketing .rail a{
  flex:0 0 auto;font:600 .78rem/1 var(--body);letter-spacing:.04em;text-decoration:none;
  color:var(--ink-2);border:1px solid var(--line-strong);background:var(--paper);
  padding:9px 13px;border-radius:999px;white-space:nowrap
}
body.marketing .rail a:hover{border-color:var(--green);color:var(--green-dark);background:#EAF5EE}

body.marketing .faq{padding:56px 0 76px;background:var(--paper)}
body.marketing .grp{margin-bottom:52px}
body.marketing .grp:last-of-type{margin-bottom:0}
body.marketing .grp__head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
body.marketing .grp__head h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;
  font-size:1.25rem;margin:0;white-space:nowrap
}
body.marketing .grp__head hr{flex:1;height:1px;background:var(--line);border:0}
body.marketing .grp__head span{font-size:.8rem;color:var(--ink-3);white-space:nowrap}

body.marketing details.q{border-bottom:1px solid var(--line)}
body.marketing details.q summary{
  list-style:none;cursor:pointer;display:flex;gap:16px;align-items:flex-start;
  padding:20px 0;font-weight:600;font-size:1.06rem;letter-spacing:-.012em;color:var(--ink)
}
body.marketing details.q summary::-webkit-details-marker{display:none}
body.marketing details.q summary:hover{color:var(--green-dark)}
body.marketing .mark{
  flex:0 0 22px;height:22px;margin-top:3px;position:relative;border-radius:50%;
  border:1.5px solid var(--line-strong);transition:border-color .18s ease,background .18s ease
}
body.marketing .mark::before,body.marketing .mark::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink-2);
  transform:translate(-50%,-50%);transition:transform .22s cubic-bezier(.2,.7,.3,1),background .18s ease
}
body.marketing .mark::before{width:9px;height:1.5px}
body.marketing .mark::after{width:1.5px;height:9px}
body.marketing details.q[open] .mark{border-color:var(--green);background:var(--green)}
body.marketing details.q[open] .mark::before,body.marketing details.q[open] .mark::after{background:#fff}
body.marketing details.q[open] .mark::after{transform:translate(-50%,-50%) rotate(90deg)}
body.marketing details.q summary:hover .mark{border-color:var(--green)}
body.marketing .a{padding:0 0 24px 38px;max-width:68ch}
body.marketing .a p{margin:0 0 .85em;color:var(--ink-2);font-size:.99rem}
body.marketing .a p:last-child{margin-bottom:0}
body.marketing .a ul{margin:0 0 .9em;padding-left:1.1em;color:var(--ink-2);font-size:.99rem}
body.marketing .a li{margin-bottom:.3em}
body.marketing details.q[open] .a{animation:faq-fade .32s cubic-bezier(.2,.7,.3,1)}
@keyframes faq-fade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(max-width:560px){body.marketing .a{padding-left:0}}

body.marketing .callout-note{
  border-left:2px solid var(--amber);background:var(--amber-soft);
  padding:11px 15px;border-radius:0 4px 4px 0;font-size:.9rem;color:#5B4412;margin:0 0 .9em
}
body.marketing .hand{font-family:var(--hand);font-size:1.15rem;color:var(--ink);line-height:1.3}

body.marketing .toolbar{display:flex;justify-content:flex-end;margin-bottom:8px}
body.marketing .toolbar button{
  font:600 .78rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
  background:none;border:0;color:var(--ink-3);cursor:pointer;padding:8px 2px
}
body.marketing .toolbar button:hover{color:var(--green-dark)}

body.marketing .help{
  margin-top:56px;background:var(--ink);color:#E7EEE9;border-radius:6px;padding:34px 36px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center
}
body.marketing .help h3{
  margin:0 0 .4em;color:#fff;font-family:var(--display);font-weight:400;
  text-transform:uppercase;font-size:1.6rem;letter-spacing:.02em
}
body.marketing .help p{margin:0;color:rgba(231,238,233,.85);font-size:.96rem;max-width:52ch}
body.marketing .help a.mail{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(224,161,27,.4)}
body.marketing .help a.mail:hover{border-color:var(--amber)}
@media(max-width:760px){body.marketing .help{grid-template-columns:1fr;padding:26px}}

/* ==========================================================================
   Auth pages (login, signup)
   ========================================================================== */
body.marketing .auth-card{
  max-width:440px;margin:0 auto;background:var(--paper);border:1px solid var(--line);
  border-radius:6px;padding:32px;box-shadow:0 1px 2px rgba(15,42,29,.05), 0 12px 32px -18px rgba(15,42,29,.35)
}
body.marketing .auth-form{display:flex;flex-direction:column;gap:16px}
body.marketing .auth-field{display:flex;flex-direction:column;gap:6px;font-size:.9rem}
body.marketing .auth-field span{font:600 .78rem/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
body.marketing .auth-field input,
body.marketing .auth-field textarea{
  font:400 1rem/1.5 var(--body);padding:12px 13px;border:1.5px solid var(--line-strong);
  border-radius:4px;background:var(--porcelain);color:var(--ink)
}
body.marketing .auth-field input{line-height:1}
body.marketing .auth-field textarea{resize:vertical}
body.marketing .auth-field input:focus-visible,
body.marketing .auth-field textarea:focus-visible{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
body.marketing .auth-submit{width:100%;margin-top:6px}
body.marketing .auth-alert{
  border-left:2px solid #B3261E;background:#FBEAEA;color:#7A1913;
  padding:12px 15px;border-radius:0 4px 4px 0;font-size:.88rem;margin:0 0 20px
}
body.marketing .auth-alert ul{margin:0;padding-left:1.1em}
body.marketing .auth-alert li{margin-bottom:.25em}
body.marketing .auth-alert li:last-child{margin-bottom:0}
body.marketing .auth-links{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:.88rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between}
body.marketing .auth-links--center{justify-content:center}
body.marketing .btn--quiet{background:none;border:0;color:var(--green-dark);padding:0;text-decoration:underline}
body.marketing .btn--quiet:hover{color:var(--ink)}
body.marketing .btn--quiet:disabled{color:var(--ink-3);cursor:default;text-decoration:none}
body.marketing .btn--small{font-size:.85rem}
body.marketing .auth-note{margin-top:16px}
body.marketing .auth-note summary{cursor:pointer;font-size:.88rem;color:var(--ink-2);text-decoration:underline}
body.marketing .auth-note summary:hover{color:var(--ink)}
body.marketing .auth-note[open] summary{margin-bottom:14px}
body.marketing .auth-note .auth-form{gap:12px}

/* ==========================================================================
   Team Mugs leader dashboard -- roster of who's been sent a code
   ========================================================================== */
body.marketing .roster{border:1px solid var(--line);border-radius:6px;background:var(--paper);overflow:hidden}
body.marketing .roster__row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid var(--line)}
body.marketing .roster__row:first-child{border-top:0}
body.marketing .roster__status{font:600 .72rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;white-space:nowrap}
body.marketing .roster__status--claimed{background:#EAF5EE;color:var(--green-dark)}
body.marketing .roster__status--sent{background:var(--amber-soft);color:#8A6A10}

/* ---------- motion ---------- */
body.marketing .rise{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1)}
body.marketing .rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  body.marketing{scroll-behavior:auto}
  body.marketing .rise{opacity:1;transform:none;transition:none}
  body.marketing *{animation:none!important;transition-duration:.01ms!important}
}