/* Adentro centered-first redesign layer (spec v2.0, Oct 12, 2026). Generated by tools/centered.py. Presentation only. */

/* Shared shell rails: 1248px content width, 40 / 24 / 20 / 16px gutters. */
:root{--v2-gutter:40px}
@media(max-width:1023px){:root{--v2-gutter:24px}}
@media(max-width:599px){:root{--v2-gutter:20px}}
@media(max-width:359px){:root{--v2-gutter:16px}}
.nav .wrap,footer .wrap{max-width:calc(1248px + 2 * var(--v2-gutter));padding-left:var(--v2-gutter);padding-right:var(--v2-gutter)}

/* Rhythm: 96 / 72 / 56px sections. */
section{padding:96px 0}
section.proofband,section.logostrip{padding:0}
@media(max-width:1023px){section{padding:72px 0}}
@media(max-width:599px){section{padding:56px 0}}

/* Type scale: 62 / 47 / 38 hero, 40 / 36 / 32 section, 24 card heading. */
.hero h1{font-size:62px;line-height:1.08;letter-spacing:-.043em;max-width:24ch;margin-top:0;text-wrap:balance}
section h2:not(.am *):not(.pb-label):not(.report-card *){font-size:40px;line-height:1.15;letter-spacing:-.04em;text-wrap:balance}
:is(.vcard,.pain,.step,.diff-item) h3{font-size:24px;line-height:1.25;letter-spacing:-.02em}
@media(max-width:1023px){.hero h1{font-size:47px;letter-spacing:-.04em}section h2:not(.am *):not(.pb-label):not(.report-card *){font-size:36px}}
@media(max-width:599px){.hero h1{font-size:38px;line-height:1.1}section h2:not(.am *):not(.pb-label):not(.report-card *){font-size:32px}:is(.vcard,.pain,.step,.diff-item) h3{font-size:22px}}

