/* ==========================================================================
   Corporate theme layer — hrkita.com v4 public site (2026-09-26)

   WHAT: the Texon corporate-theme LAYOUT PATTERNS (contact strip, full-bleed
   dark hero, notched entry cards, numbered process timeline, services grid,
   figures band, dark page banners) rebuilt on HRKita's own tokens.

   WHAT IT IS NOT: a copy of the Texon theme. No Texon CSS, icon font, font or
   photograph is used; the reference mirror under docs/reference/ is study
   material only (paid theme, see docs/reference/README.md). Colours stay the
   brief's navy/orange from tokens.css — Texon's electric blue is NOT adopted.

   HOW IT IS WIRED: loaded LAST (tokens → fonts → base → public → corporate) and
   only restyles classes that public.css defines, plus the new ones below. It is
   one override layer on purpose (app-layout-design §1.3): deleting this file
   and its entry in layouts/application.html.erb restores the previous look,
   except for the markup changes recorded in docs/decisions/007.

   Sections, in page order:
     1 topbar · 2 header · 3 buttons · 4 hero · 5 section heads · 6 trust band
     7 entry cards · 8 timeline · 9 figures band · 10 services grid
     11 testimonials · 12 CTA · 13 inner-page banner · 14 footer
     15 scroll-in animation · 16 hero calculator + lead step · 17 pain cards
     18 flow teaser · 19 sticky contact bar · 20 thank-you page
   Sections 16–19: homepage conversion redesign, 2026-09-30
   (docs/superpowers/specs/2026-09-30-homepage-conversion-design.md).
   ========================================================================== */

/* The inner-page banner (13) paints beyond its column with border-image.
   That is ink overflow and should not scroll, but `clip` guarantees no phone
   ever gets a sideways scrollbar from it; unlike `hidden`, `clip` does not make
   body a scroll container, so the sticky header keeps working. */
body.public{overflow-x:clip}
/* The clip on <body> alone does not hold on a phone: a body's overflow is
   handed to the viewport, so the body itself stops clipping, and a mobile
   browser then sizes its layout to the widest content. Sections that slide in
   from the right (section 15) start 48px to the right of their place, which
   made a 390px phone lay the homepage out 422px wide and show it zoomed out
   with a blank strip on the right (measured 2026-09-30). <main> is not the
   body, so its clip stays where it is put. `clip`, not `hidden`, for the same
   reason as above: sticky elements inside main keep working. */
body.public main{overflow-x:clip}

/* ---- 1. Topbar: contact strip above the header --------------------------- */
.topbar{background:var(--navy-deep);color:var(--on-navy-2);font-size:var(--fs-md);line-height:1.3}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2) 24px;min-height:40px;flex-wrap:wrap}
.topbar-tag{color:var(--on-navy-3);min-width:0;flex:1 1 18rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-list{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);list-style:none;margin:0;padding:0}
.topbar-list li{display:inline-flex;align-items:center;gap:var(--s2);min-width:0}
.topbar-list .icon{color:var(--on-navy-3);flex:none}
.topbar-list a{color:var(--on-navy-2)}
.topbar-list a:hover{color:var(--on-navy)}
@media (max-width:760px){.topbar-tag,.topbar-address{display:none}.topbar-row{justify-content:center}}

/* ---- 2. Header ----------------------------------------------------------- */
.site-header{background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:var(--shadow-1)}
.nav{min-height:76px}
.nav-link{color:var(--ink);font-weight:700}
@media (max-width:960px){.nav{min-height:64px}}

/* ---- 3. Buttons: the arrow-in-a-circle call to action --------------------- */
/* The circle turns 45° on hover: motion on the control being pointed at, and
   nowhere else. base.css removes it under prefers-reduced-motion. */
.btn-arrow{gap:10px;padding-right:6px}
.btn-arrow__icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;transition:transform .2s ease}
.btn-arrow:hover .btn-arrow__icon{transform:rotate(45deg)}
.btn-primary .btn-arrow__icon{background:var(--on-navy);color:var(--navy)}
.btn-light .btn-arrow__icon{background:var(--navy);color:var(--on-navy)}
.btn-sm.btn-arrow{padding-right:4px}
.btn-sm .btn-arrow__icon{width:28px;height:28px}

