/* Refinements layered over the components. css/system.css (loaded last) holds the system. */
.hero-lead {max-width:620px;margin:24px auto 0;}
.small {font-size:1rem;line-height:1.5;}
.redact:hover::after,.redact:focus-visible::after {transform:scaleX(1);}
.doc-panel .redact {background:var(--highlight);}
.doc-panel .redact::after {transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-reveal) var(--ease);}
.doc-panel.is-redacted .redact::after {transform:scaleX(1);}
.doc-tabs .doc-tab-fill {transition:none!important;}
.gate-pg i.target {background:var(--highlight);}
.footer-reveal {padding-bottom:40px;}
@media(max-width:600px){.hero{padding-top:56px;}.doc-panel{padding:24px;}}
@media(prefers-reduced-motion:reduce){.doc-panel .redact::after{transition:none;transform:scaleX(1);}}
/* Keep the advantage dominant once the surrounding words are covered. */
.doc-panel.is-redacted .redact {background:transparent;transition:background-color 0s var(--dur-reveal);}
@media(max-width:600px){.doc-tabs{padding-inline:8px;}}

/* Paper, rather than soft UI cards. Only the hero has stacked sheets. */
.card, .card .card, .panel .card, .cta-panel .card, .doc, .g-frame, .panel .g-frame, .card .g-frame, .panel .doc {
  border-radius:2px;
  border-color:rgba(44,57,55,.09);
  box-shadow:0 1px 2px rgba(44,57,55,.035),0 5px 12px rgba(44,57,55,.045);
}
.card-hover:hover {transform:none;box-shadow:0 2px 4px rgba(44,57,55,.04),0 8px 18px rgba(44,57,55,.055);}
.paper-stack {position:relative;isolation:isolate;margin:24px 0 34px;}
.paper-stack::before,.paper-stack::after {content:"";position:absolute;inset:0;background:var(--surface-2);border:1px solid rgba(44,57,55,.1);border-radius:2px;box-shadow:0 2px 6px rgba(44,57,55,.045);pointer-events:none;}
.paper-stack::before {z-index:-2;transform:translate(1px,9px) rotate(-1.3deg);}
.paper-stack::after {z-index:-1;transform:translate(-2px,4px) rotate(.85deg);}
.paper-stack .doc-panel {position:relative;transform:rotate(-.25deg);}
.doc-tabs {margin-top:28px;}
.faq {gap:0;border-top:1px solid var(--hairline-2);}
.faq-item {background:transparent;border:0;border-bottom:1px solid var(--hairline-2);border-radius:0;box-shadow:none;}
.faq-item>summary {padding:24px 0;text-align:left;}
.faq-item>summary::after {background-color:transparent;}
.faq-answer {padding:0 40px 24px 0;}

/* Seven original papers, duplicated only for the continuous rightward loop. */
.testimonial-controls {display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:24px;}
.testimonial-pause {font:500 var(--text-base) var(--font-sans);padding:10px 16px;border:1px solid var(--hairline-2);border-radius:30px;background:transparent;color:var(--ink);cursor:pointer;}
.testimonial-window {overflow:hidden;margin-top:40px;padding:12px 0 20px;}
.testimonial-track {display:flex;width:max-content;animation:testimonial-drift 160s linear infinite;}
.testimonial-group {display:flex;gap:24px;padding-right:24px;align-items:stretch;}
.testimonial-paper {width:420px;flex:none;display:flex;flex-direction:column;padding:28px;background:var(--surface);border:1px solid var(--hairline);border-radius:2px;box-shadow:0 1px 2px rgba(44,57,55,.025),0 4px 10px rgba(44,57,55,.04);}
.testimonial-paper blockquote {margin:0;font-family:var(--font-display);font-size:var(--text-lead);font-style:italic;font-weight:400;line-height:1.4;}
.testimonial-paper strong {font-weight:500;}
.testimonial-paper footer {margin-top:auto;padding-top:28px;font:500 var(--text-base)/1.5 var(--font-sans);}
.testimonial-paper footer span {font-weight:400;color:var(--ink-3);}
.testimonial-window:hover .testimonial-track,.testimonial-window:focus-within .testimonial-track {animation-play-state:paused;}
.testimonials.is-paused .testimonial-window {overflow-x:hidden;}
.testimonials.is-paused .testimonial-track {animation-play-state:paused;}
@keyframes testimonial-drift {from{transform:translateX(-50%);}to{transform:translateX(0);}}
html[data-static] .testimonial-track {animation:none;}
@media(prefers-reduced-motion:reduce){.testimonial-track{animation:none;}.testimonial-window{overflow-x:auto;}.testimonial-group[aria-hidden]{display:none;}.testimonial-pause{display:none;}}
@media(max-width:600px){.paper-stack{margin-inline:5px;}.testimonial-paper{width:300px;padding:24px;}.testimonial-group{gap:16px;padding-right:16px;}.testimonial-controls{gap:12px;}}

