/* ===========================================================================
   HALO · page-level components
   Depends on halo.css. Nothing here redefines a token or a primitive.
   =========================================================================== */

/* ================================================================ HEROES = */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:grid; align-items:center; background:var(--ink);
  overflow:hidden; padding-block:8rem 5rem; --mx:0; --my:0;
}
/* Interior pages get a shorter hero so the page below stays in reach. */
.hero--page{ min-height:auto; padding-block:calc(var(--nav-h) + 6rem) clamp(5rem, 12vh, 8rem); }
.hero--page .hero-copy{ max-width:46rem; }

.hero-grid{
  position:relative; z-index:2; display:grid; gap:clamp(3rem, 6vw, 5rem);
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); align-items:center;
}
@media (max-width:64rem){ .hero-grid{ grid-template-columns:1fr; } }
.hero-copy{ position:relative; z-index:2; }
.hero h1{ margin-bottom:1.75rem; }
.hero .lede{ margin-bottom:2.5rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.5rem;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--glow);
}
.eyebrow::before{ content:""; width:1.75rem; height:1px; background:currentColor; opacity:.5; }

@media (max-width:64rem){
  .hero .stage{ --lx:78%; --ly:34%; --rsize:min(46vh, 78vw); }
  .hero .stage-scrim{
    background:linear-gradient(to top, var(--ink) 20%,
      color-mix(in oklab, var(--ink) 60%, transparent) 58%, transparent 88%);
  }
}

/* Floating cards ---------------------------------------------------------- */
.hero-cards{ position:relative; height:clamp(20rem, 42vh, 30rem); }
@media (max-width:64rem){ .hero-cards{ height:22rem; margin-top:1rem; } }
.float{
  position:absolute;
  transform:translate3d(calc(var(--mx, 0) * var(--depth) * 22px), calc(var(--my, 0) * var(--depth) * 16px), 0) rotate(var(--tilt, 0deg));
  transition:transform 1100ms var(--ease-soft); will-change:transform;
}
.float > .card{ animation:drift var(--dur, 18s) var(--ease-soft) infinite; animation-delay:var(--delay, 0s); }
@keyframes drift{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-14px) rotate(-0.4deg); } }
.f1{ --depth:1;    --tilt:-2.4deg; left:0;    top:2%;   z-index:3; }
.f2{ --depth:0.55; --tilt:3.1deg;  right:-4%; top:38%;  z-index:2; }
.f3{ --depth:0.3;  --tilt:-1.2deg; left:14%;  bottom:0; z-index:1; }
.f3 .card{ width:15rem; opacity:.72; }
@media (max-width:64rem){ .f1{ left:0; top:0; } .f2{ right:0; top:34%; } .f3{ display:none; } }
@media (max-width:34rem){ .f2{ right:auto; left:8%; top:44%; } }

.scroll-cue{
  position:absolute; left:var(--gut); bottom:2rem; z-index:3;
  display:flex; align-items:center; gap:.75rem;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-ink-dim);
}
.scroll-cue i{ display:block; width:1px; height:34px; background:linear-gradient(var(--on-ink-dim), transparent); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; inset:0; background:var(--glow); animation:cue 2600ms var(--ease-soft) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%); } 55%,100%{ transform:translateY(100%); } }
@media (max-width:64rem){ .scroll-cue{ display:none; } }

.trustline{ position:relative; z-index:2; margin-top:clamp(3rem, 7vh, 5rem); display:grid; gap:1.25rem; }
.trustline > p{ font-size:.75rem; letter-spacing:.11em; text-transform:uppercase; color:var(--on-ink-dim); }

/* ============================================================== PROBLEM = */
.forget{ display:grid; gap:.25rem; }
.forget li{
  font-family:var(--serif); font-weight:330; letter-spacing:-0.018em; line-height:1.18;
  font-size:clamp(1.9rem, 5.4vw, 3.5rem); color:var(--on-paper);
  opacity:var(--lit, 1); transition:opacity 600ms var(--ease-soft);
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
}
.forget li s{ text-decoration:none; }
.forget li em{ font-style:italic; }
.forget-note{ font-size:.8125rem; color:var(--on-paper-mut); letter-spacing:.02em; white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .forget li{ opacity:1 !important; } }

/* ========================================================== CARD STACK == */
/* A deck of received cards. Click or arrow-key to send the top card to the
   back. The object being browsed is the product itself, not a UI pattern. */