/* ---- 4. Hero: full-bleed dark band --------------------------------------- */
/* The previous hero was two cards on the page ground. The Texon pattern runs
   the ground itself dark from edge to edge, so the navy card disappears into
   it: .hcard loses its own background and becomes the left column. */
.hero--band{position:relative;overflow:hidden;color:var(--on-navy);padding-block:clamp(48px,5vw,80px) clamp(56px,8vw,112px);
  background:radial-gradient(ellipse 55% 70% at 88% 18%,var(--glow),transparent 70%),
             linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,var(--action) 135%)}
/* Fine diagonal light rays, faded out towards the copy so they never sit
   behind text at full strength. */
.hero--band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 96px);
  mask-image:linear-gradient(90deg,transparent 15%,var(--black) 70%)}
.hero--band > .wrap{position:relative}
.hero--band .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero--band .hcard{background:none;padding:0;border-radius:0;overflow:visible;gap:var(--s6)}
.hero--band .hcard::before{display:none}
/* Capped at 3rem and 21ch: the hero copy is long (six lines at 3.35rem/18ch),
   and at that size the actions fell below the fold of a 1366×768 laptop. */
.hero--band .hcard h1{font-size:var(--fs-d1-hero);line-height:1.06;max-width:21ch}
/* The picture sits in a frame offset down-left (Texon's about-image frame),
   drawn as a second shadow so it costs no extra element. */
.hero--band .pcard{border-radius:var(--r-xl);box-shadow:-16px 16px 0 0 rgba(255,255,255,.10),0 40px 80px -40px rgba(0,0,0,.7);min-height:420px}
.hero--band .pcard--photo{background:var(--navy-deep)}
@media (max-width:860px){
  .hero--band .hero-grid{grid-template-columns:1fr}
  .hero--band .pcard{min-height:280px;box-shadow:-10px 10px 0 0 rgba(255,255,255,.10)}
}

/* ---- 5. Section heads: pill eyebrow, larger titles, centred variant ------- */
/* The eyebrow becomes a small outlined pill with a dot. justify-self keeps the
   pill its own width inside the grid instead of stretching to the column. */
.sec-head .eyebrow,.page-head .eyebrow{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:var(--s1) 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-sm)}
.sec-head .eyebrow::before,.page-head .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.sec-head h2{font-size:var(--fs-d2);line-height:1.12}
.sec-head--center{justify-items:center;text-align:center;margin-inline:auto}
.sec-head--center .eyebrow{justify-self:center}
.sec-head--center h2{max-width:24ch}
.sec-head--center .lede{max-width:60ch}

