/* Shared layout for the deeper pages and the reworked home page (October 2026).
   Reuses tokens.css, base.css (.section, .section-intro, .button, .text-link, .check-list) and the
   refresh's typography. Logical properties only, so Arabic and Urdu mirror without overrides.
   One accent (blue-600), one radius system (--r-md / --r-lg), dividers before cards. */

/* Page hero: stacked, inline-start aligned, four elements at most */
.page-hero{position:relative;overflow:hidden;padding-block:140px 56px;background:linear-gradient(180deg,#fff 0%,#f8fbff 60%,#fff 100%)}
.page-hero .container{display:grid;gap:22px;justify-items:start;max-width:min(1200px,calc(100% - 96px))}
.page-hero h1{font-size:clamp(38px,5vw,66px);font-weight:600;letter-spacing:-.042em;line-height:1.04;max-width:16ch}
.page-hero .lead{max-width:36rem;color:var(--ink-2)}
.page-hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:8px}
.page-hero .status-line{font-size:13px;color:var(--ink-3)}
@media(max-width:819px){.page-hero{padding-block:112px 40px}.page-hero .container{max-width:calc(100% - 48px)}}
@media(max-width:479px){.page-hero .container{max-width:calc(100% - 32px)}.page-hero h1{font-size:clamp(34px,10.5vw,44px)}}

.fine-print a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}

/* Home hero status line under the buttons */
.hero-refined .hero-note{margin-top:18px;font-size:13px;color:var(--ink-3)}

/* Section rhythm on the deeper pages */
.page-section{padding-block:72px}
.page-section+.page-section{border-block-start:1px solid var(--line)}
.page-section .section-intro{margin-block-end:36px}
.page-section .section-intro>p{margin-block-start:14px;max-width:60ch;font-size:17px;color:var(--ink-3)}
.page-section h2{font-size:clamp(28px,3.4vw,44px)}
.page-section h3{font-size:19px;letter-spacing:-.02em;margin-block-end:8px}
.page-section p,.page-section li{font-size:16px;line-height:1.65}
.prose{max-width:62ch;display:grid;gap:16px;align-content:start}
.prose ul{display:grid;gap:10px;padding-inline-start:20px;list-style:disc}
.prose li{color:var(--ink-2)}
.prose a{color:var(--blue-600);text-decoration:underline;text-underline-offset:4px}
.prose a.text-link{text-decoration:none}
.prose a.text-link:hover{text-decoration:underline}
.prose strong{color:var(--ink);font-weight:600}
.section-tight{padding-block:96px}
@media(max-width:819px){.section-tight{padding-block:72px}}
@media(max-width:819px){.page-section{padding-block:52px}}

/* Promises: four items separated by lines, not four equal cards */
.promise-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block-start:1px solid var(--line)}
.promise-grid>div{display:grid;align-content:start;gap:12px;padding:28px 24px 30px;border-inline-end:1px solid var(--line)}
.promise-grid>div:last-child{border-inline-end:0}
.promise-grid .icon{width:26px;height:26px;color:var(--blue-600)}
.promise-grid h3{font-size:18px;margin:0}
.promise-grid p{font-size:15px;line-height:1.55;color:var(--ink-3)}
@media(max-width:1023px){.promise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.promise-grid>div:nth-child(2n){border-inline-end:0}.promise-grid>div:nth-child(n+3){border-block-start:1px solid var(--line)}}
@media(max-width:599px){.promise-grid{grid-template-columns:1fr}.promise-grid>div{border-inline-end:0;padding:22px 0}.promise-grid>div+div{border-block-start:1px solid var(--line)}}

/* Business types: nine links in a three-by-three grid */
.types-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.types-grid>a{position:relative;display:grid;align-content:space-between;gap:28px;min-height:150px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);transition:border-color .25s,box-shadow .25s,transform .25s}
.types-grid>a:hover{border-color:var(--blue-200);box-shadow:var(--shadow-2);transform:translateY(-3px)}
.types-grid strong{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em}
.types-grid small{display:block;margin-block-start:6px;font-size:14px;color:var(--ink-3)}
.types-grid .arrow{justify-self:end;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);color:var(--blue-600);transition:background .2s,border-color .2s}
.types-grid>a:hover .arrow{background:var(--blue-50);border-color:var(--blue-200)}
[dir=rtl] .types-grid .arrow svg{transform:scaleX(-1)}
@media(max-width:899px){.types-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.types-grid>a:last-child{grid-column:span 2}}
@media(max-width:599px){.types-grid{grid-template-columns:1fr;gap:10px}.types-grid>a{min-height:0;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:18px}.types-grid>a:last-child{grid-column:auto}}