/* A. Centered hero: eyebrow, H1, deck and actions on one axis; media centered below. */
.hero,.hero.inner{padding:clamp(56px,7vw,100px) 0 clamp(48px,6vw,84px);min-height:0}
.hero .wrap,.hero.inner .wrap{padding-top:0;padding-bottom:0;min-height:0;text-align:center}
.hero .wrap{gap:clamp(44px,4vw,56px)}
.hero .wrap>div:first-child:not(.kicker):not(.eyebrow){justify-self:center;width:min(100%,900px)}
.hero :is(.kicker,.eyebrow,.heroline){margin-bottom:24px}
.hero .sub{font-size:18px;line-height:1.65;max-width:59ch;margin:24px auto 28px}
.hero .wrap>p:not(.sub){max-width:59ch}
.hero .cta-row,.hero .offer-row{gap:12px;justify-content:center}
.hero:has(.am){background:radial-gradient(60% 46% at 50% 78%,rgba(240,240,254,.85),rgba(246,246,253,.4) 60%,transparent 100%),#fff}
/* The animation needs 900px to keep its desktop composition, so its stage is 960px instead of the 860px reference. */
.hero .am{width:100%;max-width:960px;margin-left:auto;margin-right:auto;justify-self:center;text-align:left}
@media(max-width:599px){.hero .sub{font-size:16px;line-height:1.7}.hero .cta-row,.hero .offer-row{gap:8px}.hero .wrap{gap:32px}}
@media(max-width:359px){.hero .cta-row,.hero .offer-row{display:grid;width:100%}.hero .cta-row :is(a,button),.hero .offer-row :is(a,button){width:100%}}

/* Eyebrows: blue, 12px, .09em, with the dot. */
.kicker,.eyebrow,section .kicker,section .kicker.on-dark,.hero .eyebrow,.proof .eyebrow,.calc-eyebrow{color:#3232C8;font-size:12px;font-weight:500;letter-spacing:.09em;line-height:1.5;text-transform:uppercase}
.kicker[style*="--azure"]{color:#3232C8!important}
.kicker,.eyebrow{display:inline-flex;align-items:center;gap:10px}
.kicker::before,.eyebrow::before,section .kicker::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.hero :is(.kicker,.eyebrow){display:flex;justify-content:center}

/* B / C / E. Centered section introductions; cards, tables, lists and prose stay left-aligned. */
section:not(.hero):not(.calc-sec)>.wrap>:is(.kicker,.eyebrow){display:flex;justify-content:center}
section:not(.hero):not(.calc-sec)>.wrap>h2{text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
section:not(.hero):not(.calc-sec)>.wrap>:is(h2+p,.lead,.intro,.proofqual){text-align:center;max-width:62ch;margin-left:auto;margin-right:auto}
/* Same intro pattern where the label, title and deck sit in one leading wrapper (homepage-style sections). */
section:not(.hero):not(.calc-sec)>.wrap>div:first-child:has(>h2):not(.plat-head):not(.prose){text-align:center}
section:not(.hero):not(.calc-sec)>.wrap>div:first-child:has(>h2):not(.plat-head):not(.prose)>h2{max-width:820px;margin-left:auto;margin-right:auto}
section:not(.hero):not(.calc-sec)>.wrap>div:first-child:has(>h2):not(.plat-head):not(.prose)>p{max-width:62ch;margin-left:auto;margin-right:auto}
section:not(.hero):not(.calc-sec)>.wrap>div:first-child:has(>h2):not(.plat-head):not(.prose)>:is(.kicker,.eyebrow){display:flex;justify-content:center}
/* Exception: the report's "about" block is reading text, so it stays left-aligned. */
section.s-report>.wrap>div:first-child:has(>h2){text-align:left}
section.s-report>.wrap>div:first-child:has(>h2)>:is(h2,p){margin-left:0;margin-right:0}
section.s-report>.wrap>div:first-child:has(>h2)>:is(.kicker,.eyebrow){justify-content:flex-start}
section.s-report:not(.hero):not(.calc-sec)>.wrap>:is(h2,h2+p,p){text-align:left;margin-left:0;margin-right:0}
section.s-report:not(.hero):not(.calc-sec)>.wrap>:is(.kicker,.eyebrow){justify-content:flex-start}
section .kicker,.kicker,.eyebrow{gap:10px}
.plat-head{flex-direction:column;align-items:center;text-align:center;gap:20px}
.plat-head p{max-width:62ch}
.proof>.wrap>a:not(.btn){display:block;text-align:center}
.integ>.wrap>p{text-align:center;max-width:62ch;margin-left:auto;margin-right:auto}
.integ>.wrap>a.integ-link{display:block;text-align:center}
.faq-list{margin-left:auto;margin-right:auto}

/* C01 buttons: 48px, 14px/500, 12x18 inset, 8px radius. */
.btn,section .btn,section .btn.btn-lg,main .btn{min-height:48px;padding:12px 18px;font-size:14px;font-weight:500;line-height:1.4;gap:14px;border-radius:8px}
.nav .btn{min-height:44px;padding:10px 16px;font-size:14px;font-weight:500}
section .btn-ghost,section .btn-ghost.light,:is(main,section) .btn-ghost,.hero .btn-ghost,.final .btn-ghost{min-height:48px;padding:12px 18px;font-size:14px;font-weight:500;line-height:1.4;border:1px solid #737988;border-radius:8px;background:#fff;color:#202330}
section .btn-ghost:hover,section .btn-ghost.light:hover,:is(main,section) .btn-ghost:hover{background:#F5F6F8;border-color:#737988}
@media(max-width:480px){.nav .btn{min-height:40px;padding:7px 12px;font-size:13px}}
:is(main,section,header,footer) :is(a,button,summary,input,select):focus-visible,.announce:focus-visible{outline:3px solid #3232C8;outline-offset:4px}

/* C03 tabs: neutral rail, white selected tab with blue text. */
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;border-radius:10px;background:#F5F6F8;border:1px solid #E5E7ED}
.tab{min-height:44px;padding:8px 16px;border:1px solid transparent;border-radius:7px;background:transparent;color:#626979;font-size:14px;font-weight:500;box-shadow:none}
.tab:hover{border-color:transparent;color:#202330}
.tab.active{color:#3232C8;background:#fff;border-color:#E5E7ED;box-shadow:0 1px 3px rgba(32,35,48,.03)}

/* C04 accordion: thin rules, 64px rows. */
:is(main,section) .faq-list{border-top:1px solid #E5E7ED}
:is(main,section) details{background:transparent;border:0;border-bottom:1px solid #E5E7ED;border-radius:0;padding:0;margin:0}
:is(main,section) details summary{min-height:64px;padding:20px 0;font-size:16px;font-weight:500!important;gap:20px}
:is(main,section) details summary::after{color:#626979;font-size:22px;font-weight:400}
:is(main,section) details p{padding:0 32px 24px 0;font-size:15px}

/* C05 / C06 / C11 cards and stages: 12px cards with 32px inset (24px on phones), 16px stages. */
.vcard,.pain,.step,.diff-item,.case,.card,.price,.path{padding:32px;border-radius:12px}
.vcard:hover,a.card:hover{transform:none;border-color:#AAAADF;box-shadow:0 28px 44px -30px rgba(24,33,70,.28),0 5px 14px -8px rgba(24,33,70,.13),0 1px 3px rgba(24,33,70,.025)}
.calc,.videobox,.chart-card{border-radius:16px}
@media(max-width:599px){.vcard,.pain,.step,.diff-item,.case,.card,.price,.path{padding:24px}}

/* F. Articles: centered title block above, 680px left-aligned reading column. */
.prose{max-width:680px;margin-left:auto;margin-right:auto;text-align:left}

/* G. Closing CTA: the one blue contrast chapter. Same heading, text and actions in the same order. */
.final{background:#fff;border-top:0;padding-left:var(--v2-gutter);padding-right:var(--v2-gutter)}
.final .wrap{max-width:1248px;padding:64px;border-radius:16px;background:#3232C8;color:#fff;text-align:center}
.final :is(h2,p,.kicker,.eyebrow,.final-multi,.scope,.validation),.final a:not(.btn):not(.btn-ghost),.final [style*="color"]{color:#fff!important}
.final p{max-width:62ch;margin-left:auto;margin-right:auto}
.final :is(.kicker,.eyebrow){display:flex;justify-content:center}
.final .btn{background:#fff;border-color:#fff;color:#3232C8}
.final .btn:hover{background:#F0F0FE;border-color:#F0F0FE}
.final .btn-ghost,.final .btn-ghost.light{background:transparent;border-color:rgba(255,255,255,.72);color:#fff}
.final .btn-ghost:hover,.final .btn-ghost.light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.final :is(a,button):focus-visible{outline-color:#fff}
.final .cta-row,.final .offer-row{justify-content:center;gap:12px}
@media(max-width:599px){.final .wrap{padding:32px 24px}}