/* ---- 6. Trust band: client names and logos as tiles ----------------------- */
.trust-band{background:var(--surface);padding-block:var(--s6)}
.trust-band .logos{gap:12px;padding-block:0}
.trust-band .logos > img,.trust-band .logos > .name{display:grid;place-items:center;min-height:64px;padding:12px var(--s5);border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.trust-band .logos > img{height:64px;width:auto;max-width:180px;padding:var(--s4) var(--s5)}
@media (max-width:620px){.trust-band .logos{gap:8px}.trust-band .logos > .name{min-height:44px;padding:8px 12px;font-size:var(--fs-sm)}.trust-band .logos > img{height:48px;padding:var(--s3) 12px}}

/* ---- 7. Entry cards: navy cards with a notched arrow corner --------------- */
/* Three equal columns replace the 3+3+6 bento; the wide consulting card is
   one of three here. The notch is painted in the SECTION ground colour, so it
   reads as a bite out of the card with the arrow sitting in it. */
.section--tint .bento{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.section--tint .bento .mb{grid-column:auto}
.bento .mb{position:relative;background:var(--navy);border:0;color:var(--on-navy-2);padding:var(--s6) var(--s5) var(--s5);gap:12px;transition:transform .2s ease,box-shadow .2s ease}
.bento a.mb:hover{box-shadow:var(--shadow-3);transform:translateY(-3px)}
.bento .mb h3{color:var(--on-navy);font-size:var(--fs-xl);padding-right:var(--s7)}
.bento .mb .ic{background:rgba(255,255,255,.12);color:var(--on-navy)}
.bento .mb .calc div{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.bento .mb .calc small{color:var(--on-navy-3)}
.bento .mb .calc b{color:var(--on-navy)}
.bento .mb .more{color:var(--on-navy);text-decoration:underline;text-underline-offset:4px}
.bento .mb--wide{grid-template-columns:1fr;align-items:stretch}
.bento .mb--wide .more{margin-top:auto}
.notch{position:absolute;top:0;right:0;width:64px;height:64px;display:grid;place-items:center;background:var(--surface-2);border-bottom-left-radius:22px}
.notch .icon{width:42px;height:42px;padding:12px;border-radius:50%;background:var(--navy-deep);color:var(--on-navy);transition:transform .2s ease}
a.mb:hover .notch .icon{transform:rotate(45deg)}
@media (max-width:960px){.section--tint .bento{grid-template-columns:1fr}}

/* ---- 8. Timeline: the three "what changes" steps -------------------------- */
.timeline-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s5) var(--s8);align-items:start}
.timeline-layout .sec-head{margin-bottom:0;position:sticky;top:120px}
.timeline{grid-template-columns:1fr;gap:20px;position:relative;padding-left:76px}
.timeline::before{content:"";position:absolute;left:27px;top:12px;bottom:12px;width:2px;background:var(--line-2)}
.timeline .panel{position:relative;border:0;box-shadow:var(--shadow-2);padding:var(--s5) var(--s6)}
/* The step number reuses the counter public.css already increments on .panel. */
.timeline .panel::before{position:absolute;left:-76px;top:20px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:var(--on-navy);font-family:var(--display);font-weight:700;font-size:var(--fs-lg);box-shadow:0 0 0 6px var(--paper)}
@media (max-width:900px){.timeline-layout{grid-template-columns:1fr}.timeline-layout .sec-head{position:static}}
@media (max-width:520px){
  .timeline{padding-left:0}.timeline::before{display:none}
  .timeline .panel::before{position:static;width:44px;height:44px;box-shadow:none}
}

/* ---- 9. Figures band: the proof numbers ---------------------------------- */
/* Straddles the boundary between the paper timeline and the pale services
   section, so it reads as a hinge between the two. */
.stats-section{background:linear-gradient(var(--paper) 50%,var(--pale) 50%);padding-block:var(--s2)}
.stats-band{margin-top:0;border:0;gap:0;border-radius:var(--r-xl);padding:clamp(24px,4vw,44px) clamp(16px,3vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  background:radial-gradient(ellipse 60% 120% at 100% 0%,var(--glow),transparent 70%),linear-gradient(135deg,var(--navy-deep),var(--navy) 60%,var(--action) 140%)}
.stats-band div{background:none;text-align:center;padding:var(--s4) 12px}
.stats-band div + div{border-left:1px solid rgba(255,255,255,.14)}
.stats-band strong{color:var(--on-navy);font-size:var(--fs-d5);font-weight:700;margin-bottom:var(--s2)}
.stats-band small{color:var(--on-navy-2)}
@media (max-width:640px){.stats-band div + div{border-left:0;border-top:1px solid rgba(255,255,255,.14)}}

/* ---- 10. Services grid: the product modules ------------------------------ */
/* The section head takes the first cell of the grid (Texon "tailored
   solutions" block), the modules fill the rest. */
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
/* The head spans two rows so the grid has no empty cell with four modules. */
.services-grid .sec-head{margin:0;align-content:center;padding-right:var(--s4);grid-row:span 2}
.services-grid .sec-head h2{font-size:var(--fs-d3)}
.services-grid .pcardx{border:0;box-shadow:var(--shadow-1);padding:var(--s6);gap:12px;transition:transform .2s ease,box-shadow .2s ease}
.services-grid .pcardx:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.svc-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--on-navy);font-family:var(--mono);font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em}
.svc-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-family:var(--display);font-weight:700;font-size:var(--fs-base);color:var(--ink)}
.svc-more .icon{width:24px;height:24px;padding:var(--s1);border-radius:50%;background:var(--navy);color:var(--on-navy)}
.services-note{margin-top:var(--s5)}
@media (max-width:1000px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.services-grid .sec-head{grid-column:1 / -1;grid-row:auto}}
@media (max-width:620px){.services-grid{grid-template-columns:1fr}}

