/* Type: the brand face is Saans (Light / Regular / SemiBold), a licensed font that isn't bundled yet.
   Inter Tight (SIL Open Font License, self-hosted in /fonts) stands in for it. To switch to Saans, put the
   licensed webfont files in /fonts with the names below and remove the comment markers around this block.

@font-face{font-family:"Saans"; src:url(/fonts/Saans-Light.woff2) format("woff2"); font-weight:300; font-style:normal; font-display:swap}
@font-face{font-family:"Saans"; src:url(/fonts/Saans-Regular.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Saans"; src:url(/fonts/Saans-SemiBold.woff2) format("woff2"); font-weight:600; font-style:normal; font-display:swap}
*/
@font-face{font-family:"Inter Tight"; src:url(/fonts/inter-tight-latin-300-normal.woff2) format("woff2"); font-weight:300; font-style:normal; font-display:swap}
@font-face{font-family:"Inter Tight"; src:url(/fonts/inter-tight-latin-300-italic.woff2) format("woff2"); font-weight:300; font-style:italic; font-display:swap}
@font-face{font-family:"Inter Tight"; src:url(/fonts/inter-tight-latin-400-normal.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Inter Tight"; src:url(/fonts/inter-tight-latin-400-italic.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap}
@font-face{font-family:"Inter Tight"; src:url(/fonts/inter-tight-latin-600-normal.woff2) format("woff2"); font-weight:600; font-style:normal; font-display:swap}
:root{
  color-scheme: dark;
  --ink:#0e0d10; --panel:#16141a; --panel2:#1e1b22; --line:#2a2630; --line2:#3a3441;
  --text:#ece8ee; --soft:#dfdae3; --muted:#a39cab;
  --accent:#ff3a63; --accent-ink:#1b000c; --lime:#c4ff00; --blue:#1fe4ff; --maroon:#5e0030; --ok:#9ee0b8; --err:#ff8a8a;
  --sans:"Saans", "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:var(--sans); /* headings: brand Light weight, tight tracking */
  --mono:var(--sans);
  --gutter:clamp(20px, 4.4vw, 64px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--ink); color:var(--text); font:16px/1.5 var(--sans); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:var(--text); text-decoration:none} a:hover{color:var(--lime)}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--lime); outline-offset:2px}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.01em}
p{margin:0}
.wrap{padding-inline:var(--gutter); max-width:1440px; margin-inline:auto}
.serif{font-family:var(--serif); font-weight:300; letter-spacing:-.01em}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)} .soft{color:var(--soft)} .blue{color:var(--blue)} .lime{color:var(--lime)}
.eyebrow{font:12px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:999px; border:1px solid var(--line2); background:none; color:var(--text); font:600 16px var(--sans); cursor:pointer; white-space:nowrap}
.btn:hover{border-color:var(--muted); color:var(--text)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08); color:var(--accent-ink)}
.btn.block{width:100%}
.btn[disabled]{opacity:.55; cursor:default; filter:none}
.btn .spin{width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* nav */
.nav{height:84px; display:flex; align-items:center; gap:clamp(16px,3vw,40px); border-bottom:1px solid var(--line)}
.nav .logo img{height:32px; width:auto}
.nav .links{display:flex; gap:32px; font-size:15px; flex:1}
.nav .signin{font-size:15px; padding:12px 8px}
.nav .btn{min-height:44px; font-size:15px; padding:0 20px}
@media (max-width: 860px){ .nav .links{display:none} .nav{height:72px; gap:12px} .nav .logo{margin-right:auto} .nav .logo img{height:30px} .nav .btn{min-height:40px; padding:0 14px; font-size:14px} .nav .signin{font-size:14px} }

/* landing */
.hero{padding-top:clamp(48px,7vw,88px); display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center}
.hero h1{font-weight:300; font-size:clamp(40px,5.6vw,72px); line-height:1; letter-spacing:-.01em; max-width:1080px; color:var(--text)}
.hero .lede{font-size:clamp(17px,1.6vw,21px); line-height:1.5; color:var(--soft); max-width:760px}
.hero .ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px}
.hero .shot{margin-top:36px; width:100%; max-width:1240px; border:1px solid var(--lime); border-radius:16px; overflow:hidden; box-shadow:0 40px 120px rgba(255,58,99,.12)}
.hero .shot img{width:100%; height:auto}
/* Background wordmark: a fixed layer behind the page. The script ties the video's time to the first stretch of scrolling.
   The video's black is crushed to pure black and screened onto the ink, and the whole layer is dimmed so text over it stays readable. */