.deck{
  position:relative; height:clamp(22rem, 50vh, 28rem);
  display:grid; place-items:center; perspective:1400px;
}
.deck-item{
  position:absolute; transform-style:preserve-3d;
  transform:translate3d(calc(var(--i) * 1.5rem), calc(var(--i) * -0.9rem), calc(var(--i) * -60px))
            rotateY(calc(var(--i) * -2deg)) rotate(calc(var(--i) * 1.1deg));
  opacity:calc(1 - var(--i) * 0.18);
  z-index:calc(10 - var(--i));
  transition:transform 720ms var(--ease), opacity 720ms var(--ease);
  cursor:pointer; border:0; background:none; padding:0; text-align:left;
}
.deck-item[data-out="true"]{ transform:translate3d(-60%, 0, 120px) rotate(-8deg); opacity:0; }
.deck-ctl{ display:flex; gap:.5rem; justify-content:center; margin-top:1.5rem; }
.deck-dot{
  width:6px; height:6px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:color-mix(in oklab, var(--on-ink) 22%, transparent);
  transition:background var(--d-base) var(--ease), width var(--d-base) var(--ease);
}
.deck-dot[aria-current="true"]{ background:var(--glow); width:20px; }

/* ========================================================= SCROLL STACK = */
/* Cards accumulate as you scroll, which is literally what a recognition
   history does. Each card pins under the previous one. */
.stack-scroll{ display:grid; gap:1.5rem; }
.stack-scroll > li{
  position:sticky; top:calc(var(--nav-h) + var(--i) * 1.25rem + 2rem);
}
.stack-scroll .panel{
  display:grid; gap:1rem; align-content:start;
  box-shadow:0 -1px 0 var(--paper-line), 0 -20px 40px -30px color-mix(in oklab, var(--on-paper) 60%, transparent);
}
.stack-scroll .yr{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--on-paper-mut); }

/* ================================================================ BENTO = */
/* Deliberately asymmetric. Equal tiles would be a grid of nothing. */
.bento{
  display:grid; gap:1rem;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  grid-auto-rows:minmax(11rem, auto);
}
.bento > *{ grid-column:span 3; display:grid; gap:.75rem; align-content:start; }
.bento .wide{ grid-column:span 4; }
.bento .narrow{ grid-column:span 2; }
.bento .full{ grid-column:span 6; }
.bento .tall{ grid-row:span 2; }
@media (max-width:64rem){
  .bento{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bento > *,.bento .wide,.bento .narrow,.bento .full{ grid-column:span 2; }
  .bento .tall{ grid-row:span 1; }
}
.bento h3{ font-size:1.0625rem; font-weight:500; letter-spacing:-0.01em; }
.bento p{ font-size:.9375rem; color:var(--on-ink-mut); text-wrap:pretty; }
.band--paper .bento p{ color:var(--on-paper-mut); }
.bento .ico{
  width:2.25rem; height:2.25rem; border-radius:9px; display:grid; place-items:center;
  border:1px solid var(--ink-line); color:var(--glow); margin-bottom:.25rem;
}
.band--paper .bento .ico{ border-color:var(--paper-line); color:var(--glow-ink); }
.bento .ico svg{ width:16px; height:16px; }

/* ============================================================= COMPOSER = */
.composer{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 0.92fr);
  gap:clamp(2rem, 4vw, 3.5rem); align-items:start;
  background:var(--paper-raised); border:1px solid var(--paper-line);
  border-radius:20px; padding:clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width:60rem){ .composer{ grid-template-columns:1fr; } }