/* ---- 11. Testimonials ----------------------------------------------------- */
.section--navy{background:radial-gradient(ellipse 50% 80% at 0% 100%,var(--glow),transparent 70%),linear-gradient(160deg,var(--navy-deep),var(--navy))}
.section--navy .sec-head .eyebrow{background:rgba(255,255,255,.06)}
.quote{border-radius:var(--r-lg);padding:var(--s6)}

/* ---- 12. CTA band --------------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;
  background:radial-gradient(ellipse 50% 90% at 100% 0%,var(--glow),transparent 70%),linear-gradient(135deg,var(--navy-deep),var(--navy) 60%,var(--action) 140%)}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 1px,transparent 1px 80px)}
.cta-band > *{position:relative}

/* ---- 13. Inner-page banner ------------------------------------------------ */
/* Texon opens every inner page with a dark full-width banner. Our inner pages
   put the breadcrumb and .page-head inside .wrap, so the banner is painted with
   a border-image that extends 100vw either side: full-bleed ground, content
   still on the grid, no markup change on thirteen views.
   Scoped to heads that are DIRECT children of .wrap (or of a direct <article>),
   which excludes the demo form, whose .page-head sits inside a two-column
   layout and must stay on the light ground. */
.wrap > .breadcrumb,.wrap > .page-head,.wrap > article > .page-head{
  border-image:linear-gradient(135deg,var(--navy-deep),var(--navy) 60%,var(--action) 140%) fill 0 / / 0 100vw;
  --ink:var(--on-navy); --ink-2:var(--on-navy-2); --ink-3:var(--on-navy-3); --orange-text:var(--orange);
  --surface:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.24);
  color:var(--ink)}
.wrap > .breadcrumb{padding-top:var(--s6);margin:0}
.wrap > .breadcrumb a{color:var(--on-navy-2)}
.wrap > .page-head,.wrap > article > .page-head{padding-block:var(--s7) var(--s8);margin-bottom:var(--s7)}
.wrap > .breadcrumb + .page-head,.wrap > .breadcrumb + article > .page-head{padding-top:var(--s5)}
.wrap > .page-head h1,.wrap > article > .page-head h1{color:var(--on-navy)}
.wrap > .page-head .post-meta,.wrap > article > .page-head .post-meta{color:var(--on-navy-3)}

/* ---- 13b. Dark grounds and dark mode ------------------------------------ */
/* btn-light takes --surface, which is dark in dark mode, so on the hero and
   the CTA band it rendered dark-on-dark and vanished. On a ground that is
   dark in BOTH modes the light button is pinned to white. */
.hero--band .btn-light,.cta-band .btn-light{background:var(--on-navy);border-color:var(--on-navy);color:var(--navy)}
.section--pale{--surface:var(--surface-on-pale);--line:var(--line-on-pale)}
/* public.css gives these grounds fixed light-mode text tokens; the -on-tint
   tokens carry the same values in light mode and readable ones in dark mode
   (tokens.css). Without this line, muted text on the products and pain-point
   sections is dark grey on a dark ground whenever the page is dark. */
.section--tint,.section.alt,.section--pale{--ink-3:var(--ink-3-on-tint);--orange-text:var(--orange-text-on-tint)}
/* Text coloured --navy is invisible on a dark surface, and --navy does not
   change in dark mode (it is also a background). These are the text uses of
   navy on the public pages; in dark mode they take the ink colour instead.
   The header states (hovered or open menu item, hovered language link, the
   burger, the text wordmark) were added 2026-09-30: a hovered menu item was
   navy on the dark surface, contrast 1.01, so it vanished under the pointer.
   The two rules below must carry the SAME list: the first serves a visitor
   whose system is dark, the second one who chose dark with the header switch
   (pinned by theme_toggle_test). */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(.panel h3,.faq summary,.pcardx h3,.mb h3,.post-item h3 a,.menu a b,.metric b,.gallery-card__body b,.btn-ghost,.proof:not(.stats-band) strong,.nav-link:hover,.nav-link[aria-expanded=true],.lang-switch a:hover,.lang-switch a:focus-visible,.nav-burger,.site-header .brand){color:var(--ink)} }