.bgmark{position:fixed; inset:0; z-index:0; background:var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden; pointer-events:none}
.bgmark video{flex:none; width:118%; height:auto; max-width:none; mix-blend-mode:screen; opacity:calc(.32 + var(--glow,0) * .4); filter:brightness(calc(1 + var(--glow,0) * .15)); transition:opacity .15s linear, filter .15s linear}
@media (max-aspect-ratio: 1/1){ .bgmark video{width:150%} }
.wrap{position:relative; z-index:1}
section.block{padding-top:clamp(80px,9vw,120px)}
.split{display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap}
.h2{font:300 clamp(38px,4.4vw,60px)/1.02 var(--serif); letter-spacing:-.01em}
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:48px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:14px}
.card .tag{font:12px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--accent)}
.card h3{font-size:22px; font-weight:600}
.card p{color:var(--soft); line-height:1.55}
/* On the landing page the cards let the background wordmark glow through, softened */
.steps .card, .plans .plan{background:rgba(22,20,26,.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
@media (max-width: 1100px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 600px){ .steps{grid-template-columns:1fr} }
.pos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; align-items:center}
.pos .img{border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.pos .img img{width:100%; height:420px; object-fit:cover; object-position:50% 42%}
.pos .txt{display:flex; flex-direction:column; gap:22px}
.pos .txt p{font-size:18px; line-height:1.6; color:var(--soft)}
@media (max-width: 900px){ .pos{grid-template-columns:1fr; gap:32px} .pos .img img{height:260px} }
.beyond{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start}
.beyond .txt{display:flex; flex-direction:column; gap:22px; padding-top:38px}
.beyond .txt p{font-size:18px; line-height:1.6; color:var(--soft)}
@media (max-width: 900px){ .beyond{grid-template-columns:1fr; gap:24px} .beyond .txt{padding-top:0} }
.mark-gap{height:78vh}
.support .support-txt{display:flex; flex-direction:column; align-items:flex-start; gap:20px; max-width:520px}
.support .support-txt p{font-size:18px; line-height:1.6; color:var(--soft)}
@media (max-width: 900px){ .mark-gap{height:56vh} }

/* Scroll motion. --p runs from 1 (element low in the window) to -1 (high); --k is the strength set in the markup.
   Images pivot on a vertical axis, their text drifts against them, and the Arena icons roll like wheels
   (the travel matches the turn for a 52px circle). */
.tilt{position:relative; transform:perspective(1100px) rotateY(calc(var(--p,0) * var(--k,6) * 1deg)) rotateX(calc(var(--p,0) * var(--k,6) * -0.3deg)); will-change:transform;
  box-shadow:calc(var(--p,0) * var(--k,6) * -3px) 36px 90px rgba(0,0,0,.55), 0 40px 120px rgba(255,58,99,.12)}
/* a soft light that slides across the image as it turns, so it reads as a surface in space */
.tilt::after{content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; mix-blend-mode:screen;
  background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.09) 50%, rgba(255,255,255,0) 65%) no-repeat;
  background-size:260% 100%; background-position:calc(50% + var(--p,0) * 70%) 0}
