/* layout: the collection landing's world (warm paper, alternating black sections, one typeface, three area colours, flat fills, glass only on the pill); light only; every section draws its mechanism */
:root { --ink: #0a0a0a; --ink-2: #454545; --ink-3: #8a8a8a; --paper: #faf9f6; --card: #f3f1ec; --card-2: #ebe8e1; --line: rgba(10, 10, 10, .1); --line-d: rgba(255, 255, 255, .14);
        --orange: #ff4d00; --blue: #2f6bff; --green: #12b76a; --orange-t: #fff0e7; --blue-t: #eaf0ff; --green-t: #e6f6ec; --dark: #000; --dark-2: #0f0f0e;
        --s1: #d4642e; --s2: #3a6fc4; --s3: #2f9e7b; --s4: #6c5ccf; --o1: #6e3418; --o2: #9a4a24; --o3: #c9612f; --o4: #e7a07a; --grid: rgba(10,10,10,.08); --axis: rgba(10,10,10,.2); --sup: #ffffff; --sutil: #e5e7eb; --txt: #0a0a0a; --txt-2: #454545; --txt-3: #8a8a8a; --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
        --ease: cubic-bezier(.32, .72, 0, 1); --gutter: 40px; --max: 1400px; --sec: 88px; color-scheme: light }