.field{ display:grid; gap:.625rem; margin-bottom:1.5rem; }
.field > .lbl{ font-size:.8125rem; font-weight:500; color:var(--on-paper-mut); }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  padding:.4375rem .8125rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--paper-line); background:transparent;
  font-size:.8125rem; font-weight:500; color:var(--on-paper-mut);
  transition:border-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease), background var(--d-micro) var(--ease);
}
.chip:hover{ color:var(--on-paper); border-color:color-mix(in oklab, var(--on-paper) 28%, transparent); }
.chip[aria-pressed="true"]{ background:var(--on-paper); border-color:var(--on-paper); color:var(--paper-raised); }
.swatches{ display:flex; gap:.625rem; flex-wrap:wrap; }
.swatch{
  width:3rem; height:3.75rem; border-radius:8px; cursor:pointer; padding:0;
  border:1px solid var(--paper-line); position:relative; overflow:hidden;
  transition:transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.swatch::after{ content:""; position:absolute; inset:0; background:var(--sw); }
.swatch[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--paper-raised), 0 0 0 3.5px var(--on-paper); }
.swatch:hover{ transform:translateY(-2px); }
.ta{
  width:100%; min-height:6.5rem; resize:vertical; padding:.875rem 1rem; border-radius:10px;
  border:1px solid var(--paper-line); background:var(--paper); color:var(--on-paper);
  line-height:1.55; font-size:.9375rem;
  transition:border-color var(--d-base) var(--ease), background var(--d-base) var(--ease);
}
.ta::placeholder{ color:var(--on-paper-mut); }
.ta:focus{ outline:none; border-color:color-mix(in oklab, var(--on-paper) 40%, transparent); background:var(--paper-raised); }
.ta:focus-visible{ outline:2px solid var(--glow-ink); outline-offset:2px; }
.assist{ margin-top:.75rem; display:grid; gap:.5rem; border-top:1px dashed var(--paper-line); padding-top:.875rem; }
.assist-head{ display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--on-paper-mut); }
.assist-head svg{ width:13px; height:13px; }
.sugg{
  text-align:left; padding:.625rem .8125rem; border-radius:9px; cursor:pointer;
  border:1px solid var(--paper-line); background:var(--paper);
  font-size:.8125rem; line-height:1.45; color:var(--on-paper);
  transition:border-color var(--d-micro) var(--ease), background var(--d-micro) var(--ease);
}
.sugg:hover{ background:var(--paper-raised); border-color:color-mix(in oklab, var(--glow-ink) 45%, transparent); }
.composer-foot{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.5rem; }
.count{ font-size:.75rem; color:var(--on-paper-mut); font-variant-numeric:tabular-nums; }

.preview{
  position:sticky; top:calc(var(--nav-h) + 1.5rem);
  display:grid; place-items:center; background:var(--ink);
  border-radius:16px; padding:clamp(2rem, 4vw, 3rem) 1.5rem; overflow:hidden;
}
.preview::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 45% at 50% 30%, color-mix(in oklab, var(--glow) 13%, transparent), transparent 70%);
}
.preview .card{ position:relative; z-index:1; width:100%; max-width:20rem; transition:transform var(--d-enter) var(--ease); }
.preview.sent .card{ transform:translateY(-6px); }
.sent-note{
  position:absolute; left:0; right:0; bottom:1.25rem; z-index:2; text-align:center;
  font-size:.8125rem; color:var(--glow); opacity:0; transform:translateY(6px);
  transition:opacity var(--d-enter) var(--ease), transform var(--d-enter) var(--ease);
}
.preview.sent .sent-note{ opacity:1; transform:none; }
@media (max-width:60rem){ .preview{ position:static; } }

/* ========================================================== DEPARTMENTS = */
.rail-sticky{ height:280vh; }
.rail-pin{ position:sticky; top:0; height:100vh; height:100svh; display:grid; align-content:center; gap:2.5rem; overflow:hidden; }
.rail-head > *{ max-width:40rem; }
.rail{ display:flex; gap:1.25rem; padding-inline:var(--gut); transform:translate3d(calc(var(--rail, 0) * -1px), 0, 0); will-change:transform; }
.dept{ flex:none; width:min(21rem, 76vw); display:grid; gap:1rem; align-content:start; }
.dept-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.dept-name{ font-size:1.0625rem; font-weight:500; letter-spacing:-0.01em; }
.dept-count{ font-size:.75rem; color:var(--on-ink-dim); font-variant-numeric:tabular-nums; }
.dept-feed{ display:grid; gap:.75rem; }
.dept-feed li{ display:grid; grid-template-columns:auto 1fr; gap:.625rem; align-items:start; }
.dept-feed .avatar{ background:var(--ink-line); color:var(--on-ink); width:24px; height:24px; }
.dept-feed p{ font-size:.8125rem; line-height:1.45; color:var(--on-ink-mut); }
.dept-feed b{ color:var(--on-ink); font-weight:500; }
.dept-tag{
  justify-self:start; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--glow); border:1px solid color-mix(in oklab, var(--glow) 30%, transparent);
  padding:.25rem .5rem; border-radius:5px;
}
.rail-progress{ height:2px; background:var(--ink-line); position:relative; margin-inline:var(--gut); }
.rail-progress i{ position:absolute; inset:0 auto 0 0; background:var(--glow); width:calc(var(--railpct, 0) * 100%); transition:width 100ms linear; }
@media (prefers-reduced-motion: reduce){
  .rail{ transform:none !important; overflow-x:auto; }
  .rail-sticky{ height:auto; }
  .rail-pin{ position:static; height:auto; }
}

