@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Playfair+Display:ital,wght@1,600&display=swap');

html,body { max-width:100%; overflow-x:hidden; }

.final-home-hero {
    --final-ink:#0b1d48;
    --final-orange:#315be8;
    --final-cream:#f4f7ff;
    --final-green:#4b82f4;
    min-height:calc(100vh - 86px);
    display:grid;
    grid-template-columns:1fr 1fr;
    color:var(--final-ink);
    background:linear-gradient(135deg,#fbfdff 0%,var(--final-cream) 52%,#e9efff 100%);
    overflow:hidden;
}

.final-home-copy {
    align-self:center;
    padding:clamp(48px,6vh,76px) 4vw clamp(42px,5vh,66px) max(5vw,38px);
}

.final-home-eyebrow {
    display:flex;
    align-items:center;
    gap:10px;
    color:#315be8;
    font-size:12px;
    font-weight:900;
    letter-spacing:.16em;
}

.final-home-eyebrow i {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--final-green);
    box-shadow:0 0 0 7px rgba(49,91,232,.12);
}

.final-home-copy h1 {
    margin:20px 0 16px;
    color:var(--final-ink);
    font:800 clamp(50px,4.5vw,74px)/.96 'Manrope',sans-serif;
    letter-spacing:-.06em;
}

.final-home-copy h1 em {
    color:var(--final-orange);
    font:600 italic .82em/1.02 'Playfair Display',serif;
    letter-spacing:-.04em;
}

.final-home-promise {
    max-width:660px;
    margin:0;
    color:#52627f;
    font-size:16px;
    line-height:1.65;
}

.final-home-promise strong { color:#102b68; }

.final-challenge-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    margin:25px 0 9px;
}

.final-challenge-heading span {
    color:#315be8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.15em;
}