/* Comparison tables: real tables on wide screens, stacked rows on phones */
.compare-table{width:100%;border-collapse:collapse;font-size:15px}
.compare-table th,.compare-table td{text-align:start;vertical-align:top;padding:16px 14px;border-block-start:1px solid var(--line)}
.compare-table thead th{border-block-start:0;padding-block:0 12px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.compare-table th[scope=row]{font-weight:600;color:var(--ink);width:26%}
.compare-table td{color:var(--ink-2)}
.compare-table td.is-amyn{color:var(--ink);font-weight:550}
.compare-table .mono{font-size:14px}
@media(max-width:699px){
  .compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .compare-table tr{display:grid;gap:6px;padding-block:16px;border-block-start:1px solid var(--line)}
  .compare-table th[scope=row],.compare-table td{display:block;width:auto;padding:0;border:0}
  .compare-table td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-block-end:2px}
}

/* "Built today / planned" honesty box */
.honesty-box{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.honesty-box>div{padding:24px 26px}
.honesty-box>div+div{border-inline-start:1px solid var(--line);background:var(--paper)}
.honesty-box h3{display:flex;align-items:center;gap:10px;font-size:15px;margin-block-end:14px}
.honesty-box h3 i{width:9px;height:9px;border-radius:50%;background:var(--green)}
.honesty-box>div+div h3 i{background:var(--amber)}
.honesty-box ul{display:grid;gap:9px}
.honesty-box li{font-size:15px;color:var(--ink-2);padding-inline-start:16px;position:relative}
.honesty-box li::before{content:'';position:absolute;inset-inline-start:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--line)}
.honesty-box p{margin-block-start:14px;font-size:13px;color:var(--ink-3)}
@media(max-width:699px){.honesty-box{grid-template-columns:1fr}.honesty-box>div+div{border-inline-start:0;border-block-start:1px solid var(--line)}}

/* Two-column content: prose beside an aside panel */
.content-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:40px;align-items:start}
.aside-panel{padding:24px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.aside-panel h3{font-size:15px;margin-block-end:12px}
.aside-panel p,.aside-panel li{font-size:14px;color:var(--ink-2)}
@media(max-width:899px){.content-grid{grid-template-columns:1fr;gap:24px}}

/* Prose beside a wide illustration (the installment card) */
.illustration-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
@media(max-width:899px){.illustration-grid{grid-template-columns:1fr;gap:24px}}

/* Illustrative money lines (aside panels) */
.payout-lines{display:grid;margin:0}
.payout-lines>div{display:flex;justify-content:space-between;gap:16px;padding-block:10px;border-block-start:1px solid var(--line);font-size:14px}
.payout-lines dt{color:var(--ink-2)}
.payout-lines dd{margin:0;color:var(--ink);font-size:14px}
.payout-lines .is-total{border-block-start:2px solid var(--ink);font-weight:600}
.payout-lines .is-total dt{color:var(--ink)}

/* Numbered steps */
.step-list{display:grid;gap:0;counter-reset:step}
.step-list>li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding-block:18px;border-block-start:1px solid var(--line)}
.step-list>li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;color:var(--blue-600);padding-block-start:4px}
.step-list strong{display:block;font-size:16px;margin-block-end:4px}
.step-list p{font-size:15px;color:var(--ink-3)}

/* Dated notes and footnotes */
.note-line{margin-block-start:28px;padding-block-start:14px;border-block-start:1px solid var(--line);font-size:13px;color:var(--ink-3);max-width:62ch}
.note-line a{color:var(--blue-600);text-decoration:underline;text-underline-offset:4px}

