/* public/css/suite.css — "Built for your industry" photography + "The product suite" bento.
 *
 * Both sections hang off the EXISTING reveal mechanism in /js/anim.js: it observes
 * .reveal, adds .in, and auto-assigns --d to .reveal children of a .grid. Nothing here
 * needs new JavaScript, which matters for two reasons: the runtime translator swaps whole
 * text nodes and would fight any script that rewrote copy, and a demo that animates from
 * CSS alone cannot leave a panel half-drawn if a script fails to load.
 *
 * Every motion rule is inside `.in` so nothing moves before its section is on screen, and
 * the whole file collapses to a static, fully-legible layout under prefers-reduced-motion
 * at the bottom. Text is never animated from opacity:0 without a paired reduced-motion
 * reset — a visitor who asks for less motion must still be able to read every word.
 */

/* ============================================================================
   1. BUILT FOR YOUR INDUSTRY
   ========================================================================= */

.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:980px){.ind-grid{grid-template-columns:1fr}}

.ind-card{
  position:relative;padding:0;overflow:hidden;display:flex;flex-direction:column;
  border-radius:18px;background:var(--bg-elev,#0E1526);
  border:1px solid var(--border,rgba(255,255,255,.08));
}
.ind-card:hover{border-color:rgba(255,255,255,.16)}

/* --- the photograph ------------------------------------------------------ */
.ind-photo{position:relative;aspect-ratio:16/11;overflow:hidden;background:#0a0e1a}
.ind-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Settles out of a slight push-in as the card arrives. 1.6s is deliberately slower
     than the card's own entrance so it reads as depth rather than as a second animation. */
  transform:scale(1.07);transition:transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.ind-card.in .ind-photo img{transform:scale(1)}

/* Scrim: the copy below sits on the card, but the photo's bottom edge has to hand over
   to it without a visible seam, so the gradient lands on the card colour exactly. */
.ind-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,20,0) 42%,rgba(14,21,38,.72) 78%,var(--bg-elev,#0E1526) 100%);
}

.ind-badge{
  position:absolute;left:14px;top:14px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.01em;
  color:#fff;background:rgba(7,10,20,.62);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;translate:0 -6px;transition:opacity .5s .25s,translate .5s .25s;
}
.ind-card.in .ind-badge{opacity:1;translate:none}
.ind-badge .em{font-size:14px;line-height:1}

/* --- the copy ------------------------------------------------------------ */
.ind-body{padding:2px 20px 20px;display:flex;flex-direction:column;flex:1;min-height:0}
/* These cards are dark whatever the section around them is, so the type colour cannot be
   inherited: #industries is a LIGHT section, and .card h3 in marketing.css is near-black.
   That rendered the three headings almost invisible on the photo cards. */
.ind-body h3{margin:0 0 8px;font-size:19px;line-height:1.3;color:#fff}
.ind-body p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.66)}

/* --- the sample exchange ------------------------------------------------- */
.ind-chat{margin-top:16px;padding-top:16px;border-top:1px solid var(--border,rgba(255,255,255,.08))}
.ind-msg{
  position:relative;max-width:92%;padding:9px 13px;border-radius:14px;
  font-size:13.5px;line-height:1.55;margin-bottom:8px;
}
.ind-msg.them{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);border-bottom-left-radius:5px;color:rgba(255,255,255,.88)}
.ind-msg.us{
  margin-left:auto;color:#fff;border-bottom-right-radius:5px;
  background:linear-gradient(135deg,rgba(62,130,240,.24),rgba(214,46,150,.22));
  border:1px solid rgba(154,72,198,.34);
}
.ind-who{font-size:11.5px;color:var(--muted,rgba(255,255,255,.55));text-align:right;letter-spacing:.02em}

/* The exchange PLAYS, on a loop: the question lands, the agent thinks for a beat, then
   answers. A conversation that merely fades in is a screenshot; the pause before the
   reply is the thing that makes it read as a live answer being written.
 *
 * One 11s cycle drives all four parts so they can never drift out of step, and every
 * card is offset by its stagger index — three cards typing in unison would look like a
 * carousel rather than three separate conversations.
 *
 * The typing indicator and the reply share a single grid cell (.ind-reply), so the
 * hand-over from one to the other changes nothing about the card's height. Animating
 * height here would reflow the whole section every eleven seconds. */