.final-challenge-heading small { color:#657493; font-size:11px; }

.final-challenge-picker {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.final-challenge-picker button {
    min-width:0;
    padding:12px 10px;
    border:1px solid #c7d4f4;
    border-radius:10px;
    color:#29416f;
    background:#fff;
    cursor:pointer;
    text-align:left;
    font-size:12px;
    font-weight:800;
    transition:transform .2s,border-color .2s,background .2s,color .2s;
}

.final-challenge-picker button:hover { transform:translateY(-2px); border-color:#6f8ff0; background:#f1f5ff; }
.final-challenge-picker button i { margin-right:6px; color:var(--final-orange); font-style:normal; }
.final-challenge-picker button.active { color:#fff; background:linear-gradient(135deg,#244bcf,#416fea); border-color:#315be8; box-shadow:0 10px 25px rgba(49,91,232,.23); }
.final-challenge-picker button.active i { color:#fff; }

.final-challenge-answer {
    min-height:106px;
    margin:11px 0 16px;
    padding:14px 16px;
    border-left:4px solid var(--final-green);
    border-radius:0 13px 13px 0;
    background:#e8efff;
}

.final-challenge-answer small { color:#315be8; font-size:10px; font-weight:900; letter-spacing:.14em; }
.final-challenge-answer h2 { margin:6px 0 4px; color:var(--final-ink); font:800 20px/1.18 'Manrope',sans-serif; letter-spacing:-.02em; }
.final-challenge-answer p { margin:0; color:#435678; font-size:12px; line-height:1.55; }

.final-home-actions { display:flex; gap:10px; }
.final-home-primary,.final-home-secondary { min-width:210px; display:inline-flex; align-items:center; justify-content:space-between; padding:16px 19px; border-radius:99px; font-size:13px; font-weight:900; }
.final-home-primary { color:#fff; background:linear-gradient(135deg,#244bcf,#416fea); box-shadow:0 14px 30px rgba(49,91,232,.22); }
.final-home-secondary { border:1px solid #c7d4f4; color:var(--final-ink); background:#fff; }
.final-home-login { display:inline-block; margin-top:14px; color:#52627f; font-size:12px; }.final-home-login b { color:#315be8; }

.final-problem-canvas {
    min-height:480px;
    height:min(520px,62vh);
    margin:45px 3vw;
    padding:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:12px;
    position:relative;
    overflow:hidden;
    align-self:center;
    border-radius:28px;
    background:linear-gradient(145deg,#07183d,#153c8e);
}

.final-problem-shot { position:relative; overflow:hidden; border-radius:20px; }
.final-shot-main { grid-row:1/3; }
.final-problem-shot picture,.final-problem-shot img { width:100%; height:100%; display:block; object-fit:cover; }
.final-problem-shot img { filter:saturate(.78); transition:transform .6s,filter .6s; }
.final-problem-shot:hover img { transform:scale(1.025); filter:saturate(1); }
.final-problem-shot::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,18,52,.9),transparent 65%); }
.final-problem-shot > span { position:absolute; z-index:2; left:18px; right:18px; bottom:16px; color:#fff; font-size:13px; font-weight:800; }

.final-solution-bridge {
    position:absolute;
    z-index:5;
    left:50%;
    top:50%;
    width:210px;
    height:210px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:10px solid rgba(255,255,255,.34);
    border-radius:50%;
    color:var(--final-ink);
    background:#fff;
    box-shadow:0 30px 70px rgba(5,22,66,.38);
    transform:translate(-50%,-50%);
    text-align:center;
}

.final-solution-bridge .brand-mark { width:44px; height:44px; }
.final-solution-bridge b { margin-top:10px; font-size:17px; }
.final-solution-bridge small { max-width:175px; margin-top:5px; color:#52627f; font-size:9px; line-height:1.5; letter-spacing:.05em; }

.final-home-transition { color:#f5f8ff; background:linear-gradient(90deg,#07183d,#123b91); }
.final-home-transition .page-shell { min-height:82px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px; }
.final-home-transition span { color:#8eabff; font-size:9px; font-weight:900; letter-spacing:.14em; }
.final-home-transition p { margin:0; font-size:13px; }
.final-home-transition a { font-size:10px; font-weight:900; }

.legacy-home-hero[hidden] { display:none !important; }

/* Final homepage readability and proportion pass. */
.section-pad { padding-block:72px; }
.section-heading { margin-bottom:32px; }
.section-heading h2 { font-size:clamp(34px,3.5vw,47px); }
.section-heading > p,.section-heading.split > p { font-size:16px; line-height:1.65; }
.eyebrow,.section-index { font-size:12px; }

.story-video-shell { width:min(760px,100%); margin-inline:auto; border-radius:17px; padding:10px; }
.story-video-top,.story-video-top small,.story-chapters { font-size:12px; }
.story-video-shell video { border-radius:11px; }
.visual-proof-grid,.problem-strip { width:min(980px,100%); }
.problem-visual,.community-visual { min-height:340px; }
.visual-tag b { font-size:13px; }.visual-tag small { font-size:11px; }
.community-overlay > span { font-size:12px; }.community-overlay p,.community-overlay a { font-size:14px; }
.role-pins span { font-size:11px; }
.problem-strip article > span { font-size:13px; }.problem-strip b { font-size:15px; }.problem-strip small { font-size:12px; }

.reality-stage { min-height:450px; aspect-ratio:16/7.2; }
.reality-copy > span { font-size:12px; }.reality-copy p { font-size:16px; }.reality-copy > div b { font-size:12px; }
.reality-controls button > span { font-size:11px; }.reality-controls b { font-size:14px; }.reality-controls small { font-size:11px; }
.connected-outcome { min-height:450px; }.connected-outcome-copy > span { font-size:11px; }.connected-outcome-copy p { font-size:16px; }.outcome-pulse span { font-size:11px; }

.feature-reels .page-shell { width:min(1020px,calc(100% - 48px)); }
.reel-copy > span,.reel-duration { font-size:10px; }.reel-copy p { font-size:14px; }

.platform-section.section-pad,.problem-solution.section-pad { padding-block:68px; }
.module-orbit-wrap { min-height:520px; }
.module-detail span { font-size:12px; }.module-detail p { font-size:16px; line-height:1.65; }.module-detail a { font-size:15px; }
.module-orbit button { width:108px; height:76px; border-color:#c9d7f5; background:#f3f6ff; color:#24385e; font-size:11px; line-height:1.25; box-shadow:0 9px 24px rgba(35,62,126,.1); }
.module-orbit button:hover,.module-orbit button.active { border-color:#6284ed; color:#173b9a; background:#e5ecff; box-shadow:0 0 0 5px rgba(65,105,225,.1),0 12px 28px rgba(35,62,126,.16); }
.module-orbit button span { font-size:18px; }.orbit-centre b { font-size:16px; }.orbit-centre small { font-size:10px; color:#60708e; }

.problem-solution { background:linear-gradient(180deg,#f7faff 0%,#eaf0ff 100%); }
.comparison-switch { border-color:#bccbec; background:#fff; box-shadow:0 20px 60px rgba(22,55,128,.11); }
.comparison-tabs { background:#dfe8fb; }
.comparison-tabs button { font-size:15px; }
.comparison-tabs button[data-view="without"].active { color:#193b81; background:#edf2ff; box-shadow:0 3px 12px rgba(32,73,158,.14); }
.comparison-tabs button[data-view="with"].active { color:#fff; background:linear-gradient(135deg,#244bcf,#416fea); box-shadow:0 5px 16px rgba(49,91,232,.25); }
.comparison-canvas.without { background:linear-gradient(135deg,#f7f9ff,#e9effd); }
.comparison-canvas.with { background:#fff; }
.chaos-item { color:#263d68; background:#fff; border-color:#cbd7ef; border-left-color:#5b78b9; font-size:14px; }
.connected-flow > span { background:#eef3ff; border-color:#c8d6f5; }.connected-flow i { color:#315be8; }.connected-flow small { color:#52627c; font-size:12px; }.connected-result { background:#e8efff; border-color:#bed0fb; }.connected-result > i { color:#315be8; }.connected-result div { color:#18366f; font-size:14px; }.connected-result small { color:#52678f; font-size:12px; }

/* Keep every homepage problem/solution cue inside the SocietyOrbit blue family. */
.tag-before i { background:#4969ad; }
.tag-after i { background:#315be8; }
.problem-strip article > span { color:#4969ad; }
.problem-strip .solution { background:#e8efff; }
.problem-strip .solution > span { color:#315be8; }

.screen-caption,.preview-label,.story-copy > span,.problem-line b,.solution-line b { font-size:12px; }
.screen-toolbar span,.finance-summary small,.ledger-table > div,.flow-step small,.ticket-head .priority,.ticket-head small,.ticket-screen > p { font-size:12px; }
.ledger-table .table-head,.ledger-table em,.ticket-owner small,.ticket-owner em,.ticket-timeline span small { font-size:11px; }
.role-tabs button { font-size:14px; }.role-copy > span { font-size:12px; }.role-copy li,.role-copy a { font-size:15px; }
.role-dash-top span,.role-task span { font-size:12px; }.health-score small,.health-score p,.role-task small,.role-task em { font-size:11px; }
.mobile-feature-list button span { font-size:14px; }.mobile-feature-list small { font-size:12px; }
.secure-ring span { font-size:12px; padding:8px 11px; background:#edf2ff; border:1px solid #cbd8f7; border-radius:99px; }
.benefit-grid p,.article-grid p,.faq-list p { font-size:15px; }.benefit-grid small,.article-grid article > span,.article-grid article > div { font-size:12px; }
.security-list span,.footer-top b,.footer-top a { font-size:14px; }.footer-bottom,.floating-demo { font-size:12px; }

@media(max-width:1100px) {
    .final-home-hero { grid-template-columns:1fr; }
    .final-home-copy { text-align:center; padding-inline:7vw; }
    .final-home-eyebrow { justify-content:center; }
    .final-home-promise { margin-inline:auto; }
    .final-home-actions { justify-content:center; }
    .final-problem-canvas { min-height:680px; }
}

@media(max-width:700px) {
    .final-home-copy { padding:58px 18px 42px; }
    .final-home-eyebrow { font-size:10px; }
    .final-home-copy h1 { margin-top:18px; font-size:43px; }
    .final-home-copy h1 em { font-size:.82em; }
    .final-home-promise { font-size:13px; }
    .final-challenge-heading { margin-top:24px; }
    .final-challenge-heading small { display:none; }
    .final-challenge-picker { grid-template-columns:1fr 1fr; }
    .final-challenge-picker button { padding:11px 8px; font-size:10px; }
    .final-challenge-answer { text-align:left; }
    .final-challenge-answer h2 { font-size:17px; }
    .final-home-actions { flex-direction:column; }
    .final-home-primary,.final-home-secondary { width:100%; min-width:0; }
    .final-problem-canvas { min-height:430px; height:430px; margin:18px 15px 35px; padding:10px; grid-template-rows:1fr 1fr; border-radius:20px; }
    .final-shot-main { grid-column:1/3; grid-row:auto; }
    .final-solution-bridge { width:165px; height:165px; border-width:7px; }
    .final-solution-bridge .brand-mark { width:34px; height:34px; }
    .final-solution-bridge b { font-size:13px; }
    .final-solution-bridge small { max-width:135px; font-size:5px; }
    .final-problem-shot > span { left:10px; bottom:9px; font-size:10px; }
    .final-home-transition .page-shell { grid-template-columns:1fr; gap:8px; padding-block:22px; text-align:center; }
    .section-pad { padding-block:54px; }
    .section-heading h2 { font-size:34px; }
    .story-video-top,.story-video-top small,.story-chapters { font-size:10px; }
    .problem-visual,.community-visual { min-height:315px; }
    .module-orbit button { font-size:9px; background:#f3f6ff; }
    .orbit-centre small { font-size:8px; }
    .comparison-tabs button { font-size:13px; }
    .chaos-item { font-size:12px; }
    .reality-stage { min-height:470px; }
    .reality-copy > span { font-size:10px; }.reality-copy p { font-size:14px; }.reality-copy > div b { font-size:10px; }
    .reality-controls b { font-size:13px; }.reality-controls small { font-size:10px; }
    .connected-outcome { min-height:520px; }.connected-outcome-copy p { font-size:14px; }
    .feature-reels .page-shell { width:min(100% - 30px,1020px); }
}

@media(prefers-reduced-motion:reduce) {
    .final-problem-shot img,.final-challenge-picker button { transition:none; }
}