/* Teaser blocks on the home page: a short statement, three facts, one link */
.teaser{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.teaser .fact-rows{display:grid}
.teaser .fact-rows>div{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-block:14px;border-block-start:1px solid var(--line);font-size:15px}
.teaser .fact-rows>div:last-child{border-block-end:1px solid var(--line)}
.teaser .fact-rows span:first-child{color:var(--ink-3)}
.teaser .fact-rows span:last-child{color:var(--ink);font-weight:550}
.teaser .fact-rows .row-head{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-block-start:0;padding-block:0 10px}
.teaser .fact-rows .row-head span{color:var(--ink-3);font-weight:600}
.teaser .text-link{margin-block-start:20px}
@media(max-width:899px){.teaser{grid-template-columns:1fr;gap:22px}}

/* Three-sentence promise with a soft panel */
.promise-panel{padding:40px;border-radius:var(--r-lg);background:linear-gradient(160deg,#f9fbff,#eef4fd)}
.promise-panel h2{font-size:clamp(28px,3.4vw,40px);margin-block-end:16px}
.promise-panel p{max-width:60ch}
.promise-panel .text-link{margin-block-start:18px}
@media(max-width:599px){.promise-panel{padding:22px}}

/* Fee list and "never" list */
.fee-list{display:grid;gap:12px;max-width:40rem}
.fee-list li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:16px;color:var(--ink-2)}
.fee-list li .icon{width:22px;height:22px;color:var(--blue-600);margin-block-start:2px}
.fee-list li strong{color:var(--ink)}

/* Images on the deeper pages */
.page-figure{margin:0}
.page-figure .photo-frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.page-figure img{width:100%;height:auto;display:block}
.page-figure figcaption{margin-block-start:10px;font-size:13px;color:var(--ink-3)}

/* Calculator (compare page): plain inputs, visible labels, result in mono */
.calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.calc label{display:grid;gap:6px;font-size:13px;font-weight:550;color:var(--ink-2)}
.calc input{min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;font-size:16px;background:#fff}
.calc input:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 4px var(--blue-100)}
.calc input[aria-invalid=true]{border-color:var(--red)}
.calc input:disabled,.calc button:disabled{opacity:.55;cursor:default}
.calc output{grid-column:1/-1;display:grid;gap:4px;padding-block-start:18px;border-block-start:1px solid var(--line)}
.calc output strong{font-family:'Geist Mono',ui-monospace,monospace;font-size:clamp(28px,4vw,40px);letter-spacing:-.03em;color:var(--ink)}
.calc output span{font-size:13px;color:var(--ink-3)}
@media(max-width:699px){.calc{grid-template-columns:1fr;padding:20px}}

/* Status table: a feature per row with a Built / Being built / Planned badge */
.status-table{width:100%;max-width:56rem;border-collapse:collapse;font-size:15px}
.status-table th,.status-table td{text-align:start;vertical-align:top;padding:13px 12px;border-block-start:1px solid var(--line)}
.status-table thead th{border-block-start:0;padding-block:0 10px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.status-table th[scope=row]{font-weight:500;color:var(--ink)}
.status-table td{color:var(--ink-2)}
.status-table tbody tr:last-child th,.status-table tbody tr:last-child td{border-block-end:1px solid var(--line)}
.status{display:inline-flex;align-items:center;gap:9px;font-weight:550;color:var(--ink)}
.status::before{content:'';flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--green)}
.status.is-building::before{background:var(--amber)}
.status.is-planned::before{background:transparent;border:2px solid var(--ink-3);width:7px;height:7px}
@media(max-width:599px){.status-table th[scope=row],.status-table td{padding-inline:0}}

/* Named rows: a label beside its explanation, divided by lines (devices, promises, differences) */
.feature-rows{display:grid;max-width:58rem;border-block-start:1px solid var(--line)}
.feature-rows>div{display:grid;grid-template-columns:minmax(150px,.32fr) 1fr;gap:10px 36px;padding-block:22px;border-block-end:1px solid var(--line)}
.feature-rows h3{font-size:17px;margin:0}
.feature-rows p{color:var(--ink-2)}
.feature-rows p+p{margin-block-start:8px}
.feature-rows .text-link{margin-block-start:10px}
@media(max-width:699px){.feature-rows>div{grid-template-columns:1fr;gap:6px;padding-block:18px}}

/* Questions, answered: disclosure list */
.faq-list{max-width:52rem}
.faq-list details{border-block-start:1px solid var(--line);padding-block:20px}
.faq-list details:last-child{border-block-end:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:22px;list-style:none;cursor:pointer;font-size:17px;font-weight:550;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary>span{font-size:22px;font-weight:300;line-height:1;color:var(--ink-3);flex-shrink:0;transition:transform .3s}
.faq-list details[open] summary>span{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--blue-600)}
.faq-list details p{padding-block-start:12px;max-width:60ch;color:var(--ink-2)}
.faq-list details p+p{padding-block-start:0;margin-block-start:10px}
.faq-list details a{color:var(--blue-600);text-decoration:underline;text-underline-offset:4px}

/* A figure under the hero copy */
.page-hero .page-figure{justify-self:stretch;width:100%;margin-block-start:12px}
.page-hero .page-figure img{aspect-ratio:3/2;object-fit:cover;max-height:560px}

/* Spacing utilities (no inline styles on the pages) */
.gap-top{margin-block-start:24px}
.gap-top-lg{margin-block-start:36px}
.link-row{display:flex;flex-wrap:wrap;gap:12px 28px;margin-block-start:24px}

/* Calculator actions */
.calc-actions{grid-column:1/-1;margin:0}

/* Footer: four groups (Product, Business types, Trust, Company) */
.footer-columns{grid-template-columns:repeat(4,1fr)}
@media(max-width:819px){.footer-columns{grid-template-columns:repeat(2,1fr)}}

/* Deep pages do not load the motion layer, which positions the closing banner's glass marks; keep the banner compact */
.deep-page .final-cta .cta-glass-mark{display:none}
.deep-page .final-cta{padding-block:64px}
.deep-page .final-cta h2{font-size:clamp(36px,4.6vw,56px)}
.deep-page .cta-eyebrow{display:none}

/* Closing row on deeper pages */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-block-start:28px}