/* Keep the deployment note on two deliberate lines. */
.proof-note {max-width:100%;text-wrap:initial;}

/* Review round: tighter rhythm and consistent section geometry. */

.proof-3 {padding-bottom:0;}
.proof-note {margin-bottom:0;}
.panel, .cta-panel, .panel .gate {border-radius:0;}
.nav .btn-outline {background:transparent;border:1px solid var(--ink);color:var(--ink);box-shadow:none;}
.nav .btn-outline:hover {background:var(--ink);color:var(--paper);}
.graphic-stack {margin:0 0 12px;}
.graphic-stack>.g-frame {position:relative;transform:rotate(-.25deg);}
.gate-pg {border-radius:0;}
.testimonial-paper blockquote {text-indent:-.42em;}
.testimonial-paper footer {text-indent:0;}
.proof .small {line-height:1.5;}

/* Give the reader time to understand the editorial idea before activating it. */
.gate {height:270px;}


/* Kase's direction: inline redaction paired with a quietly crossed-off list. */
.kase-intro {max-width:1000px;}
.kase-intro>.caps {color:var(--mint-deep);}
.kase-intro h2 {margin:20px 0;max-width:1000px;}

/* More visible hero sheets, without exaggerating the paper effect. */
.hero .paper-stack::before {transform:translate(3px,7px) rotate(-1deg);}
.hero .paper-stack::after {transform:translate(-3px,3px) rotate(.7deg);}
.hero .paper-stack::before,.hero .paper-stack::after {border-color:rgba(44,57,55,.16);}