/* =================================================================== AI = */
.tone-out{
  min-height:9rem; display:grid; align-content:center;
  font-family:var(--serif); font-size:clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight:340; line-height:1.34; letter-spacing:-0.012em;
  transition:opacity 340ms var(--ease), filter 340ms var(--ease);
}
.tone-out.morph{ opacity:0; filter:blur(6px); }
.tone-ctl{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.tone-btn{
  padding:.4375rem .8125rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--ink-line); background:transparent; color:var(--on-ink-mut);
  font-size:.8125rem; font-weight:500;
  transition:color var(--d-micro) var(--ease), border-color var(--d-micro) var(--ease), background var(--d-micro) var(--ease);
}
.tone-btn:hover{ color:var(--on-ink); border-color:color-mix(in oklab, var(--on-ink) 34%, transparent); }
.tone-btn[aria-pressed="true"]{ background:var(--on-ink); border-color:var(--on-ink); color:var(--void); }
.tone-foot{ display:flex; align-items:center; gap:.625rem; font-size:.8125rem; color:var(--on-ink-dim); border-top:1px solid var(--ink-line); padding-top:1.25rem; }
.tone-foot svg{ width:14px; height:14px; flex:none; }

/* ============================================================ TEMPLATES = */
.fan{ position:relative; height:clamp(20rem, 44vh, 27rem); display:grid; place-items:center; }
.fan-card{
  position:absolute; width:12.5rem; aspect-ratio:3/4; border-radius:14px;
  border:1px solid color-mix(in oklab, var(--on-paper) 8%, transparent);
  box-shadow:0 18px 44px -20px color-mix(in oklab, var(--on-paper) 55%, transparent);
  background:var(--face); display:grid; align-content:end; padding:1rem; cursor:pointer;
  transform:rotate(var(--r)) translate(var(--x), var(--y));
  transition:transform 700ms var(--ease), box-shadow 700ms var(--ease);
}
.fan-card span{
  font-size:.75rem; font-weight:500; color:var(--void); justify-self:start;
  background:color-mix(in oklab, #fff 78%, transparent);
  backdrop-filter:blur(6px); padding:.3125rem .5625rem; border-radius:999px;
}
.fan:hover .fan-card,.fan:focus-within .fan-card{ transform:rotate(var(--rh)) translate(var(--xh), var(--y)); }
.fan-card:hover{ box-shadow:0 26px 60px -22px color-mix(in oklab, var(--on-paper) 62%, transparent); }

/* Storefront grid — intentionally uneven row heights, like a print contact
   sheet, so it does not read as an identical card grid. */
.store{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); }
.tpl{
  display:grid; gap:.75rem; cursor:pointer; border:0; background:none; padding:0; text-align:left;
  transition:translate var(--d-base) var(--ease);
}
.tpl:hover{ translate:0 -3px; }
.tpl-face{
  aspect-ratio:var(--ar, 3/4); border-radius:12px; background:var(--face);
  border:1px solid color-mix(in oklab, var(--on-paper) 8%, transparent);
  box-shadow:0 12px 32px -18px color-mix(in oklab, var(--on-paper) 55%, transparent);
  display:grid; align-content:end; padding:1rem;
  transition:box-shadow var(--d-base) var(--ease);
}
.tpl:hover .tpl-face{ box-shadow:0 22px 48px -20px color-mix(in oklab, var(--on-paper) 62%, transparent); }
.tpl-face q{
  font-family:var(--serif); font-size:.9375rem; line-height:1.35; quotes:none;
  color:var(--void); background:color-mix(in oklab, #fff 82%, transparent);
  backdrop-filter:blur(8px); padding:.625rem .75rem; border-radius:9px;
}
.tpl-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.tpl-meta b{ font-size:.9375rem; font-weight:500; }
.tpl-meta span{ font-size:.75rem; color:var(--on-paper-mut); }
.tpl[hidden]{ display:none; }
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }

/* ============================================================== ADD-ONS = */
.addons{ display:grid; border-top:1px solid var(--ink-line); }
.addon{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1.25rem; align-items:center;
  padding:1.25rem 0; border-bottom:1px solid var(--ink-line);
}
.addon-ico{ width:2.25rem; height:2.25rem; border-radius:9px; display:grid; place-items:center; border:1px solid var(--ink-line); color:var(--glow); }
.addon-ico svg{ width:16px; height:16px; }
.addon b{ font-weight:500; }
.addon p{ font-size:.875rem; color:var(--on-ink-mut); }
.addon .price{ font-size:.875rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.addon .price span{ color:var(--on-ink-dim); }

/* ============================================================== PRICING = */
.toggle{ display:inline-flex; padding:3px; border-radius:999px; background:color-mix(in oklab, var(--on-paper) 6%, transparent); border:1px solid var(--paper-line); }
.toggle button{
  padding:.5rem 1.125rem; border-radius:999px; border:0; background:transparent; cursor:pointer;
  font-size:.875rem; font-weight:500; color:var(--on-paper-mut);
  transition:background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.toggle button[aria-pressed="true"]{ background:var(--paper-raised); color:var(--on-paper); box-shadow:0 1px 2px color-mix(in oklab, var(--on-paper) 12%, transparent); }
.toggle .save{ font-size:.75rem; color:var(--glow-ink); margin-left:.4rem; }

.tiers{ display:grid; gap:1rem; grid-template-columns:repeat(4, minmax(0,1fr)); align-items:start; }
@media (max-width:68rem){ .tiers{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:38rem){ .tiers{ grid-template-columns:1fr; } }
.tier{ display:grid; gap:1rem; align-content:start; }
.tier--lit{
  border-color:color-mix(in oklab, var(--glow-deep) 55%, transparent);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--glow-deep) 22%, transparent),
             0 24px 60px -30px color-mix(in oklab, var(--glow-deep) 50%, transparent);
}
.tier h3{ font-size:.9375rem; font-weight:600; }
.tier .amt{ font-family:var(--serif); font-size:2.75rem; font-weight:340; letter-spacing:-0.02em; line-height:1; font-variant-numeric:tabular-nums; }
.tier .per{ font-size:.8125rem; color:var(--on-paper-mut); margin-top:.35rem; }
.tier > p{ font-size:.875rem; color:var(--on-paper-mut); text-wrap:pretty; }
.tier ul{ display:grid; gap:.5rem; }
.tier li{ display:grid; grid-template-columns:auto 1fr; gap:.5rem; font-size:.875rem; align-items:start; }
.tier li svg{ width:13px; height:13px; margin-top:.35rem; color:var(--glow-ink); flex:none; }
.tier .btn{ justify-content:center; margin-top:.25rem; }

/* Comparison table -------------------------------------------------------- */
.cmp{ width:100%; border-collapse:collapse; margin-top:1rem; font-size:.875rem; }
.cmp caption{ text-align:left; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-paper-mut); padding-bottom:1rem; }
.cmp th,.cmp td{ padding:.875rem .75rem; text-align:left; border-bottom:1px solid var(--paper-line); vertical-align:top; }
.cmp thead th{ font-size:.8125rem; font-weight:600; position:sticky; top:var(--nav-h); background:var(--paper); z-index:1; }
.cmp tbody th{ font-weight:450; color:var(--on-paper); width:38%; }
.cmp td{ color:var(--on-paper-mut); font-variant-numeric:tabular-nums; }
.cmp .yes{ color:var(--glow-ink); }
.cmp tbody tr:hover th,.cmp tbody tr:hover td{ background:color-mix(in oklab, var(--on-paper) 3%, transparent); }
.cmp-scroll{ overflow-x:auto; }
@media (max-width:52rem){ .cmp{ min-width:38rem; } }

.faq{ max-width:46rem; }
.faq details{ border-bottom:1px solid var(--paper-line); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.125rem 0;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:1rem; font-weight:500;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ flex:none; width:14px; height:14px; position:relative; }
.faq summary .pm::before,.faq summary .pm::after{ content:""; position:absolute; background:var(--on-paper-mut); transition:transform var(--d-base) var(--ease); }
.faq summary .pm::before{ inset:6px 0 auto 0; height:1.5px; }
.faq summary .pm::after{ inset:0 6px auto 6px; width:1.5px; height:14px; }
.faq details[open] summary .pm::after{ transform:scaleY(0); }
.faq details p{ padding-bottom:1.25rem; color:var(--on-paper-mut); max-width:60ch; font-size:.9375rem; text-wrap:pretty; }