.ind-reply{display:grid;min-height:26px}
.ind-reply > *{grid-area:1/1}
.ind-typing{
  justify-self:end;align-self:center;display:flex;gap:4px;
  padding:9px 13px;border-radius:14px;border-bottom-right-radius:5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);opacity:0;
}
.ind-typing i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);display:block}

.ind-card.in .ind-msg.them{animation:indThem 11s cubic-bezier(.2,.7,.2,1) infinite backwards}
.ind-card.in .ind-typing  {animation:indType 11s linear infinite backwards}
.ind-card.in .ind-msg.us  {animation:indUs   11s cubic-bezier(.2,.7,.2,1) infinite backwards}
.ind-card.in .ind-who     {animation:indWho  11s linear infinite backwards}
.ind-card.in .ind-msg.them,
.ind-card.in .ind-typing,
.ind-card.in .ind-msg.us,
.ind-card.in .ind-who{animation-delay:calc(.35s + var(--d,0) * .9s)}

/* The dots only bounce while the indicator is up; they run on their own short cycle. */
.ind-card.in .ind-typing i{animation:indDot 1.25s ease-in-out infinite}
.ind-card.in .ind-typing i:nth-child(2){animation-delay:.16s}
.ind-card.in .ind-typing i:nth-child(3){animation-delay:.32s}

@keyframes indThem{
  0%{opacity:0;translate:0 8px;scale:.985}
  4%,93%{opacity:1;translate:none;scale:1}
  98%,100%{opacity:0;translate:0 -4px}
}
@keyframes indType{            /* up while the agent is "thinking", then gone */
  0%,11%{opacity:0}
  15%,26%{opacity:1}
  30%,100%{opacity:0}
}
@keyframes indUs{
  0%,29%{opacity:0;translate:0 8px;scale:.985}
  35%,93%{opacity:1;translate:none;scale:1}
  98%,100%{opacity:0;translate:0 -4px}
}
@keyframes indWho{ 0%,35%{opacity:0} 41%,93%{opacity:1} 98%,100%{opacity:0} }
@keyframes indDot{ 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-3px);opacity:1} }
@keyframes indSay{from{opacity:0;translate:0 8px;scale:.985}to{opacity:1;translate:none;scale:1}}

/* ============================================================================
   2. THE PRODUCT SUITE — a bento of small, self-playing demos
   ========================================================================= */