.pos .img.tilt{transform-origin:100% 50%}
.drift{transform:translate3d(0, calc(var(--p,0) * var(--k,26) * 1px), 0); will-change:transform}
.roll{transform:translateX(calc(var(--p,0) * var(--k,60) * -0.4538px)) rotate(calc(var(--p,0) * var(--k,60) * -1deg)); will-change:transform}
@media (prefers-reduced-motion: reduce){ .tilt, .drift, .roll{transform:none} .tilt::after{display:none} }
.who{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line2); margin-top:40px}
.who > div{padding:32px 36px 0; display:flex; flex-direction:column; gap:12px; border-left:1px solid var(--line)}
.who > div:first-child{padding-left:0; border-left:0} .who > div:last-child{padding-right:0}
.who h3{font-size:22px; font-weight:600} .who p{color:var(--soft); line-height:1.6}
@media (max-width: 900px){ .who{grid-template-columns:1fr} .who > div{padding:24px 0; border-left:0; border-top:1px solid var(--line)} .who > div:first-child{border-top:0} }
/* Free access section: why Otmo is free, just above Plans */
.eyebrow.lime{color:var(--lime)} .eyebrow.pink{color:var(--accent)}
.free-head{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; align-items:end}
.free-title{display:flex; flex-direction:column; gap:22px}
.free-txt{display:flex; flex-direction:column; gap:18px} .free-txt p{font-size:19px; line-height:1.6; color:var(--soft)}
.free-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:48px}
.free-cards .card{background-color:rgba(22,20,26,.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:16px; padding:32px}
.free-cards .card.give{border-color:var(--accent)}
.free-cards h3{font-size:22px; font-weight:600} .free-cards p{font-size:16px; line-height:1.6; color:var(--soft)}
.free-foot{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; margin-top:48px}
.free-foot p{font-size:18px; line-height:1.55; color:var(--soft); max-width:620px}
.free-foot .ctas{display:flex; gap:14px; flex-wrap:wrap}
@media (max-width: 900px){ .free-head{grid-template-columns:1fr; gap:24px} .free-cards{grid-template-columns:1fr} }
.plans{display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:20px; margin-top:40px}
.honour{margin-top:28px; max-width:760px; font-size:16px; line-height:1.6} .honour a{color:var(--lime); text-decoration:underline; text-underline-offset:3px}
@media (max-width: 1280px){ .plans{grid-template-columns:repeat(2,minmax(0,1fr))} }
.plan{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:32px; display:flex; flex-direction:column; gap:20px}
.plan.feature{background:var(--panel2); border-color:var(--accent)}
/* No plan is highlighted at rest: the card under the pointer (or holding keyboard focus) lifts and its button fills */
.plan{transition:background-color .18s, border-color .18s}
.plans .plan:hover, .plans .plan:focus-within{background-color:rgba(30,27,34,.92); border-color:var(--accent)}
.plan .btn{transition:background-color .18s, border-color .18s, color .18s}
.plan:hover .btn, .plan:focus-within .btn{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.plan .yr{margin-top:-12px; font-size:15px; color:var(--muted)}
.plan .trial{margin-top:-12px; font-size:15px; color:var(--lime)}
.plan h3{font-size:22px; font-weight:600} .plan h3.name{color:var(--lime)}
.plan .price{display:flex; align-items:baseline; gap:8px} .plan .price b{font:300 56px/1 var(--serif); letter-spacing:-.01em} .plan .price span{color:var(--muted); font-size:15px}
.plan ul{margin:0; padding:0 0 0 18px; line-height:1.9; color:var(--soft); flex:1}
.plan p{color:var(--soft)}
.badge{font:600 11px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); background:var(--lime); padding:4px 10px; border-radius:999px}
@media (max-width: 1000px){ .plans{grid-template-columns:1fr} }
.faq{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:64px}
.faq .list{grid-column:span 2; border-top:1px solid var(--line2)}
.faq .q{padding:24px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.faq .q h3{font-size:19px; font-weight:600} .faq .q p{color:var(--soft); line-height:1.6}
@media (max-width: 900px){ .faq{grid-template-columns:1fr; gap:24px} .faq .list{grid-column:auto} }
/* Feature list (landing page): one dropdown per category, drawn from /features.json */
.feats{margin-top:40px; display:flex; flex-direction:column; gap:12px}
.fcat{background:rgba(22,20,26,.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:14px; transition:border-color .18s}
.fcat:hover, .fcat[open]{border-color:var(--line2)}
.fcat summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:20px; padding:22px 28px; border-radius:14px}
.fcat summary::-webkit-details-marker{display:none}
.fcat summary .t{flex:1; display:flex; flex-direction:column; gap:4px}
.fcat summary b{font-size:21px; font-weight:600} .fcat summary .t span{color:var(--muted); font-size:15px}
.fcat summary .n{font:600 13px var(--mono); color:var(--lime); border:1px solid var(--line2); border-radius:999px; min-width:34px; height:28px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px}
.fcat summary .chev{width:12px; height:12px; border-right:1.6px solid var(--soft); border-bottom:1.6px solid var(--soft); transform:translateY(-3px) rotate(45deg); transition:transform .2s}
.fcat[open] summary .chev{transform:translateY(3px) rotate(-135deg); border-color:var(--lime)}
.fcat summary:hover b{color:var(--lime)}
.fcat ul{list-style:none; margin:0; padding:4px 28px 28px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; border-top:1px solid var(--line)}
.fcat .feat{padding:20px 0 0; display:flex; gap:16px; align-items:flex-start}
.fcat .ftxt{display:flex; flex-direction:column; gap:6px; min-width:0}
.fcat .ficon{flex:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line2); background:rgba(196,255,0,.06); color:var(--lime); display:inline-flex; align-items:center; justify-content:center; margin-top:-2px}
.fcat .ficon svg{display:block}
.fcat .feat h4{margin:0; font-size:17px; font-weight:600; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.fcat .feat p{color:var(--soft); line-height:1.6}
.fcat .feat .more{font-size:14px; color:var(--lime); text-decoration:underline; text-underline-offset:3px}
@media (max-width: 800px){ .fcat ul{grid-template-columns:1fr; padding-inline:20px} .fcat summary{padding:18px 20px; gap:14px} .fcat summary b{font-size:19px} }
@media (prefers-reduced-motion: reduce){ .fcat summary .chev{transition:none} }
.band{margin-top:clamp(80px,9vw,120px); background:var(--maroon); border-radius:20px; padding:clamp(32px,4.4vw,64px); display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap}
.band h2{font:300 clamp(34px,3.9vw,56px)/1.02 var(--serif); letter-spacing:-.01em; max-width:720px}
.band .band-txt{display:flex; flex-direction:column; gap:14px} .band .band-txt p{font-size:18px; color:#ffd6e0}
.foot{margin-top:clamp(64px,8vw,96px); padding-block:48px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap}
.foot .links{display:flex; gap:28px; flex-wrap:wrap; font-size:14px}
.foot img{height:30px; width:auto; align-self:flex-start}

/* forms and account pages */
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-size:14px; color:var(--soft)}
.input{height:50px; padding:0 16px; border-radius:10px; border:1px solid var(--line2); background:var(--panel); color:var(--text); font:16px var(--sans); width:100%}
.input:focus{border-color:var(--muted)}
.divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px} .divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--line)}
.msg{font-size:14px; line-height:1.5; min-height:1.5em} .msg.err{color:var(--err)} .msg.ok{color:var(--ok)}
.linkbtn{background:none; border:0; padding:0; color:var(--soft); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.linkbtn:hover{color:var(--lime)}
.gicon{width:18px; height:18px}
.auth{min-height:100vh; display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
.auth .pic{position:relative; overflow:hidden; border-right:1px solid var(--line)}
.auth .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:48% 46%; opacity:.85}
.auth .pic::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,13,16,.9) 0%, rgba(14,13,16,0) 30%, rgba(14,13,16,0) 62%, rgba(14,13,16,.95) 100%)}
.auth .pic .logo{position:absolute; top:40px; left:48px; z-index:1} .auth .pic .logo img{height:30px; width:auto}
.auth .pic p{position:absolute; left:48px; right:48px; bottom:48px; z-index:1; font:300 40px/1.08 var(--serif); letter-spacing:-.01em}
.auth .side{display:flex; align-items:center; justify-content:center; padding:48px var(--gutter)}
.auth form{width:100%; max-width:400px; display:flex; flex-direction:column; gap:20px}
.auth h1{font:300 52px/1 var(--serif); letter-spacing:-.01em; margin-bottom:8px}
@media (max-width: 860px){ .auth{grid-template-columns:1fr} .auth .pic{display:none} .auth .side{align-items:flex-start; padding-top:40px} .auth .mlogo{display:block!important} }
.head{height:76px; display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--line)}
.head .logo img{height:30px; width:auto}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--maroon); color:#ffb3c4; display:inline-flex; align-items:center; justify-content:center; font-weight:600}
.signup{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; row-gap:32px; padding-block:56px}
.signup form{grid-column:span 7; display:flex; flex-direction:column; gap:28px}
.signup aside{grid-column:9 / span 4; align-self:start; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:32px; display:flex; flex-direction:column; gap:20px}
@media (max-width: 1000px){ .signup form, .signup aside{grid-column:1 / -1} }
.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px} .two .span{grid-column:span 2}
@media (max-width: 600px){ .two{grid-template-columns:1fr} .two .span{grid-column:auto} }
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--line2); font-size:14px; cursor:pointer}
.pill:has(input:checked){background:var(--text); color:var(--ink); border-color:var(--text); font-weight:600}
.opt{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:12px; border:1px solid var(--line2); background:var(--panel); cursor:pointer}
.opt:has(input:checked), .opt:hover{border-color:var(--accent); background-color:var(--panel2)}
.opt input{accent-color:var(--accent); width:18px; height:18px}
.opt .t{flex:1; display:flex; flex-direction:column; gap:2px} .opt .t b{font-size:17px} .opt .t span{font-size:14px; color:var(--muted)}
.opt .p{font:15px var(--mono)}
.note{background:var(--panel); border:1px dashed var(--line2); border-radius:12px; padding:16px 18px; color:var(--soft); font-size:14px; line-height:1.55}
.acct{display:flex; min-height:calc(100vh - 76px)}
.acct nav{width:240px; padding:36px 20px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px; font-size:15px}
.acct nav a, .acct nav button{padding:12px 14px; border-radius:8px; color:var(--soft); text-align:left; background:none; border:0; font:inherit; cursor:pointer}
.acct nav a[aria-current]{background:var(--panel2); color:var(--text); font-weight:600}
.acct nav a:hover, .acct nav button:hover{color:var(--lime)}
.acct main{flex:1; padding:48px var(--gutter); display:flex; flex-direction:column; gap:32px; max-width:1000px}
.acct h1{font:300 52px/1 var(--serif); letter-spacing:-.01em}
.box{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:32px; display:flex; flex-direction:column; gap:20px}
.status{font:600 11px var(--mono); letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:rgba(124,196,154,.16); color:var(--ok)}
.status.warn{background:rgba(232,176,74,.16); color:#f0c878}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.between{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap}
@media (max-width: 800px){ .acct{flex-direction:column} .acct nav{width:auto; flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--line); padding:12px var(--gutter)} }
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* The Arena symbol, as icons in the brand colour pairs */
.arena{--a:var(--lime); --b:#0f2000; position:relative; display:block; width:52px; height:52px; border-radius:50%; background:var(--a); flex:none; margin-bottom:8px}
.arena::after{content:''; position:absolute; inset:0; background:var(--b); -webkit-mask:url(/brand/arena-mask.png) center/contain no-repeat; mask:url(/brand/arena-mask.png) center/contain no-repeat}
.arena.c-lime{--a:var(--lime); --b:#0f2000}
.arena.c-pink{--a:var(--maroon); --b:var(--accent)}
.arena.c-blue{--a:#1fe4ff; --b:#03003d}
.card .arena{width:44px; height:44px; margin-bottom:4px}

/* Gloss, matching the app's "liquid glass": a faint diagonal sheen, a bright hairline along the top edge and a
   dark one along the bottom. Panels get the app's glass exactly; coloured surfaces (pink buttons, the maroon band,
   the Arena icons) get a lighter version of the same sheen over their colour. Only background-image and
   box-shadow are set here, so each surface keeps its own colour and hover colours still apply. */
:root{
  --glass:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.025) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.045));
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.28);
  --sheen:linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,.07) 42%, rgba(255,255,255,0) 64%, rgba(255,255,255,.1));
  --sheen-edge:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.2);
}
.card, .plan, .box, .opt, .signup aside, .note, .fcat{background-image:var(--glass); box-shadow:var(--glass-edge), 0 10px 30px rgba(0,0,0,.22)}
.btn.primary, .plan:hover .btn, .plan:focus-within .btn{background-image:var(--sheen); box-shadow:var(--sheen-edge)}
.band{background-image:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.25)}
.arena{background-image:linear-gradient(160deg, rgba(255,255,255,.38), rgba(255,255,255,.08) 45%, rgba(255,255,255,0) 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.22)}

/* hero offer line above the buttons */
.hero .offer{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; font-size:15px}
.hero .offer-tag{display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px; border:1px solid var(--lime); color:var(--lime); font-size:14px; font-weight:500}
.hero .shot.tilt{box-shadow:calc(var(--p,0) * var(--k,6) * -3px) 36px 90px rgba(0,0,0,.55), 0 40px 120px rgba(255,58,99,.12)}