:root[data-theme="dark"] :is(.panel h3,.faq summary,.pcardx h3,.mb h3,.post-item h3 a,.menu a b,.metric b,.gallery-card__body b,.btn-ghost,.proof:not(.stats-band) strong,.nav-link:hover,.nav-link[aria-expanded=true],.lang-switch a:hover,.lang-switch a:focus-visible,.nav-burger,.site-header .brand){color:var(--ink)}
/* The navy step badge and module badge need an edge against the dark page. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .svc-ic{box-shadow:inset 0 0 0 1px var(--line-2)} }
:root[data-theme="dark"] .svc-ic{box-shadow:inset 0 0 0 1px var(--line-2)}

/* ---- 14. Footer ----------------------------------------------------------- */
.site-footer{background:var(--navy-deep);margin-top:var(--s8)}
/* A page that ends in a padded section (the CTA band) already has its space;
   the footer margin on top of it left a ~160px empty band. */
main:has(> .section:last-child) + .site-footer{margin-top:0}
.site-footer h4{color:var(--on-navy)}

/* ---- 15. Scroll-in animation (reveal_controller.js) ----------------------- */
/* Content fades up or slides in; images swipe in with a 3D turn (Texon's GSAP
   swipe: 12rem travel, 20° rotateY, perspective 1200, a power3-out curve).
   The hidden start state exists ONLY when both are true:
   - the user has not asked for reduced motion, and
   - the controller has confirmed it is running (html.reveal-ready).
   So with JavaScript off, or reduced motion on, content is simply visible —
   never an invisible page waiting for a script. */
@media (prefers-reduced-motion:no-preference){
  .reveal-ready [data-reveal]{
    opacity:0;
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--reveal-delay,0ms);
    will-change:opacity,transform;
  }
  .reveal-ready [data-reveal="up"]{transform:translateY(32px)}
  .reveal-ready [data-reveal="left"]{transform:translateX(-48px)}
  .reveal-ready [data-reveal="right"]{transform:translateX(48px)}
  .reveal-ready [data-reveal="swipe-right"]{transform:perspective(1200px) translateX(12rem) rotateY(-20deg);transform-origin:right center}
  .reveal-ready [data-reveal="swipe-left"]{transform:perspective(1200px) translateX(-12rem) rotateY(20deg);transform-origin:left center}
  /* On a phone 12rem is most of the screen; the swipe shortens to a nudge. */
  @media (max-width:620px){
    .reveal-ready [data-reveal="swipe-right"]{transform:perspective(1200px) translateX(3rem) rotateY(-12deg)}
    .reveal-ready [data-reveal="swipe-left"]{transform:perspective(1200px) translateX(-3rem) rotateY(12deg)}
  }
  .reveal-ready [data-reveal].is-revealed{opacity:1;transform:none}
}

/* ---- 16. Hero calculator and the lead step --------------------------------- */
/* The calculator replaces the hero photo: a light card on the dark band, so
   the one thing a visitor can DO is also the brightest thing on screen. It
   keeps the photo frame's offset shadow so the hero composition is unchanged. */
/* The pale plate behind the card is a hard-edged rounded square ("squircle"):
   a shadow with no blur and no spread, so it is exactly the card's size and
   shape, shifted 16px down and to the left. It was blurred into a glow for a
   few minutes on 2026-09-30 and Vida asked for the plate back, the same on
   every screen. There is deliberately no phone override: a smaller offset on
   phones made the visible strip differ between desktop and phone. At 16px the
   plate's left edge meets the screen edge on a phone (the page padding is
   16px), which is intended. */
.hero-calc .calc-box{box-shadow:-16px 16px 0 0 rgba(255,255,255,.10),0 40px 80px -40px rgba(0,0,0,.7);border:0;border-radius:var(--r-xl);color:var(--ink)}
.calc-box--compact{padding:clamp(18px,2.4vw,28px);gap:var(--s3)}
.calc-box--compact .calc-box__title{margin-top:4px;font-size:var(--fs-d6)}
.calc-box--compact .field{margin-bottom:var(--s3)}
.calc-box--compact form .btn{width:100%}
/* In the hero only the headline figure, the gross and the category show
   (.big is also a div, hence n+4); the bracket, rate and worked calculation stay on /kepatuhan/pph-21-ter. */
.calc-box--compact .result{padding:var(--s4) var(--s5);gap:8px}
.calc-box--compact .result .row:nth-of-type(n+4){display:none}
.calc-box--compact .note{font-size:var(--fs-sm)}
/* The result pops once when it appears: on page load (the hero example) and
   each time the frame is replaced by a new calculation. It never loops. */