/* A dark testimonial interlude shared by both directions. */
.testimonials {background:var(--ink);color:var(--paper);}
.testimonials .caps,.testimonials .muted,.testimonials .testimonial-paper footer span {color:#c5cfcb;}
.testimonials .testimonial-paper {background:#364440;border-color:rgba(255,255,255,.12);color:var(--paper);box-shadow:none;}
.testimonials .testimonial-pause {color:var(--paper);border-color:rgba(255,255,255,.35);}
.testimonials .testimonial-pause:hover {background:rgba(255,255,255,.08);}
.testimonials :focus-visible {outline-color:var(--mint);}

/* Quote papers match the main page within the dark section. */
.testimonials .testimonial-paper {background:var(--paper);color:var(--ink);border-color:rgba(44,57,55,.1);}
.testimonials .testimonial-paper footer span {color:var(--ink-3);}

/* A continuous dark band beneath the floating hero document. */
.hero-proof-wrap {position:relative;isolation:isolate;padding-bottom:40px;}
.hero-proof-wrap::before {content:"";position:absolute;z-index:-1;inset:var(--band-top,70%) 0 0;background:var(--ink);}
.hero-proof-wrap .doc-tab {color:var(--paper);}
.hero-proof-wrap .doc-tab-sub,.hero-proof-wrap .proof-note {color:#c5cfcb;}
.hero-proof-wrap .doc-tab::after {background:rgba(255,255,255,.22);}
.hero-proof-wrap .doc-tab-fill {background:var(--paper);}
.hero-proof-wrap .proof-3 {color:var(--paper);}
.hero-proof-wrap .proof-rule {background:rgba(255,255,255,.2);}
.hero-proof-wrap .icon-chip {color:var(--ink);}
.hero-proof-wrap .doc-tab:focus-visible {outline-color:var(--mint);}

/* Hero-scale solution statement, with a readable supporting measure. */
#solution .lead {max-width:620px;margin-inline:auto;}

.hero-lead {font-family:var(--font-display);font-weight:400;font-size:var(--text-lead);line-height:1.4;}

.hero h1 {max-width:1100px;}

/* Shared reading scale: small headings 28, serif reading 24, body/UI 16. */
.faq-item>summary,.btn-lg {font-size:var(--text-lead);}
.doc-tab,.doc-tab-sub {font-size:var(--text-base);}

/* Preserve reading width instead of shrinking type on compact phones. */
@media(max-width:600px){#demo .cta-panel{padding:32px 24px;}#demo .cta-panel .card{padding:24px;}}

/* Main Kase treatment; ?kase=parallel preserves the earlier comparison. */
.transform-statements {margin-top:40px;}
.transform-statement {padding:32px 0;border-top:1px solid var(--hairline-2);font:400 var(--display-s)/1.45 var(--font-display);max-width:1000px;}
.transform-statement:last-child {border-bottom:1px solid var(--hairline-2);}
.transform-cut {background:linear-gradient(var(--ink),var(--ink)) left center/var(--redaction,0%) 110% no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.transform-statement.is-revealed .transform-cut {color:transparent;}
.transform-benefit {display:inline-block;margin-top:8px;}
@media(max-width:600px){.transform-statement{font-size:var(--text-lead);padding:28px 0;}}
@media(prefers-reduced-motion:reduce){.transform-cut{transition:none;}}

/* Tighter space around the proof rule; refinement.js trims it to the text. */
.proof-rule {margin-top:33px;}
.proof-note {margin-top:33px;}

/* Transform statements: display-scale leading, rules only as wide as the text. */
.transform-statements {width:fit-content;max-width:100%;}
.transform-statement {line-height:var(--leading-snug);}
.transform-benefit {margin-top:0;}

/* Review round 3. */
.transform-statement:last-child {border-bottom:0;}
.pillar-row-solo {grid-template-columns:minmax(0,1fr);}
.pillar-row-solo > div {max-width:640px;}
.features {padding-block:var(--s-32);}

/* Review round 5: busywork title on the left, redaction statements on the right. */
@media(min-width:1025px){
  .kase-story {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-16);align-items:start;}
  .kase-intro h2 {font-size:var(--display-m);line-height:var(--leading-tight);margin-bottom:0;}
}

/* Review round 6. */
.testimonial-paper {padding:52px;}
.testimonial-paper footer {padding-top:28px;}
@media(max-width:600px){.testimonial-paper{padding:48px;}}
.features .icon-chip {width:4.0625rem;height:4.0625rem;}
.features .icon-chip svg {width:1.6875rem;height:1.6875rem;}
.grid-trio .badge {height:1.5rem;padding:0 .5rem;border:0;border-radius:4px;background:var(--mint-wash);color:var(--mint-deep);font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:var(--track-caps);text-transform:uppercase;}

/* FAQ: one open at a time; refinement.js animates the answer, the plus folds into a minus. */
.faq-item > summary::after {transition:transform var(--dur-slow) var(--ease),background-size var(--dur-slow) var(--ease);}
.faq-item[open] > summary::after {transform:none;}
.faq-item.is-open > summary::after {transform:rotate(180deg);background-size:.6rem 1.5px,1.5px 0;}
.faq-answer.is-animating {overflow:hidden;}

/* Review round 8: multi-line display type sits about 10% tighter. */
.display-xl,.display-l {line-height:.9;}
.display-m,h3.display-m {line-height:1;}
.proof-3 .display-s {line-height:1.04;}
@media(min-width:1025px){.kase-intro h2 {line-height:.92;}}

/* Footer status dot: a slow ring pulses out to show the service is live. */
.live-dot {position:relative;width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none;}
.live-dot::after {content:"";position:absolute;inset:0;border-radius:50%;background:var(--mint);animation:live-pulse 2s var(--ease) infinite;}
@keyframes live-pulse {from{transform:scale(1);opacity:.6;}to{transform:scale(3);opacity:0;}}
@media(prefers-reduced-motion:reduce){.live-dot::after{animation:none;opacity:0;}}
html[data-static] .live-dot::after {animation:none;opacity:0;}

/* Review round 11: the demo title spans the dark panel above the copy and form. */
#demo .cta-panel > h2 {max-width:none;text-align:center;text-wrap:balance;}

/* The dark band closes with the same 96px the next section opens with. */
.hero-proof-wrap {padding-bottom:var(--s-24);}

/* Dark areas except the footer stop 120px past the 1200px column (1440px total) on wide screens. */
.hero-proof-wrap::before,.hero-proof-wrap>.atmosphere {left:max(0px,calc((100% - 1440px) / 2));right:max(0px,calc((100% - 1440px) / 2));}
.testimonials,.testimonials.atmosphere-dark {background-color:transparent;}
.testimonials>.atmosphere {left:max(0px,calc((100% - 1440px) / 2));right:max(0px,calc((100% - 1440px) / 2));}
@media(min-width:1280px){
  #demo .cta-panel {--bleed:min(120px,calc((100vw - 1200px) / 2));margin-inline:calc(-1 * var(--bleed));padding-inline:calc(96px + var(--bleed));}
}

/* A 1px rule between the solution title group and the Smart row: 96px to the text above, 96px to the row below. */
#solution + .section {position:relative;}
#solution + .section::before {content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--hairline-2);}

/* Optical centring: every button label sits 1px lower, same overall height. */
.btn {padding-top:calc(.75rem + 1px);padding-bottom:calc(.75rem - 1px);}
.btn-lg {padding-top:calc(.7rem + 1px);padding-bottom:calc(.7rem - 1px);}
.testimonial-pause {padding-top:11px;padding-bottom:9px;}

/* One card finish everywhere: every white card and white icon circle matches the "Millions" proof card. */
:root {--card-edge:1px solid rgba(44,57,55,.09);--card-shadow:var(--shadow);}
.icon-chip:not(.icon-chip-sm),.g-frame,.testimonial-paper,.testimonials .testimonial-paper {border:var(--card-edge);box-shadow:var(--card-shadow);}
.card-hover:hover {box-shadow:var(--card-shadow);}

/* FAQ: a white card sits behind an item on hover and while it is open, reaching past the text so the copy keeps its place. It fades with the same timing as the open/close slide. */
.faq-item {position:relative;isolation:isolate;overflow:visible;}
.faq-item>summary:hover {background-color:transparent;}
.faq-item::before {content:"";position:absolute;inset:-1px -24px;z-index:-1;background:#fff;border-radius:2px;box-shadow:var(--card-shadow);opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease);}
.faq-item.is-open::before {opacity:1;}
@media(hover:hover){.faq-item:hover::before {opacity:1;}}
@media(max-width:600px){.faq-item::before {inset:-1px -12px;}}
@media(prefers-reduced-motion:reduce){.faq-item::before {transition:none;}}
/* Phone review round: one tight section rhythm (48px a side), smaller body leads, and the three
   hero proofs become a swipe row that peeks at the next card. */
@media(max-width:600px){
  .section,.section-sm,.features{padding-block:var(--s-12);}
  .hero-proof-wrap{padding-bottom:var(--s-12);}
  .proof-3{padding-top:var(--s-12);}
  .pillar-row{padding-block:var(--s-10);}
}
/* Tablet: every light content section sits inside wider side margins, 120px at 820
   and scaling with the screen. The testimonial strip stays full bleed. */
@media(min-width:601px) and (max-width:1024px){
  .sheet>section.container,.sheet>section:not(.testimonials)>.container{padding-inline:14.65vw;}
  #solution + .section::before{left:14.65vw;right:14.65vw;}
  .proof{gap:var(--s-4);}
  .proof .card{padding-inline:var(--s-3);}
  #demo .grid-2{grid-template-columns:minmax(0,1fr);gap:var(--s-10) !important;}
}