/* ============================================================ ReadyRef v3 — shared component layer. styles.css carries the light THEME (tokens + chrome) for every page. This file carries the v3 COMPONENT LANGUAGE: sticker buttons, 2px-bordered cards, band sections, chunky steps and chips, the character cast, and the prose treatment. Opt a page in with . ============================================================ */ :root:has(body.v3){background:#fff} body.v3{ /* The palette lives in styles.css :root — the single source of truth for every page. These are ALIASES so v3 component code can keep reading --v3-* names without a second copy of the hex values drifting out of sync. Change a colour in :root and it changes here. */ /* brand anchors */ --v3-navy:var(--navy); --v3-navy-2:var(--navy-2); /* referee / primary */ --v3-blue:var(--blue); --v3-blue-press:var(--blue-hover); --v3-blue-soft:var(--blue-soft); /* fan / spectator */ --v3-purple:var(--purple); --v3-purple-press:var(--purple-press); --v3-purple-soft:var(--purple-soft); /* score / correct */ --v3-green:var(--green); --v3-green-press:var(--green-press); --v3-green-soft:var(--green-bg); /* streaks / live / tape */ --v3-amber:var(--amber); --v3-red:var(--red); --v3-yellow:var(--yellow); /* paper */ --v3-ink:var(--text); --v3-body:var(--text-2); --v3-line:var(--line); --v3-line-2:var(--line-strong); --v3-r:var(--radius); --v3-r-lg:var(--radius-lg); /* NOT an alias: the v3 shell is deliberately 40px narrower than the shared --container (1140 vs 1180) to tighten the editorial column. */ --v3-shell:min(1140px,calc(100vw - 40px)); background:var(--bg); color:var(--v3-body); font-size:17px; line-height:1.5; } /* ---------- shared-chrome overrides (homepage only) ---------- */ .v3 .site-header{ background:#fff; border-bottom:2px solid var(--v3-line); backdrop-filter:none;-webkit-backdrop-filter:none; } .v3 .site-header.is-scrolled{background:#fff} .v3 .site-header>.container{width:var(--v3-shell)} .v3 .nav{height:76px;border-bottom:0} .v3 .brand{color:var(--v3-ink);font-weight:900;letter-spacing:-.035em} .v3 .brand span{font-size:1.4rem} .v3 .nav-links{border:0;background:none;padding:0;gap:6px} .v3 .nav-links a{ padding:10px 15px;border-radius:var(--radius-sm);color:var(--v3-body); font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; } .v3 .nav-links a:hover{background:var(--v3-blue-soft);color:var(--v3-blue)} .v3 .nav-links a.active{background:var(--v3-blue-soft);color:var(--v3-blue)} .v3 .header-text-link{ color:var(--v3-body);font-size:13px;font-weight:900; letter-spacing:.1em;text-transform:uppercase; } .v3 .header-text-link:hover{color:var(--v3-blue)} .v3 .menu-toggle{ background:#fff;border:2px solid var(--v3-line-2);color:var(--v3-ink); border-radius:var(--radius-sm);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:12.5px; } /* open mobile menu — v3 .nav-links resets background/border/padding above, so the dropdown panel needs its own opaque restyle here */ @media (max-width:980px){ .v3 .nav-links.open{ top:calc(100% + 2px);left:20px;right:20px; padding:12px;gap:4px; background:#fff; border:2px solid var(--v3-line-2); border-radius:var(--v3-r-lg); box-shadow:0 18px 40px rgba(8,10,13,.16); z-index:70; } .v3 .nav-links.open a{padding:14px;text-align:left} } /* the sticker button — the signature component */ .v3 .btn{ min-height:0;padding:18px 28px;border:0;border-radius:var(--v3-r); font-weight:900;font-size:14px;letter-spacing:.08em;text-transform:uppercase; transition:transform .07s ease,box-shadow .07s ease; } .v3 .btn:hover{transform:none} .v3 .btn-primary{background:var(--v3-blue);color:#fff;box-shadow:0 5px 0 var(--v3-blue-press)} .v3 .btn-primary:hover{background:var(--v3-blue)} .v3 .btn-primary:active{transform:translateY(4px);box-shadow:0 1px 0 var(--v3-blue-press)} .v3 .btn-small{padding:12px 20px;font-size:12.5px} .v3 .v3-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:18px 28px;border:0;border-radius:var(--v3-r);cursor:pointer; font-family:inherit;font-weight:900;font-size:14px; letter-spacing:.08em;text-transform:uppercase;white-space:nowrap; transition:transform .07s ease,box-shadow .07s ease; } .v3 .v3-btn:active{transform:translateY(4px)} .v3 .v3-solid{background:var(--v3-blue);color:#fff;box-shadow:0 5px 0 var(--v3-blue-press)} .v3 .v3-solid:active{box-shadow:0 1px 0 var(--v3-blue-press)} .v3 .v3-fan{background:var(--v3-purple);color:#fff;box-shadow:0 5px 0 var(--v3-purple-press)} .v3 .v3-fan:active{box-shadow:0 1px 0 var(--v3-purple-press)} .v3 .v3-go{background:var(--v3-green);color:#fff;box-shadow:0 5px 0 var(--v3-green-press)} .v3 .v3-go:active{box-shadow:0 1px 0 var(--v3-green-press)} .v3 .v3-ghost{background:#fff;color:var(--v3-blue);border:2px solid var(--v3-line-2);box-shadow:0 5px 0 var(--v3-line)} .v3 .v3-ghost:active{box-shadow:0 1px 0 var(--v3-line)} .v3 .v3-ghost-navy{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.32);box-shadow:0 5px 0 rgba(255,255,255,.14)} .v3 .v3-ghost-navy:active{box-shadow:0 1px 0 rgba(255,255,255,.14)} /* ---------- type ---------- */ .v3 h1,.v3 h2{ margin:0;color:var(--v3-ink);font-weight:900;text-transform:uppercase; letter-spacing:-.045em;line-height:.86; } .v3 h1{font-size:clamp(46px,8vw,92px)} .v3 h2{font-size:clamp(36px,5.6vw,64px)} .v3 h3{margin:0;color:var(--v3-ink);font-size:20px;font-weight:800;letter-spacing:-.015em;line-height:1.15} .v3 p{margin:0} .v3 .v3-lede{font-size:19px;line-height:1.55;max-width:46ch} .v3 .v3-kicker{ margin:0 0 18px;color:var(--v3-blue);font-size:12.5px;font-weight:900; letter-spacing:.16em;text-transform:uppercase; } .v3 .v3-readout{color:var(--v3-ink);font-weight:900;line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums} .v3 .v3-readout.xl{font-size:58px;color:var(--v3-green)} .v3 .v3-readout.lg{font-size:42px} .v3 .v3-micro{font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase} /* ---------- layout ---------- */ .v3 .v3-shell{width:var(--v3-shell);margin-inline:auto} .v3 .v3-section{padding:var(--sp-96) 0} .v3 .v3-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-64);align-items:center} /* `1fr` is minmax(auto,1fr), so a child that refuses to shrink (the 460px code card, the 46ch lede) widens the track past the shell. Pin the floor. */ .v3 .v3-split>*{min-width:0} .v3 .v3-split.flip>*:first-child{order:2} .v3 .v3-tint{background:var(--v3-blue-soft)} .v3 .v3-tint-fan{background:var(--v3-purple-soft)} .v3 .v3-center{text-align:center} .v3 .v3-center .v3-lede{margin-inline:auto} .v3 .v3-stack{display:grid;gap:16px} /* Fan section layout. The film is the hero: it holds the whole right-hand column with the CTA directly beneath it, so the demonstration and the action it prompts sit together. Supporting proof (streak, rank progress) drops under the lede, which also balances the two columns — they land within a few px of each other, so the left column stops floating in the middle of a tall row. Named areas rather than source order, because the single-column collapse has to reorder: on a phone the animation must come straight after the lede, not below three cards. */ .v3 .v3-split.v3-fanshow{ grid-template-areas:"text media" "extras media"; align-items:start; row-gap:32px; } .v3 .v3-fanshow>.fanshow-text{grid-area:text} .v3 .v3-fanshow>.fanshow-media{grid-area:media;align-self:center} .v3 .v3-fanshow>.fanshow-extras{grid-area:extras} @media (max-width:900px){ /* Stacked, the row gap is doing two jobs at once: it separates the lede from the animation, and the CTA under the animation from the reward cards. Both need more air than the side-by-side layout's 32px, or the film reads as part of the paragraph and the button reads as part of the first card. */ .v3 .v3-split.v3-fanshow{grid-template-areas:"text" "media" "extras";row-gap:var(--sp-48)} } .v3 .v3-card{background:#fff;border:2px solid var(--v3-line);border-radius:var(--v3-r-lg);padding:24px} /* ---------- hero: the one dark band ---------- */ .v3 .v3-hero{background:var(--v3-navy);padding:var(--sp-72) 0 0;text-align:center;overflow:hidden} .v3 .v3-hero h1{color:#fff} .v3 .v3-hero .v3-kicker{color:#8fb0ff} .v3 .v3-hero .v3-lede{margin:22px auto 0;color:rgba(255,255,255,.74)} .v3 .v3-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px} .v3 .v3-cast{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin-top:24px} .v3 .v3-cast img{width:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.5))} .v3 .v3-cast .lead{height:250px} .v3 .v3-cast .side{height:200px} .v3 .v3-turf{height:14px;background:repeating-linear-gradient(90deg,var(--v3-green) 0 42px,#1aa851 42px 84px)} .v3 .v3-strip{ background:var(--v3-navy-2);color:#fff;padding:16px 0; display:flex;gap:26px;justify-content:center;flex-wrap:wrap;align-items:center; font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase; } .v3 .v3-strip b{font-size:21px;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .v3 .v3-strip span{color:rgba(255,255,255,.6)} .v3 .v3-strip i{background:var(--v3-red);padding:6px 11px;border-radius:999px;font-size:11px;font-style:normal} /* ---------- yellow feature tape ---------- */ .v3 .v3-tape{overflow:hidden;background:var(--v3-yellow);color:#12140a;border-top:4px solid var(--v3-ink);border-bottom:4px solid var(--v3-ink)} .v3 .v3-tape>div{ min-width:max-content;height:78px;display:flex;align-items:center; font-size:clamp(22px,3.4vw,40px);font-weight:900;letter-spacing:-.045em;text-transform:uppercase; } .v3 .v3-tape span,.v3 .v3-tape i{padding-left:30px} .v3 .v3-tape i{font-size:.5em;font-style:normal;color:var(--v3-blue)} /* ---------- numbered steps ---------- */ .v3 .v3-steps{list-style:none;padding:0;margin:0;display:grid;gap:14px} .v3 .v3-steps li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:2px solid var(--v3-line);border-radius:var(--v3-r-lg);padding:20px 22px} .v3 .v3-steps b{ flex:0 0 44px;height:44px;border-radius:var(--radius-sm);background:var(--v3-blue-soft);color:var(--v3-blue); display:grid;place-items:center;font-size:19px;font-weight:900;letter-spacing:-.04em; } .v3 .v3-steps strong{display:block;margin-bottom:5px;color:var(--v3-ink);font-size:18px;font-weight:800;letter-spacing:-.015em} .v3 .v3-steps span{font-size:15.5px} /* ---------- watch code ---------- */ .v3 .v3-code{background:#fff;border:2px solid var(--v3-line);border-radius:var(--v3-r-lg);padding:30px;max-width:460px} .v3 .v3-code label{display:block;margin-bottom:12px;color:var(--v3-body);font-size:12px;font-weight:900;letter-spacing:.15em;text-transform:uppercase} .v3 .v3-code>div{display:flex;gap:12px} .v3 .v3-code input{ flex:1;min-width:0;font-family:inherit;font-weight:900;font-size:32px; letter-spacing:.1em;text-align:center;text-transform:uppercase; padding:16px 10px;border:2px solid var(--v3-line-2);border-radius:var(--v3-r); color:var(--v3-ink);background:#fbfcfe;outline:none; } .v3 .v3-code input:focus{border-color:var(--v3-blue);background:#fff;box-shadow:0 0 0 4px rgba(59,110,245,.16)} .v3 .v3-code input::placeholder{color:#c3cbd9} .v3 .v3-note{margin-top:14px;font-size:14px} .v3 .v3-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .v3 .v3-chip{ border:2px solid #bbf0cd;background:var(--v3-green-soft);color:var(--v3-green-press); border-radius:999px;padding:8px 15px;font-size:12px;font-weight:900; letter-spacing:.1em;text-transform:uppercase; } /* ---------- fan reward rows ---------- */ .v3 .v3-reward{display:flex;align-items:center;gap:14px;padding:18px 20px;background:#fff;border:2px solid var(--v3-line);border-radius:var(--v3-r-lg);font-size:15.5px} .v3 .v3-reward .pill{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:var(--v3-green);color:#fff;font-size:14px;font-weight:900} .v3 .v3-reward .pill.flame{background:var(--v3-amber)} .v3 .v3-reward .pill.blue{background:var(--v3-blue)} .v3 .v3-reward em{font-style:normal;color:var(--v3-ink);font-weight:700} /* The six live reactions, sized to sit where a .pill would inside a .v3-reward. Order matches REACTION_EMOJIS in synqro/src/components/watch/GameReactions.tsx so this card and the fan film never show a different set. Decorative: the container is aria-hidden and the adjacent sentence carries the meaning, since a screen reader would otherwise announce six emoji names in a row. */ .v3 .v3-reacts{display:flex;gap:7px;flex:0 0 auto} .v3 .v3-reacts span{ width:32px;height:32px;flex:0 0 auto; display:grid;place-items:center;line-height:1;font-size:17px; background:var(--v3-purple-soft);border:2px solid var(--v3-line);border-radius:10px; } @media (max-width:440px){ .v3 .v3-reacts{gap:5px} .v3 .v3-reacts span{width:28px;height:28px;font-size:15px;border-radius:9px} } /* Narrow screens: the icon row leaves too little width for the sentence beside it (the card grew to 180px on a 375px phone), so the text drops to its own line under the icons. Explicit modifier rather than :has(), to keep the rule independent of selector support. */ @media (max-width:640px){ .v3 .v3-reward.v3-reward-stack{flex-wrap:wrap;row-gap:10px} .v3 .v3-reward.v3-reward-stack>span:last-child{flex:1 0 100%} } .v3 .v3-bar{height:16px;margin-top:10px;border-radius:999px;background:var(--v3-line);overflow:hidden} .v3 .v3-bar i{display:block;height:100%;border-radius:999px;background:var(--v3-purple)} .v3 .v3-scorebox{display:flex;justify-content:space-around;text-align:center} .v3 .v3-tint-fan .v3-kicker{color:var(--v3-purple-press)} /* the "fan is asked a question" row: character + prediction card */ .v3 .v3-ask{display:flex;align-items:flex-end;gap:14px} .v3 .v3-ask>img{height:186px;width:auto;flex:0 0 auto} .v3 .v3-ask>.v3-card{flex:1;min-width:0} .v3 .v3-ask q{display:block;color:var(--v3-ink);font-size:17px;font-weight:800;letter-spacing:-.015em;quotes:none} .v3 .v3-choice{display:flex;gap:10px;margin-top:14px} /* buttons must be able to shrink inside the narrow card, so trade horizontal padding for flex growth rather than letting them push the row wide. */ .v3 .v3-choice .v3-btn{flex:1;min-width:0;padding-inline:12px} /* Primary app entry (#join). .v3-choice sets flex:1 on its children, which is right for a pair of buttons and far too wide for a single one sitting in a half-width column — so a lone CTA sizes to its content, then goes full-width on phones where a thumb-sized target matters more. */ .v3 .v3-choice.v3-choice-single{margin-top:26px} .v3 .v3-choice.v3-choice-single .v3-btn{flex:0 0 auto} @media (max-width:640px){.v3 .v3-choice.v3-choice-single .v3-btn{flex:1 1 auto}} /* The tester form is now the SECOND ask, so it carries its own heading. The form is a 14px grid, so these drop their own margins rather than doubling it. */ .v3 .v3-form .v3-kicker{margin:0} .v3 .v3-form-intro{margin:0;font-size:15px;line-height:1.5;color:var(--v3-body)} @media (max-width:640px){.v3 .v3-ask>img{height:140px}} /* ---------- league stats ---------- */ .v3 .v3-stats{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0} .v3 .v3-stats div{padding:14px 20px;background:#fff;border:2px solid var(--v3-line);border-radius:var(--v3-r);text-align:center} .v3 .v3-stats b{display:block;color:var(--v3-ink);font-size:32px;font-weight:900;letter-spacing:-.05em;font-variant-numeric:tabular-nums} /* ---------- pricing ---------- */ .v3 .v3-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:var(--sp-48);align-items:start} .v3 .v3-price{background:#fff;border:2px solid var(--v3-line);border-radius:var(--v3-r-lg);padding:28px} .v3 .v3-price.best{border:3px solid var(--v3-blue);position:relative} .v3 .v3-price.best::before{ content:'MOST POPULAR';position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:var(--v3-blue);color:#fff;font-size:11px;font-weight:900;letter-spacing:.13em; padding:6px 14px;border-radius:999px;white-space:nowrap; } .v3 .v3-price .tier{color:var(--v3-blue);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase} .v3 .v3-price .amt{margin:10px 0 2px;color:var(--v3-ink);font-size:50px;font-weight:900;letter-spacing:-.055em;line-height:.9} .v3 .v3-price .amt small{color:var(--v3-body);font-size:15px;font-weight:700;letter-spacing:0} .v3 .v3-price h3{margin:16px 0 12px} .v3 .v3-price ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px} .v3 .v3-price li{position:relative;padding-left:28px;font-size:15.5px} .v3 .v3-price li::before{ content:'';position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:var(--radius-xs); background:var(--v3-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M4 13l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; } .v3 .v3-price .v3-btn{width:100%} /* ---------- join form ---------- */ .v3 .v3-form{display:grid;gap:14px;padding:30px;background:#fff;border:2px solid var(--v3-line);border-radius:var(--v3-r-lg)} .v3 .v3-form label{color:var(--v3-body);font-size:12px;font-weight:900;letter-spacing:.15em;text-transform:uppercase} .v3 .v3-form input,.v3 .v3-form select{ font-family:inherit;font-size:17px;font-weight:600;padding:16px; border:2px solid var(--v3-line-2);border-radius:var(--v3-r); color:var(--v3-ink);background:#fbfcfe;outline:none; } .v3 .v3-form input:focus,.v3 .v3-form select:focus{border-color:var(--v3-blue);background:#fff;box-shadow:0 0 0 4px rgba(59,110,245,.16)} .v3 .v3-form .form-success{color:var(--v3-green-press);font-size:16px;font-weight:800} /* ---------- faq ---------- */ .v3 .v3-faq{display:grid;gap:12px} .v3 .v3-faq details{background:#fff;border:2px solid var(--v3-line);border-radius:var(--v3-r-lg);overflow:hidden} .v3 .v3-faq summary{ list-style:none;cursor:pointer;padding:20px 22px; color:var(--v3-ink);font-size:18px;font-weight:800;letter-spacing:-.015em; display:flex;justify-content:space-between;align-items:center;gap:16px; } .v3 .v3-faq summary::-webkit-details-marker{display:none} .v3 .v3-faq summary span{ flex:0 0 30px;height:30px;border-radius:var(--radius-sm);background:var(--v3-blue-soft);color:var(--v3-blue); display:grid;place-items:center;font-size:20px;line-height:1; } .v3 .v3-faq details[open] summary span{background:var(--v3-blue);color:#fff} .v3 .v3-faq p{padding:0 22px 22px;font-size:16px} /* Drawer motion lives in script.js (height animated on the same .65s/--ease clock as .reveal). `open` is only dropped once a collapse finishes, so the marker reads `.is-closing` to snap back to its closed look right away. */ .v3 .v3-faq summary span{transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)} .v3 .v3-faq details[open] summary span{transform:rotate(45deg)} .v3 .v3-faq details.is-closing summary span{background:var(--v3-blue-soft);color:var(--v3-blue);transform:none} @media(prefers-reduced-motion:reduce){.v3 .v3-faq summary span{transition:none}} .v3 .v3-inline{color:var(--v3-blue);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px} /* ---------- footer: navy band ---------- */ .v3 .footer{ margin-top:0;padding:var(--sp-64) 0 var(--sp-40); background:var(--v3-navy);border-top:0;color:#fff; } .v3 .footer>.container{width:var(--v3-shell)} .v3 .footer .brand{color:#fff} .v3 .footer b{margin-bottom:14px;color:#fff;font-size:13px;font-weight:900;letter-spacing:.16em} .v3 .footer a{color:#8fb0ff;font-size:15px;margin:5px 0} .v3 .footer a:hover{color:#fff} .v3 .footer-grid p{color:rgba(255,255,255,.6);font-size:15px} .v3 .footer-bottom{border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);font-size:14px} /* ---------- responsive ---------- */ @media (max-width:900px){ .v3 .v3-split{grid-template-columns:1fr;gap:var(--sp-40)} .v3 .v3-split.flip>*:first-child{order:0} .v3 .v3-prices{grid-template-columns:1fr} .v3 .v3-section{padding:var(--sp-64) 0} .v3 .v3-cast{gap:8px} /* The excited-referee art is wider than the fans, so the trio is scaled down ~4% here to keep the same edge bleed the narrower pose used to give. */ .v3 .v3-cast .lead{height:166px} .v3 .v3-cast .side{height:133px} .v3 .v3-tape>div{height:60px} } @media (max-width:720px){ .v3 .footer-grid{grid-template-columns:1fr 1fr} } /* Bright fills carry near-black text — white on #22c55e is only 2.3:1. */ .v3 .v3-go{color:var(--on-green,#08301a)} .v3 .v3-reward .pill{color:var(--on-green,#08301a)} .v3 .v3-reward .pill.flame{color:var(--on-amber,#3d2600)} .v3 .v3-reward .pill.blue{color:#fff} .v3 .v3-strip i{background:#dc2626} /* styles.css caps h1 at max-width:920px with margin:0. Inside a centred 1140px shell that pins the text box left, so centred text lands ~220px off true centre. Restore the auto margins for centred blocks. */ .v3 .v3-hero h1,.v3 .v3-hero h2, .v3 .v3-center h1,.v3 .v3-center h2{margin-inline:auto} /* ============================================================ Additions for the inner pages (features / league / pricing, guides, legal). The homepage only needed the band + cast. ============================================================ */ /* --- hero variants: inner pages get a split hero, not a centred cast --- */ .v3 .v3-hero.v3-hero-split{text-align:left;padding:var(--sp-80) 0 var(--sp-96)} .v3 .v3-hero-split .v3-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-56);align-items:center} .v3 .v3-hero-split .v3-shell>*{min-width:0} .v3 .v3-hero-split .v3-lede{margin:22px 0 0} .v3 .v3-hero-split h1{margin-inline:0;max-width:none} .v3 .v3-hero-split .v3-hero-cta{justify-content:flex-start} .v3 .v3-hero-art{display:flex;justify-content:center;align-items:flex-end;gap:12px} .v3 .v3-hero-art img{width:auto;height:300px;filter:drop-shadow(0 18px 22px rgba(0,0,0,.5))} /* --- a device/screenshot frame that reads as a sticker card --- */ .v3 .v3-frame{margin:0;background:#fff;border:2px solid var(--v3-line);border-radius:var(--v3-r-lg);padding:12px;overflow:hidden} .v3 .v3-frame img{width:100%;display:block;border-radius:var(--radius-sm);background:var(--v3-line)} .v3 .v3-frame figcaption{ display:flex;justify-content:space-between;gap:12px;padding:12px 6px 2px; font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--v3-body); } .v3 .v3-frame figcaption b{color:var(--v3-green-press)} .v3 .v3-frame.on-navy{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)} .v3 .v3-frame.on-navy figcaption{color:rgba(255,255,255,.7)} /* --- product film inside a frame --- The film markup carries a poster