@media (prefers-reduced-motion:no-preference){
  .calc-box turbo-frame .result{animation:calc-pop .45s cubic-bezier(.22,1,.36,1)}
  @keyframes calc-pop{from{transform:scale(.98);box-shadow:0 0 0 0 var(--orange)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 45%,transparent)}to{transform:none;box-shadow:0 0 0 0 transparent}}
}
.hero-assure{color:var(--on-navy-3);font-size:var(--fs-base);margin-top:calc(-1 * var(--s3))}
/* The lead step sits under the result inside the calculator card. The dashed
   rule marks it as a separate, optional step, not part of the tax result. */
.lead-step{border-top:1px dashed var(--line-2);padding-top:var(--s4);margin-top:var(--s2);display:grid;gap:var(--s2)}
.lead-step__title{font-family:var(--display);font-weight:700;font-size:var(--fs-lg);line-height:1.3;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.lead-step__title::-webkit-details-marker{display:none}
/* The plus is drawn as two bars, not typed as a "+" character. A text glyph
   sits on the font's baseline, not in the middle of its box, so when the
   circle turned 45 degrees to make the close mark, the cross landed low and to
   the right of centre (seen 2026-09-30). Two centred bars turn about the
   circle's own centre and stay in the middle. */
.lead-step__title::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(var(--navy),var(--navy)) center/14px 2.5px no-repeat,linear-gradient(var(--navy),var(--navy)) center/2.5px 14px no-repeat,var(--orange);transition:transform .2s ease}
.lead-step[open] .lead-step__title::after{transform:rotate(45deg)}
.lead-step__body{color:var(--ink-2);font-size:var(--fs-base)}
.lead-step form{display:grid;gap:0;margin-top:var(--s2)}
.lead-step .field{margin-bottom:var(--s3)}
.lead-step__hint{font-size:var(--fs-md);color:var(--ink-3);margin:calc(-1 * var(--s2)) 0 var(--s3)}
.lead-step__consent{font-size:var(--fs-md);margin-bottom:var(--s3)}
.lead-step .btn{width:100%}
.cta-assure{margin-top:var(--s2);font-size:var(--fs-md);color:var(--on-navy-3)}

/* ---- 17. Pain cards: the three expensive failures ------------------------- */
/* Red marks the failure and green the prevention: the semantic tokens already
   used for status, so the before/after reads without a new colour. */
.pain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);align-items:start}
.pain-card{background:var(--surface);border-radius:var(--r-lg);border-top:4px solid var(--bad);padding:var(--s5) 24px;box-shadow:var(--shadow-1);display:grid;gap:var(--s3);transition:box-shadow .2s ease,transform .2s ease}
.pain-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.pain-card__head{display:grid;gap:var(--s3)}
.pain-card__code{justify-self:start;font-family:var(--mono);font-weight:700;font-size:var(--fs-sm);letter-spacing:.04em;padding:4px var(--s3);border-radius:var(--r-pill);background:var(--bad-bg);color:var(--bad)}
.pain-card h3{font-size:var(--fs-xl);line-height:1.3;color:var(--ink)}
.pain-card__cost{color:var(--ink-2);font-size:var(--fs-base)}
.pain-card__label{display:block;font-family:var(--display);font-weight:700;font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--bad);margin-bottom:4px}
.pain-card__fix{border-top:1px solid var(--line);padding-top:var(--s3)}
.pain-card__fix summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--display);font-weight:700;color:var(--ok)}
.pain-card__fix summary::-webkit-details-marker{display:none}
.pain-card__fix summary::after{content:"+";font-weight:400;font-size:var(--fs-2xl);line-height:1}
.pain-card__fix[open] summary::after{content:"−"}
.pain-card__fix ul{list-style:none;padding:0;margin:var(--s3) 0 var(--s3);display:grid;gap:8px}
.pain-card__fix li{position:relative;padding-left:var(--s5);font-size:var(--fs-base);color:var(--ink-2)}
.pain-card__fix li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;border-radius:50%;background:var(--ok-bg);box-shadow:inset 0 0 0 1.5px var(--ok)}
.pain-card__more{font-family:var(--display);font-weight:700;font-size:var(--fs-base)}
@media (max-width:960px){.pain-grid{grid-template-columns:1fr}}