* { box-sizing: border-box }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; font-weight: 500; -webkit-font-smoothing: antialiased }
h1, h2, h3, p { margin: 0 } a { color: inherit; text-decoration: none } button { font: inherit }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); min-width: 0 } .wrap > * { min-width: 0 }
.dark { background: var(--dark); color: #fff } .light { background: var(--paper); color: var(--ink) }
h1 { font-size: clamp(30px, 3vw, 46px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; max-width: 22ch }
h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; max-width: 22ch }
h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700 }
.light h1 span, .light h2 span { color: var(--ink-3) } .dark h1 span, .dark h2 span { color: rgba(255, 255, 255, .5) }
.lede { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.45; max-width: 48ch; text-wrap: pretty; color: var(--ink-2) } .dark .lede { color: rgba(255, 255, 255, .7) }
.head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px 48px; align-items: end; margin-bottom: 40px } .head .lede { padding-bottom: 6px }
.sec { padding: var(--sec) 0 }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .35s var(--ease), background .35s var(--ease) }
.btn:active { transform: scale(.98) } .btn.white { background: #fff; color: #000 } .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45) } .btn.orange { background: var(--orange); color: #fff } .btn.ink { background: var(--ink); color: #fff }
.btn.lg { height: 52px; padding: 0 24px; font-size: 16px } .btn:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px }
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: center; padding: calc(18px + env(safe-area-inset-top, 0px)) 24px 18px; pointer-events: none }
.pill { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(10, 10, 10, .72); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #fff; max-width: calc(100vw - 32px); overflow: hidden }
.marca { font-weight: 700; font-size: 18px; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 8px; margin-right: 10px } .marca i { width: 24px; height: 24px; border-radius: 7px; background: #0a0a0a; border: 1px solid rgba(255,255,255,.25); display: inline-grid; place-items: center } .marca i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange) }
.tabs { display: inline-flex; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 3px; margin-right: 8px } .tabs a { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; opacity: .75 } .tabs a.on { background: #fff; color: #000; opacity: 1 }
.nl { font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 999px; opacity: .85; white-space: nowrap } .pill .btn { height: 36px; padding: 0 14px; font-size: 14px; margin-left: 6px }
@media (hover: hover) and (pointer: fine) { .nl:hover { background: rgba(255, 255, 255, .12); opacity: 1 } .btn.orange:hover { background: #e64500 } .btn.white:hover { background: #e6e6e6 } .btn.ghost:hover { background: rgba(255,255,255,.12); border-color: #fff } }
.hero { position: relative; background: #000; color: #fff; overflow: hidden; padding-top: 150px; padding-bottom: 72px }
.hero .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px 48px; align-items: center }
.hcopy { display: grid; gap: 22px } .hero .lede { color: rgba(255, 255, 255, .84); max-width: 44ch } .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center } .cta small { font-size: 13px; color: rgba(255, 255, 255, .6); width: 100% }
.hpanel { display: grid; gap: 14px; justify-items: end; min-width: 0; max-width: 100% } .hart { width: 100%; max-width: 640px; min-width: 0 } .live { max-width: 100% } .hero-art { width: 100%; height: auto; display: block } .hero-art text { font-family: var(--sans) } .hero-art .wl { font-size: 12px; fill: rgba(255,255,255,.7) } .hero-art .wa { font-size: 11px; fill: rgba(255,255,255,.5) } .hero-art .wc { font-size: 12px; font-weight: 600; fill: #0a0a0a }
.live { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; border-radius: 999px; background: rgba(10, 10, 10, .55); border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; font-weight: 600; white-space: nowrap } .live em { font-style: normal; color: rgba(255, 255, 255, .6); font-weight: 500 }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: ping 2s var(--ease) infinite } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 0, .6) } 100% { box-shadow: 0 0 0 10px rgba(255, 77, 0, 0) } }
.wave { display: inline-flex; gap: 2px; align-items: center; height: 14px } .wave i { width: 3px; border-radius: 2px; background: var(--orange); height: 30%; animation: wv 1.1s ease-in-out infinite } .wave i:nth-child(2) { animation-delay: .15s } .wave i:nth-child(3) { animation-delay: .3s } .wave i:nth-child(4) { animation-delay: .45s } .wave i:nth-child(5) { animation-delay: .6s } @keyframes wv { 0%, 100% { height: 25% } 50% { height: 100% } }
.ui { background: #fff; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 24px 60px -30px rgba(10, 10, 10, .45); font-size: 13px; overflow: hidden; color: var(--ink); width: 100%; min-width: 0 }
.uih { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600 } .uih small { color: var(--ink-3); font-weight: 500 } .uib { padding: 10px 14px 8px }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px } .card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 20px; display: grid; gap: 8px; align-content: start } .card p { color: var(--ink-2); font-size: 15px; line-height: 1.45 } .codes { display: flex; flex-wrap: wrap; gap: 6px } .ex { font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--card); border-radius: 999px; padding: 4px 11px } .band .ex { background: var(--card) }
.band { background: var(--card); color: var(--ink) } .band .inc .it, .band .cyc div, .band .panel, .band .card, .band .doc { background: #fff } .band .lede { color: var(--ink-2) }
.light .gl, .band .gl { background: #fff; border-color: var(--line); color: var(--ink) }
.doc svg { width: 22px; height: 22px; color: var(--orange) }
.card .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--card); margin-bottom: 4px } .card .ic svg { width: 22px; height: 22px } .card.o .ic { color: var(--orange) } .card.b .ic { color: var(--blue) } .card.g .ic { color: #0b7a47 }

.flow { display: grid; gap: 18px } .flow-art { width: 100%; height: auto; display: block } .flow-art text { font-family: var(--sans) } .flow-art .fh { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; fill: rgba(255,255,255,.55) } .flow-art .ft { font-size: 14px; font-weight: 600; fill: #fff } .flow-art .fb { font-size: 16px; font-weight: 700; fill: #fff } .flow-art .fs { font-size: 12px; fill: rgba(255,255,255,.65) }
.codeline { font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.6; background: var(--dark-2); color: #e6e6e6; border-radius: 14px; padding: 14px 18px; border: 1px solid var(--line-d); white-space: pre; overflow-x: auto; margin: 0 } .codeline b { color: var(--orange); font-weight: 600 }
.note { font-size: 14px; color: rgba(255,255,255,.6) } .light .note { color: var(--ink-3) }
.inc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px } .inc .it { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 20px; border-radius: 20px; background: var(--card) } .inc .it b { display: block; font-size: 17px; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 4px } .inc .it span { color: var(--ink-2); font-size: 14px; line-height: 1.4 } .inc .it svg { width: 30px; height: 30px; color: var(--orange); margin-top: 2px }
.split { display: grid; grid-template-columns: minmax(280px, .75fr) 1.25fr; gap: 32px 56px; align-items: start } .split .lede { margin-top: 16px } .split .fact { margin-top: 22px; display: grid; gap: 12px } .split .fact div { border-top: 1px solid var(--line); padding-top: 10px } .dark .split .fact div { border-color: var(--line-d) } .split .fact b { display: block; font-size: 28px; letter-spacing: -.03em; line-height: 1.1 } .split .fact span { font-size: 14px; color: var(--ink-2) } .dark .split .fact span { color: rgba(255,255,255,.65) }
.panel { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #fff; color: var(--ink) } .dark .panel { background: var(--dark-2); border-color: var(--line-d); color: #fff } .panel .pt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px } .dark .panel .pt { border-color: var(--line-d) } .panel .pt small { color: var(--ink-3); font-weight: 500; font-size: 13px } .dark .panel .pt small { color: rgba(255,255,255,.5) } .panel .pb { padding: 12px 18px 10px } .panel .pb + .pt { border-top: 1px solid var(--line) } .dark .panel .pb + .pt { border-top-color: var(--line-d) }
.dark { --grid: rgba(255,255,255,.1); --axis: rgba(255,255,255,.28); --sup: #0f0f0e; --txt: #fff; --txt-2: rgba(255,255,255,.75); --txt-3: rgba(255,255,255,.5) } .dark .legend { color: rgba(255,255,255,.7) }
.strip { display: flex; gap: 12px; flex-wrap: wrap } .gl { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 10px 18px 10px 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line-d); font-weight: 600 } .gl svg { width: 24px; height: 24px; color: var(--orange) }
.ring { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center } .ring-art { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto } .ring-art text { font-family: var(--sans) } .ring-art .rn { font-size: 11px; font-weight: 700; letter-spacing: .08em; fill: rgba(255,255,255,.8) } .ring-art .rt { font-size: 17px; font-weight: 700; fill: #fff; letter-spacing: -.01em } .ring-art .rc { font-size: 18px; font-weight: 700; fill: var(--ink); letter-spacing: -.02em } .ring-art .rc2 { font-size: 14px; fill: var(--ink-2) }
.cyc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px } .cyc div { background: var(--card); border-radius: 18px; padding: 18px 20px; display: grid; gap: 6px; align-content: start } .cyc .k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase } .cyc p { color: var(--ink-2); font-size: 15px; line-height: 1.4 } .cyc b { font-size: 18px; letter-spacing: -.02em }
.k1 { color: var(--orange) } .k2 { color: var(--blue) } .k3 { color: #0b7a47 } .k4 { color: var(--s4) }
.docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px } .doc { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 8px } .doc small { color: var(--ink-2); font-size: 13px; line-height: 1.4 } .doc .path { font-size: 13px; font-weight: 600; color: var(--ink-3) }
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center } .price p { color: var(--ink-2); max-width: 44ch }
.final { text-align: center; display: grid; justify-items: center; gap: 22px } .final h2 { max-width: 24ch }
footer { padding: 32px 0 40px; border-top: 1px solid var(--line-d); color: rgba(255, 255, 255, .6); font-size: 13px } footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center } footer a { color: rgba(255,255,255,.85) }
svg.chart { width: 100%; height: auto; display: block } svg.chart text { font-family: var(--sans) } svg.chart .ax { font-size: 11px; fill: var(--txt-3) } svg.chart .lbl { font-size: 12px; fill: var(--txt) } svg.chart .val { font-size: 11px; fill: var(--txt-2) }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); margin: 4px 0 } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px }
.reveal { opacity: 1; transform: none } @media (prefers-reduced-motion: no-preference) { .reveal { transition: opacity .9s var(--ease), transform .9s var(--ease) } .reveal.pre { opacity: 0; transform: translateY(14px) } }
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr 1fr } .inc { grid-template-columns: 1fr 1fr } .docs { grid-template-columns: 1fr 1fr } .hero .wrap, .split, .price, .ring { grid-template-columns: 1fr } .head { grid-template-columns: 1fr } .hpanel { justify-items: start } }
@media (max-width: 640px) { :root { --gutter: 16px; --sec: 64px } .cards, .inc, .docs, .cyc { grid-template-columns: 1fr } .pill .nl, .pill .tabs { display: none } .hero { padding-top: 120px } .strip { flex-direction: column } .live em { display: none } .hpanel, .hart { max-width: 100% } }
@media (max-width: 480px) { .pill .btn.ghost { display: none } .pill { padding-left: 12px } }