.suite-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:stretch;
}
.suite-card{
  grid-column:span 2;display:flex;flex-direction:column;gap:14px;
  padding:22px;border-radius:18px;overflow:hidden;
  background:var(--bg-elev,#0E1526);border:1px solid var(--border,rgba(255,255,255,.08));
}
.suite-card.wide{grid-column:span 3}
.suite-card.full{grid-column:span 6}
@media(max-width:1100px){
  .suite-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .suite-card,.suite-card.wide,.suite-card.full{grid-column:span 2}
}
@media(max-width:720px){
  .suite-grid{grid-template-columns:1fr}
  .suite-card,.suite-card.wide,.suite-card.full{grid-column:span 1}
}

.suite-card h3{margin:0;font-size:17px;line-height:1.35}
.suite-card p{margin:0;font-size:14px;line-height:1.6;color:var(--muted,rgba(255,255,255,.66))}
.suite-head{display:flex;align-items:flex-start;gap:11px}
.suite-ic{
  flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;
  background:linear-gradient(135deg,rgba(62,130,240,.18),rgba(214,46,150,.16));
  border:1px solid rgba(255,255,255,.10);
}

/* The demo surface: a recessed panel so a mock never reads as a real control. */
.suite-demo{
  margin-top:auto;position:relative;border-radius:13px;padding:14px;
  background:rgba(7,10,20,.55);border:1px solid rgba(255,255,255,.06);
  font-size:12.5px;overflow:hidden;
}

/* --- 2a. Procedures: steps light up in sequence -------------------------- */
.pr-step{
  display:flex;align-items:flex-start;gap:10px;padding:7px 9px;border-radius:9px;
  line-height:1.5;color:var(--muted,rgba(255,255,255,.6));
  border:1px solid transparent;
}
.pr-n{
  flex:none;width:19px;height:19px;border-radius:6px;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
}
.pr-fn{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;
  padding:1px 6px;border-radius:5px;color:#cfe0ff;
  background:rgba(62,130,240,.16);border:1px solid rgba(62,130,240,.28);
}
/* Six steps share one 7.2s loop, each lit for its own slice. Written as a delay off a
   single duration so adding a step means changing two numbers, not six keyframe blocks. */
/* NOT `backwards`: with a fill-mode of backwards a delayed animation paints its 0%
   keyframe for the whole delay, which is the LIT state here — so every step still
   waiting its turn was highlighted at once and the sequence read as five active steps.
   With no fill mode the element keeps its normal (unlit) style until its slice starts. */
.suite-card.in .pr-step{animation:prLit 7.2s linear infinite}
.suite-card.in .pr-step:nth-child(1){animation-delay:0s}
.suite-card.in .pr-step:nth-child(2){animation-delay:1.2s}
.suite-card.in .pr-step:nth-child(3){animation-delay:2.4s}
.suite-card.in .pr-step:nth-child(4){animation-delay:3.6s}
.suite-card.in .pr-step:nth-child(5){animation-delay:4.8s}
.suite-card.in .pr-step:nth-child(6){animation-delay:6s}
@keyframes prLit{
  0%,16%{background:rgba(62,130,240,.13);border-color:rgba(62,130,240,.26);color:#fff}
  17%,100%{background:transparent;border-color:transparent}
}
.suite-card.in .pr-step:nth-child(1) .pr-n{animation:prNum 7.2s linear infinite}
.suite-card.in .pr-step:nth-child(2) .pr-n{animation:prNum 7.2s linear 1.2s infinite}
.suite-card.in .pr-step:nth-child(3) .pr-n{animation:prNum 7.2s linear 2.4s infinite}
.suite-card.in .pr-step:nth-child(4) .pr-n{animation:prNum 7.2s linear 3.6s infinite}
.suite-card.in .pr-step:nth-child(5) .pr-n{animation:prNum 7.2s linear 4.8s infinite}
.suite-card.in .pr-step:nth-child(6) .pr-n{animation:prNum 7.2s linear 6s infinite}
@keyframes prNum{
  0%,16%{background:linear-gradient(135deg,#3E82F0,#9A48C6);color:#fff;border-color:transparent}
  17%,100%{background:rgba(255,255,255,.07);color:rgba(255,255,255,.72)}
}

/* --- 2b. Widgets: a reply that is a component, not a sentence ------------ */
.wg-msg{
  max-width:88%;padding:9px 12px;border-radius:13px;border-bottom-right-radius:5px;margin-left:auto;
  background:linear-gradient(135deg,rgba(62,130,240,.24),rgba(214,46,150,.2));
  border:1px solid rgba(154,72,198,.32);color:#fff;line-height:1.55;
}
.wg-card{
  margin-top:10px;padding:11px 12px;border-radius:11px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
}
.wg-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wg-lbl{color:var(--muted,rgba(255,255,255,.6));font-size:11.5px}
.wg-pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;color:#8ee6b4;
  background:rgba(46,204,113,.13);border:1px solid rgba(46,204,113,.3);
}
.wg-dot{width:6px;height:6px;border-radius:50%;background:#2ecc71;flex:none}
.suite-card.in .wg-dot{animation:wgPulse 2s ease-in-out infinite}
@keyframes wgPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,.5)}50%{box-shadow:0 0 0 5px rgba(46,204,113,0)}}
/* The rail fills to "in transit", not to complete — a progress bar that always finishes
   is decoration; one that stops where the parcel is says what the widget is for. */
.wg-rail{margin-top:9px;height:4px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.wg-rail i{display:block;height:100%;width:58%;border-radius:3px;background:linear-gradient(90deg,#3E82F0,#9A48C6)}
.suite-card.in .wg-rail i{animation:wgFill 1.5s .5s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes wgFill{from{width:0}to{width:58%}}
.suite-card.in .wg-msg{animation:indSay .5s .2s backwards}
.suite-card.in .wg-card{animation:indSay .5s .52s backwards}

/* --- 2c. Helpdesk: a queue with real states ------------------------------ */
.hd-tbl{width:100%;border-collapse:collapse;font-size:12px}
.hd-tbl th{
  text-align:left;font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.42);padding:0 8px 8px;border-bottom:1px solid rgba(255,255,255,.07);
}
.hd-tbl td{padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:middle}
.hd-tbl tr:last-child td{border-bottom:0}
.hd-sub{display:block;color:rgba(255,255,255,.45);font-size:11px;margin-top:2px}
.hd-st{
  display:inline-block;padding:2.5px 8px;border-radius:999px;font-size:10.5px;font-weight:600;white-space:nowrap;
}
.hd-st.new{color:#8ee6b4;background:rgba(46,204,113,.13);border:1px solid rgba(46,204,113,.28)}
.hd-st.hold{color:#f5c76e;background:rgba(241,196,15,.12);border:1px solid rgba(241,196,15,.26)}
.hd-st.esc{color:#ff9aa8;background:rgba(214,46,150,.14);border:1px solid rgba(214,46,150,.3)}
.hd-when{color:rgba(255,255,255,.4);font-size:11px;white-space:nowrap;text-align:right}
.suite-card.in .hd-tbl tbody tr{animation:indSay .46s cubic-bezier(.2,.7,.2,1) backwards}
.suite-card.in .hd-tbl tbody tr:nth-child(1){animation-delay:.22s}
.suite-card.in .hd-tbl tbody tr:nth-child(2){animation-delay:.34s}
.suite-card.in .hd-tbl tbody tr:nth-child(3){animation-delay:.46s}
.suite-card.in .hd-tbl tbody tr:nth-child(4){animation-delay:.58s}

/* --- 2d. Backstage: you ask, it does, it reports ------------------------- */
.bs-ask{
  padding:9px 12px;border-radius:11px;line-height:1.55;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
}
.bs-done{
  margin-top:10px;display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;color:#8ee6b4;
  background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.28);
}
.bs-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.bs-list li{
  padding:4px 10px;border-radius:8px;font-size:11.5px;color:rgba(255,255,255,.76);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
}
.suite-card.in .bs-ask{animation:indSay .5s .18s backwards}
.suite-card.in .bs-done{animation:indSay .5s .68s backwards}
.suite-card.in .bs-list li{animation:indSay .42s backwards}
.suite-card.in .bs-list li:nth-child(1){animation-delay:.92s}
.suite-card.in .bs-list li:nth-child(2){animation-delay:1.02s}
.suite-card.in .bs-list li:nth-child(3){animation-delay:1.12s}
.suite-card.in .bs-list li:nth-child(4){animation-delay:1.22s}
.suite-card.in .bs-list li:nth-child(5){animation-delay:1.32s}

/* --- 2e. Analytics: bars that grow, a sentiment split -------------------- */
.an-bars{display:flex;align-items:flex-end;gap:7px;height:74px;margin-bottom:12px}
.an-bars i{
  flex:1;border-radius:4px 4px 2px 2px;min-height:5px;
  background:linear-gradient(180deg,#3E82F0,rgba(154,72,198,.5));
  transform-origin:bottom;
}
.suite-card.in .an-bars i{animation:anGrow .85s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes anGrow{from{transform:scaleY(.04);opacity:.4}to{transform:scaleY(1);opacity:1}}
.an-legend{display:flex;flex-wrap:wrap;gap:6px}
.an-tag{
  display:inline-flex;align-items:center;gap:6px;padding:3.5px 9px;border-radius:999px;font-size:11px;
  color:rgba(255,255,255,.74);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
}
.an-tag b{color:#fff;font-weight:600}
.an-sw{width:7px;height:7px;border-radius:2px;flex:none}

/* --- 2f. Integrations: a quiet grid of names ----------------------------- */
.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.ig-chip{
  padding:9px 8px;border-radius:9px;text-align:center;font-size:11.5px;font-weight:500;
  color:rgba(255,255,255,.72);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.075);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.suite-card.in .ig-chip{animation:indSay .4s backwards}
.suite-card.in .ig-chip:nth-child(1){animation-delay:.2s}
.suite-card.in .ig-chip:nth-child(2){animation-delay:.26s}
.suite-card.in .ig-chip:nth-child(3){animation-delay:.32s}
.suite-card.in .ig-chip:nth-child(4){animation-delay:.38s}
.suite-card.in .ig-chip:nth-child(5){animation-delay:.44s}
.suite-card.in .ig-chip:nth-child(6){animation-delay:.5s}
.suite-card.in .ig-chip:nth-child(7){animation-delay:.56s}
.suite-card.in .ig-chip:nth-child(8){animation-delay:.62s}

/* --- 2g. Playground: providers taking turns ------------------------------ */
.pg-list{display:flex;flex-direction:column;gap:7px}
.pg-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;border-radius:9px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.74);
}
.pg-row b{font-weight:600;color:rgba(255,255,255,.9)}
.pg-ms{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:rgba(255,255,255,.44)}
.suite-card.in .pg-row{animation:pgTurn 6s linear infinite}   /* no `backwards` — see prLit above */
.suite-card.in .pg-row:nth-child(1){animation-delay:0s}
.suite-card.in .pg-row:nth-child(2){animation-delay:1.5s}
.suite-card.in .pg-row:nth-child(3){animation-delay:3s}
.suite-card.in .pg-row:nth-child(4){animation-delay:4.5s}
@keyframes pgTurn{
  0%,20%{background:rgba(62,130,240,.12);border-color:rgba(62,130,240,.26);color:#fff}
  21%,100%{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.07)}
}

/* ============================================================================
   3. REDUCED MOTION — everything legible, nothing moving.
   A looping demo is the worst offender for anyone who asked for stillness, so the
   loops do not merely pause: each panel is pinned to a sensible resting frame.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .ind-photo img,.ind-card.in .ind-photo img{transform:none;transition:none}
  .ind-badge,.ind-card.in .ind-badge{opacity:1;translate:none;transition:none}
  .ind-card.in .ind-msg,
  .ind-card.in .ind-who,
  .suite-card.in .wg-msg,
  .suite-card.in .wg-card,
  .suite-card.in .wg-rail i,
  .suite-card.in .hd-tbl tbody tr,
  .suite-card.in .bs-ask,
  .suite-card.in .bs-done,
  .suite-card.in .bs-list li,
  .suite-card.in .an-bars i,
  .suite-card.in .ig-chip,
  .suite-card.in .wg-dot{animation:none!important;opacity:1!important;translate:none!important;transform:none!important}
  /* The looping conversation rests on its FINISHED state — question and answer both
     readable — rather than pausing wherever the cycle happened to be. The typing
     indicator stays down: it only means anything as part of the motion. */
  .ind-card.in .ind-typing,.ind-card.in .ind-typing i{animation:none!important;opacity:0!important}
  .suite-card.in .wg-rail i{width:58%}
  /* The two looping highlights rest on their first row rather than on none, so the
     panel still shows what "the step being executed" looks like. */
  .suite-card.in .pr-step,.suite-card.in .pr-step .pr-n,.suite-card.in .pg-row{animation:none!important}
  .suite-card.in .pr-step:first-child{background:rgba(62,130,240,.13);border-color:rgba(62,130,240,.26);color:#fff}
  .suite-card.in .pr-step:first-child .pr-n{background:linear-gradient(135deg,#3E82F0,#9A48C6);color:#fff}
  .suite-card.in .pg-row:first-child{background:rgba(62,130,240,.12);border-color:rgba(62,130,240,.26);color:#fff}
}

/* ============================================================================
   4. TRUST ROW + STAT BAND + LANDING PRICING + FAQ
   ========================================================================= */

/* --- the trust row --------------------------------------------------------
   This replaces a bare line of text. It is deliberately NOT a wall of customer
   logos: we have no named, consented customers to show (every testimonial on this
   page is anonymised to a role), and inventing them would be fabricating an
   endorsement. It is also deliberately not a row of SOC 2 / ISO / HIPAA badges —
   our own /security page says in plain words that we are not certified to any of
   them and warns buyers about vendors who claim otherwise. What is here is what we
   can actually stand behind, including a certification with a number you can look up. */
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:16px}
.trust-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  font-size:12.5px;font-weight:500;color:var(--ink2,#4a5568);
  background:rgba(120,140,180,.07);border:1px solid rgba(120,140,180,.16);
}
.trust-chip b{font-weight:650;color:var(--ink,#0d1220)}
.dark .trust-chip{color:rgba(255,255,255,.72);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.dark .trust-chip b{color:#fff}
.trust-chip .ic{font-size:14px;line-height:1}

/* --- the stat band -------------------------------------------------------- */
.statband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:820px){.statband{grid-template-columns:repeat(2,minmax(0,1fr))}}
.statbox{
  padding:22px 18px;border-radius:16px;text-align:center;
  background:linear-gradient(160deg,rgba(62,130,240,.07),rgba(214,46,150,.05));
  border:1px solid rgba(120,140,180,.16);
}
.dark .statbox{background:linear-gradient(160deg,rgba(62,130,240,.12),rgba(214,46,150,.08));border-color:rgba(255,255,255,.09)}
.statbox b{
  display:block;font-size:40px;line-height:1.05;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(135deg,#3E82F0,#9A48C6 55%,#D62E96);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.statbox span{display:block;margin-top:7px;font-size:13px;color:var(--ink2,#5a6478)}
.dark .statbox span{color:rgba(255,255,255,.62)}

/* --- landing pricing ------------------------------------------------------
   These carry the same [data-tier] / [data-usd] hooks the pricing page uses, so
   /js/pricing-fx.js fills them from GET /api/billing/pricing — the single price
   source (D-010). No figure is typed into this page, so it cannot drift from what
   a customer is actually charged. */
/* Six plans, so three across and two down rather than one long row — at four-plus
   columns the feature lists get too narrow to read and the cards grow very tall. */
.tier-lite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
@media(max-width:1040px){.tier-lite{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.tier-lite{grid-template-columns:1fr}}
/* The first bullet of every plan but Free is an "everything in X" line: it is a
   heading for the list, not an item, so it loses the tick and gains a rule. */
.tier-lite li:first-child{padding-left:0;font-weight:600;color:var(--ink,#0d1220);
  border-bottom:1px solid rgba(120,140,180,.16);padding-bottom:9px;margin-bottom:2px}
.tier-lite li:first-child::before{content:none}
.dark .tier-lite li:first-child{color:#fff;border-color:rgba(255,255,255,.1)}
.tier-lite .tier{display:flex;flex-direction:column;padding:24px 20px;border-radius:16px}
.tier-lite .price{font-size:34px;font-weight:700;letter-spacing:-.02em;margin:6px 0 0}
.tier-lite .per{font-size:12.5px;color:var(--ink3,#8892a4);margin-bottom:14px}
.tier-lite ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.tier-lite li{position:relative;padding-left:21px;font-size:13.5px;line-height:1.5;color:var(--ink2,#4a5568)}
.tier-lite li::before{content:"✓";position:absolute;left:0;top:-1px;color:#3E82F0;font-weight:700}
.dark .tier-lite li{color:rgba(255,255,255,.7)}
.price-foot{text-align:center;margin-top:18px;font-size:14px;color:var(--ink2,#5a6478)}
.dark .price-foot{color:rgba(255,255,255,.62)}

/* --- FAQ ------------------------------------------------------------------ */
.faq-lite{max-width:820px;margin:0 auto}
.faq-lite details{
  border:1px solid rgba(120,140,180,.18);border-radius:13px;margin-bottom:10px;
  background:rgba(255,255,255,.6);overflow:hidden;
}
.dark .faq-lite details{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09)}
.faq-lite summary{
  padding:15px 18px;font-weight:600;font-size:15px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq-lite summary::-webkit-details-marker{display:none}
.faq-lite summary::after{content:"+";font-size:19px;font-weight:400;color:#9A48C6;flex:none;transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.faq-lite details[open] summary::after{transform:rotate(45deg)}
.faq-lite p{margin:0;padding:0 18px 16px;font-size:14px;line-height:1.7;color:var(--ink2,#4a5568)}
.dark .faq-lite p{color:rgba(255,255,255,.68)}
/* The panel opens rather than snapping. grid-template-rows 0fr->1fr animates a height
   nobody has to measure, which is what makes this work with translated copy of any
   length — a fixed max-height would clip German and over-shoot Japanese. */
.faq-lite details::details-content{
  block-size:0;transition:block-size .3s cubic-bezier(.2,.7,.2,1),content-visibility .3s allow-discrete;
  overflow:hidden;
}
.faq-lite details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion: reduce){
  .faq-lite summary::after,.faq-lite details::details-content{transition:none!important}
}