/* ---- 18. Flow teaser: four steps, one screen each -------------------------- */
/* Without teaser--ready (no JavaScript) every panel shows, stacked. The active
   tab is the one orange element in this viewport: it is where you are. */
.teaser{display:grid;gap:var(--s5)}
.teaser__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.teaser__tabs [role=tab]{display:flex;align-items:center;gap:var(--s3);padding:12px var(--s4);border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink);font-family:var(--display);font-weight:700;font-size:var(--fs-base);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.teaser__tabs [role=tab]:hover{border-color:var(--navy)}
.teaser__tabs [role=tab]:focus-visible{outline:3px solid color-mix(in srgb,var(--action) 45%,transparent);outline-offset:2px}
.teaser__tabs [aria-selected=true]{background:var(--orange);border-color:var(--orange);color:var(--navy)}
.teaser__num{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--navy);color:var(--on-navy);font-size:var(--fs-md)}
.teaser__stage{display:grid;gap:var(--s5)}
.teaser__panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);align-items:center}
.teaser--ready .teaser__panel:not(.is-active){display:none}
@media (prefers-reduced-motion:no-preference){.teaser--ready .teaser__panel.is-active{animation:teaser-in .4s cubic-bezier(.22,1,.36,1)}@keyframes teaser-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}
.teaser__copy{display:grid;gap:var(--s3)}
.teaser__copy h3{font-size:var(--fs-d6);line-height:1.2}
.teaser__copy p{color:var(--ink-2)}
/* The mock screen: a window chrome bar and label/value rows, drawn in tokens.
   It is decoration (aria-hidden); the copy beside it carries the meaning. */
.mock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);overflow:hidden}
.mock__bar{display:flex;align-items:center;gap:var(--s2);padding:12px 16px;background:var(--navy);color:var(--on-navy-2);font-family:var(--mono);font-size:var(--fs-sm)}
.mock__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.mock__bar span{margin-left:8px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock__bar em{font-style:normal;padding:2px 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:var(--on-navy)}
.mock__body{padding:var(--s2) var(--s4) var(--s3)}
.mock__row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-base);color:var(--ink-2)}
.mock__row:last-child{border-bottom:0}
.mock__val{font-family:var(--mono);font-weight:500;color:var(--ink);text-align:right}
.mock__val--ok{color:var(--ok)}
.mock__val--warn{color:var(--warn)}
.teaser__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.teaser__cta p{font-family:var(--display);font-weight:700;color:var(--ink);margin:0}
@media (max-width:860px){.teaser__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.teaser__panel{grid-template-columns:1fr}}

/* ---- 19. Sticky contact bar (homepage) ------------------------------------ */
/* Slides up from the bottom edge once the hero is gone (sticky_cta_controller).
   While it shows, the floating WhatsApp button is hidden: both live at the
   bottom edge and would overlap on a phone, and the bar carries WhatsApp too. */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:45;background:color-mix(in srgb,var(--navy-deep) 96%,transparent);color:var(--on-navy);box-shadow:0 -12px 30px -18px rgba(0,0,0,.6);transform:translateY(110%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.sticky-cta.is-visible{transform:none}
.sticky-cta__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px;padding-block:var(--s3)}
.sticky-cta__text{margin:0;font-family:var(--display);font-weight:600;color:var(--on-navy-2);font-size:var(--fs-base)}
.sticky-cta__acts{display:flex;gap:var(--s3);flex:none}
body:has(.sticky-cta.is-visible) .wa-float{display:none}
body:has(.sticky-cta) .site-footer{padding-bottom:80px}
@media (max-width:620px){.sticky-cta__text{display:none}.sticky-cta__acts{flex:1}.sticky-cta__acts .btn{flex:1}}

/* ---- 20. Thank-you page: the next step after a lead (2026-09-30) ---------- */
.thanks-h{font-size:var(--fs-lg);margin:var(--s5) 0 var(--s3)}
.thanks-steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.thanks-steps li{counter-increment:step;position:relative;padding-left:var(--s7);color:var(--ink-2);min-height:30px}
.thanks-steps li::before{content:counter(step);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--on-navy);font-family:var(--display);font-weight:700;font-size:var(--fs-md)}
.thanks-wa{margin-top:var(--s5);text-align:center}