/* ============================================================
   RUIDO SCORES — STYLE
   Brand settings first: change a colour or font here and it changes everywhere.
   ============================================================ */
@font-face{font-family:"PP Mondwest";src:local("PP Mondwest Bold"),local("PPMondwest-Bold"),url("assets/fonts/PPMondwest-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"PP Editorial Old";src:local("PP Editorial Old Thin Italic"),local("PPEditorialOld-ThinItalic"),url("assets/fonts/PPEditorialOld-ThinItalic.woff2") format("woff2");font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:"PP Eiko";src:local("PP Eiko Thin Italic"),local("PPEiko-ThinItalic"),url("assets/fonts/PPEiko-ThinItalic.woff2") format("woff2");font-weight:100;font-style:italic;font-display:swap}

:root{
  /* brand colours */
  --paper:#f2f2f2;      /* page background */
  --ink:#1c1d1b;        /* text, dark blocks */
  --silver:#C3C7CC;     /* Nickel — site silver: buttons, rules, accents */
  --pewter:#8E9399;     /* darker silver for italic accents */
  --grey:#8b8b88;       /* small labels */
  --soft:#55554f;       /* body text */
  --line:#dcdcd8;       /* hairlines */
  /* glass */
  --glass:rgba(255,255,255,.3);
  --edge:rgba(255,255,255,.8);
  /* glow behind glass (left/right are mirrored) */
  --glow-centre:#c3ccd8;
  --glow-side:#d6e0cf;
  /* type */
  --sans:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --accent:"PP Eiko","Instrument Serif",serif;   /* set per logo in app.js */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.sub{font-size:19px;color:var(--soft);max-width:46ch}
.acc{font-family:var(--accent);font-style:italic;font-weight:200;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- logos ---------- */
.wm{display:inline-flex;align-items:baseline;color:inherit;line-height:1;white-space:nowrap}
.wm-a .r{font-family:var(--sans);font-weight:500;letter-spacing:-.04em}
.wm-a .sl{font-family:"Instrument Serif",serif;font-weight:400;margin-left:.02em}
.wm-a .s{font-family:"PP Eiko","Instrument Serif",serif;font-style:italic;font-weight:100;letter-spacing:-.02em}
.wm-b .r{font-family:"PP Mondwest",var(--sans);font-weight:700;letter-spacing:-.01em}
.wm-b .s{font-family:"PP Editorial Old","Instrument Serif",serif;font-style:italic;font-weight:200;font-size:.72em;margin-left:.12em;letter-spacing:-.02em}
.rtile{width:56px;height:56px;background:var(--ink);color:#fff;display:grid;place-items:center;font:500 44px/1 var(--sans);letter-spacing:-.04em;flex:none}
.code{display:inline-block;background:var(--ink);color:#fff;font:700 15px/1 var(--sans);letter-spacing:-.04em;padding:4px 6px}

/* ---------- blocks (buttons): square, caps, label top-left ---------- */
.blk{display:inline-flex;align-items:flex-start;min-width:200px;padding:14px 18px 30px;font:600 14px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;cursor:pointer;border:0;transition:transform .2s ease,box-shadow .2s ease}
.blk:hover{transform:translateY(-1px)}
.blk.silver{background:var(--silver);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),0 8px 24px rgba(26,30,38,.1)}
.blk.glass{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 0 0 1px var(--edge),inset 0 1.5px 0 #fff,0 8px 24px rgba(26,30,38,.08)}
.blk.sm{min-width:150px;padding:10px 14px 20px;font-size:12px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- glow ---------- */
.glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glow i{position:absolute;border-radius:50%;filter:blur(110px)}
.glow .c{width:64%;height:52%;left:18%;top:20%;background:var(--glow-centre)}
.glow .l{width:40%;height:46%;left:-6%;top:36%;background:var(--glow-side)}
.glow .r{width:40%;height:46%;right:-6%;top:36%;background:var(--glow-side)}
.glow .f{width:50%;height:22%;left:25%;bottom:2%;background:#fff}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px max(20px,2.2vw);background:rgba(242,242,242,.5);-webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.7)}
.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.nav .brand .rtile{width:34px;height:34px;font-size:26px}
.nav .brand .wm{font-size:26px}
.nav nav{display:flex;gap:28px;align-items:center}
.nav nav a{color:var(--grey);text-decoration:none;font-size:15px}
.nav nav a:hover{color:var(--ink)}
.nav .right{justify-self:end;display:flex;gap:10px;align-items:center}
.sound{appearance:none;border:0;background:var(--glass);box-shadow:inset 0 0 0 1px var(--edge);color:var(--ink);font:500 13px var(--sans);padding:8px 12px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.sound i{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.sound i b{display:block;width:2px;background:currentColor;height:4px;transition:height .12s}
.sound[aria-pressed=true] i b:nth-child(1){height:8px}.sound[aria-pressed=true] i b:nth-child(2){height:12px}.sound[aria-pressed=true] i b:nth-child(3){height:6px}
@media (max-width:860px){.nav nav a{display:none}.nav .brand .wm{display:none}}

/* ---------- 01 hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;padding:120px 24px 80px}
.hero>*:not(.glow){position:relative;z-index:1}
.hero .big-wm{font-size:clamp(64px,11vw,168px)}
.hero h1{font-weight:500;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.02em;color:var(--soft)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.cloud{position:relative}
.cloud img{width:100%;display:block;-webkit-mask-image:radial-gradient(ellipse 48% 46% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 48% 46% at 50% 50%,#000 70%,transparent 100%)}
.hero .cloud{width:min(380px,70vw);margin-top:18px}
.hero .cloud img{animation:float 7s ease-in-out infinite}
.hero .cloud:after{content:"";position:absolute;left:12%;right:12%;bottom:-38px;height:34px;border-radius:50%;background:rgba(124,129,136,.35);filter:blur(16px)}
@keyframes float{50%{transform:translateY(-8px)}}
.hero .meta{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap}

/* interactive island (objects.js) */
.island{position:relative;width:min(620px,92vw);aspect-ratio:16/10;margin-top:4px}
.island canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .8s ease}
.island canvas.ready{opacity:1}
.island canvas.dragging{cursor:grabbing}
.island:after{content:"";position:absolute;left:22%;right:22%;bottom:2%;height:30px;border-radius:50%;background:rgba(124,129,136,.32);filter:blur(16px);z-index:-1}
.island .drag-hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-size:10px;opacity:.7;pointer-events:none}
.island.in-plate{width:100%;margin:0}
.island.in-plate .drag-hint{display:none}

/* ---------- 02 free COLD: glass plate ---------- */
.free{position:relative;padding:120px max(20px,4vw);display:flex;flex-direction:column;align-items:center;gap:40px}
.free>*:not(.glow){position:relative;z-index:1}
.free .head{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.free h2{font-size:clamp(40px,6vw,84px);line-height:.95;letter-spacing:-.04em;font-weight:700}
.free h2 .acc{color:var(--pewter)}
.gplate{width:min(1300px,100%);display:grid;grid-template-columns:1fr 1.5px 1fr;background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(40px) saturate(1.3);backdrop-filter:blur(40px) saturate(1.3);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),inset 0 1.5px 0 #fff,0 24px 60px rgba(26,30,38,.10)}
.gplate .div{background:var(--silver);margin-block:56px}
.gplate .L{padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:20px}
.gplate .R{padding:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.rule{height:1.5px;background:var(--silver)}
.gplate h3{font-size:clamp(64px,9vw,132px);line-height:.9;letter-spacing:-.04em;font-weight:700}
.gplate .line{font-size:21px;color:var(--soft)}
.tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{font-size:12px;font-weight:500;padding:4px 10px;border:1px solid var(--silver);background:rgba(255,255,255,.35)}
.gplate .R .cloud{width:min(476px,100%)}
.gplate .R .shadow{width:70%;height:40px;border-radius:50%;background:rgba(124,129,136,.35);filter:blur(18px)}
.form{display:flex;flex-wrap:wrap}
.form input{flex:1 1 220px;min-width:0;min-height:56px;border:1.5px solid var(--silver);border-right:0;background:rgba(255,255,255,.6);padding:0 16px;font:15px var(--sans);color:var(--ink)}
.form .done{flex-basis:100%;font-size:15px;color:var(--soft);padding:16px 0 0}
.gplate.solo{grid-template-columns:1fr;width:min(720px,100%)}
@media (max-width:900px){.gplate{grid-template-columns:1fr}.gplate .div{height:1.5px;margin:0 32px}.gplate .R{padding:32px}}

/* ---------- players ---------- */
.players{display:flex;flex-direction:column;gap:10px}
.pl{display:grid;grid-template-columns:30px minmax(120px,190px) 1fr 44px;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;color:var(--ink);background:none;border:0;text-align:left;cursor:pointer;width:100%;padding:0}
.pl .pb{width:30px;height:30px;background:var(--silver);display:grid;place-items:center}
.pl .pb:before{content:"";border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.pl.on .pb{background:var(--ink)}
.pl.on .pb:before{border:0;width:9px;height:11px;margin:0;border-left:3px solid #fff;border-right:3px solid #fff}
.pl .w{height:18px;--p:0%;background:linear-gradient(90deg,var(--ink) var(--p),#b5b9be var(--p));-webkit-mask:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 5px);mask:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 5px)}
.pl .t{color:var(--grey);text-align:right}
.pl .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.pl{grid-template-columns:30px 1fr 44px}.pl .w{display:none}}

/* ---------- 03 journey (point clouds) ---------- */
.journey{height:820vh;position:relative}
.pin{position:sticky;top:0;height:100vh;overflow:hidden}
.pin canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;z-index:1}
.pin canvas.dragging{cursor:grabbing}
.loading{position:absolute;inset:0;display:grid;place-items:center;font:12px var(--mono);color:var(--grey);z-index:4}
.loading[hidden]{display:none}
.caption{position:absolute;z-index:2;left:max(20px,4vw);bottom:150px;max-width:min(480px,calc(100% - 40px));display:flex;flex-direction:column;gap:12px;transition:opacity .45s ease,transform .45s ease}
.caption.out{opacity:0;transform:translateY(8px)}
.caption .meta{font:12px var(--mono);letter-spacing:.08em;color:var(--grey);text-transform:uppercase}
.caption h1{font-size:clamp(56px,8vw,104px);line-height:.9;letter-spacing:-.04em;font-weight:700}
.caption .line{font-size:19px;color:var(--soft);max-width:34ch}
.caption .moods{display:flex;gap:8px;flex-wrap:wrap}
.caption .moods span{font-size:12px;font-weight:500;padding:4px 10px;border:1px solid var(--silver);background:rgba(255,255,255,.35)}
.caption .place{display:none}
.rail{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.rail button{appearance:none;border:0;text-align:left;padding:12px 14px 30px;cursor:pointer;color:var(--ink);font:inherit;display:flex;flex-direction:column;gap:2px;min-width:0;position:relative;background:rgba(255,255,255,.32);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.8)}
.rail button[aria-current=true]{background:var(--silver)}
.rail button b{font-size:16px;letter-spacing:.03em}
.rail button span{font:11px var(--mono);color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail button i{position:absolute;left:0;top:0;height:2px;background:var(--ink);width:0}
@media (max-width:720px){.rail button span{display:none}.rail button{padding:12px 8px 22px}.rail button b{font-size:12px}}
/* cover plate over the journey: clear glass with silver accents */
.plate,.plateTop{position:absolute;left:50%;top:50%;width:min(1080px,92vw);aspect-ratio:1000/750;max-height:84vh;transform:translate(-50%,-50%);pointer-events:none;transform-origin:var(--ox,74%) var(--oy,50%)}
.plate{z-index:0}.plateTop{z-index:3}
.plate svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plate{border-radius:3.9%/5.2%;box-shadow:0 24px 50px rgba(26,30,38,.10)}   /* shadow only outside the plate, never inside the window */
.ptext{position:absolute;left:6%;top:8%;width:38%;bottom:8%;display:flex;flex-direction:column;color:var(--ink);font-size:clamp(9px,1.2vw,14px);line-height:1.35}
.ptext .row{padding-block:.9em;border-bottom:1.5px solid var(--silver)}
.ptext .row:first-child{padding-top:0;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.ptext .ttl{font-weight:700;font-size:clamp(28px,5.4vw,72px);line-height:.9;letter-spacing:-.04em}
.ptext #pLine{color:var(--soft);font-size:clamp(10px,1.3vw,16px)}
.ptext #pTempo{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.ptext .foot{margin-top:auto;font-size:clamp(22px,3.6vw,48px);line-height:1}
.ptext .listen{pointer-events:auto;margin-top:1.2em;align-self:flex-start;appearance:none;border:0;background:var(--silver);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),0 8px 24px rgba(26,30,38,.1);color:var(--ink);font:600 clamp(9px,1vw,12px) var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:.9em 1.2em 1.8em;cursor:pointer;min-width:12em;text-align:left}
@media (max-width:640px){.plate,.plateTop{width:96vw}.ptext{left:5%;width:42%}}
.pin.deep .caption h1,.pin.deep .caption .meta,.pin.deep .caption .line{color:#eef6f8}
.pin.deep .caption .moods span{color:#eef6f8;border-color:rgba(238,246,248,.35);background:rgba(14,59,79,.4)}

/* ---------- sections ---------- */
.sec{padding:120px max(20px,4vw);display:flex;flex-direction:column;gap:36px;border-bottom:1px solid var(--line)}
.sec h2{font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.035em;font-weight:700}
.promise{text-align:center;align-items:center}
.promise .big{font-size:clamp(30px,4.4vw,60px);line-height:1.08;letter-spacing:-.03em;font-weight:500;max-width:22ch}
.promise .small{font-size:clamp(17px,1.6vw,22px);color:var(--soft);max-width:44ch}
.counters{display:grid;grid-template-columns:repeat(4,1fr);width:100%;border-top:1.5px solid var(--silver);margin-top:12px}
.counters div{padding-top:24px;display:flex;flex-direction:column;align-items:center;gap:6px}
.counters b{font-size:clamp(52px,7vw,104px);letter-spacing:-.05em;line-height:1;font-weight:600}
.counters span{color:var(--grey)}
@media (max-width:700px){.counters{grid-template-columns:repeat(2,1fr);row-gap:24px}}

.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pgrid .pl{background:var(--paper);padding:18px;grid-template-columns:30px minmax(0,1fr) 44px}
.pgrid .pl .stack{display:flex;flex-direction:column;gap:8px;min-width:0}
@media (max-width:900px){.pgrid{grid-template-columns:1fr}}
.albums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.album{padding:20px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.4);display:flex;flex-direction:column;gap:12px}
.album header{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.album h3{font-size:24px;letter-spacing:.01em}
.album .free{font:600 11px var(--sans);letter-spacing:.08em;background:var(--silver);padding:3px 7px}
.album .players .pl{grid-template-columns:30px 1fr 44px}
.album .players .pl .w{display:none}
@media (max-width:1000px){.albums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.albums{grid-template-columns:1fr}}

.inside{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.tree{background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--line);padding:20px 24px;font:13px/1.6 var(--mono);max-height:640px;overflow:auto;min-width:0}
.fold summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:5px 0;align-items:baseline}
.fold summary::-webkit-details-marker{display:none}
.fold summary .fn:before{content:"▸";display:inline-block;width:1.4em;color:var(--grey);transition:transform .15s ease}
.fold[open]>summary .fn:before{transform:rotate(90deg)}
.fold summary:hover .fn{text-decoration:underline;text-underline-offset:3px}
.fold .fc{color:var(--grey);font-size:11px;white-space:nowrap}
.fold .freetag{margin-left:8px;font:600 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--silver);padding:2px 6px;vertical-align:1px}
.fold .kids{padding-left:1.4em;border-left:1px solid var(--line);margin-left:.35em;overflow:hidden}
.tree .file,.tree .pl.file{display:grid;grid-template-columns:22px minmax(0,1fr) 44px;gap:8px;align-items:center;padding:4px 0;font:12px var(--mono)}
.tree .file .dot{width:6px;height:6px;background:var(--silver);margin-left:8px}
.tree .file .n,.tree .pl.file .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree .file .t{color:var(--grey);text-align:right}
.tree .pl.file .pb{width:22px;height:22px}
.tree .pl.file .pb:before{border-left-width:7px;border-top-width:5px;border-bottom-width:5px}
.app{display:flex;flex-direction:column;gap:12px}
.app video{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;background:#111;outline:1.5px solid var(--silver);outline-offset:6px;box-shadow:0 24px 60px rgba(26,30,38,.14)}
@media (max-width:900px){.inside{grid-template-columns:1fr}}

/* score your own footage */
.tcontrols{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.tselect{min-height:44px;padding:0 14px;border:0;background:var(--glass);box-shadow:inset 0 0 0 1px var(--silver);font:500 14px var(--sans);color:var(--ink)}
.tcontrols .mono{align-self:center}
.blk:disabled{opacity:.45;cursor:not-allowed;transform:none}
.tstage{position:relative;width:100%;max-width:1200px;aspect-ratio:16/9;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1.5px var(--silver);display:grid;place-items:center;overflow:hidden}
.tstage.over{box-shadow:inset 0 0 0 2px var(--ink)}
.tstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111;display:none}
.tstage.has video{display:block}
.tstage.has .tempty{display:none}
.tempty{color:var(--grey);font-size:15px}
.tbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(195,199,204,.5)}
.tbar i{display:block;height:100%;width:0;background:var(--ink)}

/* grain-to-picture reveal */
.reveal{height:300vh;position:relative;border-bottom:1px solid var(--line)}
.reveal .sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:80px max(20px,4vw) 32px}
.rhead{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.rhead h2{font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.035em;font-weight:700}
.rhead p{margin-top:10px;color:var(--soft);max-width:48ch}
.vstage{position:relative;width:100%;max-width:1200px;margin-inline:auto;aspect-ratio:16/9;max-height:62vh}
.vstage>*{position:absolute;inset:0;width:100%;height:100%;display:block}
.vstage .flat{object-fit:cover;opacity:0}
.progress{height:1.5px;background:var(--line);max-width:1200px;width:100%;margin-inline:auto}
.progress i{display:block;height:100%;background:var(--ink);width:0}
.src{font-size:12px;color:var(--grey)}

.ph{background:#e6e6e3;border:1px dashed #b5b5b0;display:grid;place-items:center;text-align:center;color:#777;font-size:14px;padding:20px}
.story{display:grid;grid-template-columns:420px 1fr;gap:48px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.quotes div{padding:20px;box-shadow:inset 0 0 0 1px var(--line);color:var(--soft);min-height:110px}
@media (max-width:900px){.story,.quotes{grid-template-columns:1fr}}

.pricewrap{position:relative;padding:120px max(20px,4vw);display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.pricewrap>*:not(.glow){position:relative;z-index:1}
.pricewrap h2{font-size:clamp(34px,4.6vw,64px);letter-spacing:-.035em;line-height:1}
.price{width:min(1100px,100%);display:grid;grid-template-columns:1.5fr 1fr;text-align:left;background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 24px 60px rgba(26,30,38,.10)}
.price .card{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:20px;border-right:1.5px solid var(--silver)}
.price .amt{display:flex;align-items:baseline;gap:14px}.price .amt b{font-size:clamp(56px,7vw,88px);letter-spacing:-.05em;line-height:1}.price .amt s{color:var(--grey);font-size:24px}
.price ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}.price li:before{content:"— ";color:var(--grey)}
.price .alt{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.price .alt h3{font-size:32px;letter-spacing:-.02em}
@media (max-width:900px){.price{grid-template-columns:1fr}.price .card{border-right:0;border-bottom:1.5px solid var(--silver)}.price ul{grid-template-columns:1fr}}

.faq{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{font-size:20px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--grey)}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--soft);margin-top:10px;max-width:70ch}

footer{display:grid;grid-template-columns:repeat(4,1fr);min-height:420px}
footer>div{padding:20px;display:flex;flex-direction:column;gap:4px;font-size:clamp(20px,2.2vw,32px);font-weight:600;text-transform:uppercase}
footer a{color:inherit;text-decoration:none}
footer .f1{background:var(--ink);color:#fff;justify-content:space-between;text-transform:none}
footer .f1 .wm{font-size:clamp(44px,5vw,80px)}
footer .f2{background:var(--silver)}
footer .f3{background:#fff}
footer .f4{background:#e6e6e3}
footer small{font-size:12px;font-weight:400;color:#9a9a96;text-transform:none}
@media (max-width:800px){footer{grid-template-columns:1fr 1fr}}

/* logo A/B review switch */
.logoswitch{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--edge),0 8px 24px rgba(26,30,38,.12)}
.logoswitch button{appearance:none;border:0;background:none;padding:10px 14px;font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;color:var(--grey)}
.logoswitch button[aria-pressed=true]{background:var(--silver);color:var(--ink)}

@media (prefers-reduced-motion:reduce){.hero .cloud img{animation:none}html{scroll-behavior:auto}.caption{transition:none}}