/* ============================================================
   RUIDO SCORES — LIQUID LAYER (proposal, not linked from index.html yet)
   Rounded, liquid, minimal: pill buttons with a round knob, warm glass plates with big radii,
   a floating nav pill. Loaded after style.css; remove this file to go back to the square look.
   ============================================================ */
:root{
  --taupe:#c6c1b6;                       /* warm grey from the user's pick */
  --glow-side:#c6c1b6;                   /* the side glows were green; now the same warm grey */
  --stone:#3d3b37;                       /* dark warm pill */
  --stone-2:#57544e;                     /* knob on the dark pill */
  --wglass:rgba(222,218,210,.42);        /* warm glass plate */
  --wedge:rgba(255,255,255,.75);
  --r-plate:40px; --r-card:26px; --r-pill:999px;
  /* dotted arrow, like the dot-matrix icon in the reference */
  --dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='4' cy='12' r='1.5'/%3E%3Ccircle cx='8.5' cy='12' r='1.5'/%3E%3Ccircle cx='13' cy='12' r='1.5'/%3E%3Ccircle cx='17.5' cy='12' r='1.6'/%3E%3Ccircle cx='14' cy='7.5' r='1.5'/%3E%3Ccircle cx='14' cy='16.5' r='1.5'/%3E%3Ccircle cx='10.5' cy='4' r='1.3'/%3E%3Ccircle cx='10.5' cy='20' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- buttons: liquid pills with a round knob ---------- */
.blk{position:relative;min-width:0;height:60px;padding:0 7px 0 28px;gap:22px;align-items:center;border-radius:var(--r-pill);font:600 12px/1 var(--sans);letter-spacing:.16em}
/* a dotted arrow after the label, no circle around it */
.blk{padding:0 26px 0 30px;gap:16px}
.blk:after{content:"";flex:none;width:20px;height:20px;background:var(--ki);-webkit-mask:var(--dots) center/20px no-repeat;mask:var(--dots) center/20px no-repeat;transition:transform .2s ease}
.blk:hover:after{transform:translateX(3px)}
.blk.silver{--kn:var(--stone-2);--ki:#f4f2ee;background:linear-gradient(180deg,#4a4843,var(--stone));color:#f4f2ee;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 34px rgba(40,36,30,.22)}
.blk.glass{--kn:rgba(198,193,182,.55);--ki:var(--ink);background:rgba(255,255,255,.5);color:var(--ink);box-shadow:inset 0 0 0 1px var(--wedge),inset 0 1.5px 0 #fff,0 14px 34px rgba(40,36,30,.10)}
.blk.sm{height:50px;padding:0 20px 0 24px;gap:12px;font-size:11px}
.blk.sm:after{width:16px;height:16px;-webkit-mask-size:16px;mask-size:16px}
.blk:hover{transform:translateY(-1px)}

/* ---------- nav: a floating pill ---------- */
.nav{inset:12px 12px auto;border-radius:var(--r-pill);padding:8px 8px 8px 22px;background:rgba(236,233,227,.55);border:0;box-shadow:inset 0 0 0 1px var(--wedge),0 10px 30px rgba(40,36,30,.08)}
.nav .blk.sm{height:42px;font-size:10.5px}
.sound{border-radius:var(--r-pill);height:42px;padding:0 16px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px var(--wedge)}

/* ---------- plates: warm glass, big radii ---------- */
.gplate,.price{border-radius:var(--r-plate);overflow:hidden;background:var(--wglass);box-shadow:inset 0 0 0 1px var(--wedge),inset 0 1.5px 0 rgba(255,255,255,.9),0 30px 70px rgba(40,36,30,.10)}
.rule{height:1px;background:rgba(61,59,55,.14)}
.price .card{border-right:1px solid rgba(61,59,55,.12)}
.tags span,.caption .moods span{border-radius:var(--r-pill);border:0;padding:6px 14px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--wedge)}

/* email form: one pill, button inside */
.form{border-radius:var(--r-pill);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--wedge);padding:6px;gap:6px;flex-wrap:nowrap}
.form input{border:0;background:none;min-height:50px;padding:0 18px;border-radius:var(--r-pill)}
.form .blk{height:50px}

/* players: round play buttons, rounded cards */
.pl .pb{border-radius:50%;background:rgba(198,193,182,.6)}
.pl.on .pb{background:var(--stone)}
.pgrid{gap:12px;background:none;border:0}
.pgrid .pl{border-radius:var(--r-card);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--wedge);padding:18px 20px}

/* album rail: rounded tiles floating above the bottom edge */
.rail{left:12px;right:12px;bottom:12px;gap:8px}
.rail button{border-radius:22px;padding:14px 18px 22px;background:rgba(236,233,227,.5)}
.rail button[aria-current=true]{background:var(--stone);color:#f4f2ee}
.rail button[aria-current=true] span{color:var(--taupe)}
.rail button i{display:none}
.ptext .listen{border-radius:var(--r-pill);background:var(--stone);color:#f4f2ee;padding:1.1em 1.6em;min-width:0}

/* inside: tree and app as rounded glass */
.tree{border-radius:var(--r-plate);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--wedge);padding:28px 32px}
.fold .freetag{border-radius:var(--r-pill);background:var(--taupe);padding:2px 8px}
.tree .file .dot{border-radius:50%}
.app video,.app img{border-radius:var(--r-card);outline:0;box-shadow:0 30px 70px rgba(40,36,30,.16)}

/* footage tryout */
.tselect{border-radius:var(--r-pill);height:50px;padding:0 20px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--wedge)}
.tstage{border-radius:var(--r-plate);background:var(--wglass);box-shadow:inset 0 0 0 1px var(--wedge)}

/* questions: rounded rows */
.faq{border-top:0;display:flex;flex-direction:column;gap:10px}
.faq details{border:0;border-radius:var(--r-card);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--wedge);padding:22px 28px}
.faq summary:after{content:"";width:22px;height:22px;flex:none;background:var(--ink);-webkit-mask:var(--dots) center/16px no-repeat;mask:var(--dots) center/16px no-repeat;transform:rotate(90deg);transition:transform .2s ease}
.faq details[open] summary:after{content:"";transform:rotate(-90deg)}

/* footer: one solid warm-grey block, small columns on top, the RUIDO letters across the bottom */
footer{display:block;min-height:0;margin:0;padding:34px max(20px,2.2vw) 0;background:var(--taupe);color:var(--ink);overflow:hidden}
footer .fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:clamp(40px,5vw,80px)}
footer .fcol{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:0;font:400 13px/1.45 var(--sans);text-transform:none}
footer .fcol>div{display:flex;flex-direction:column;color:rgba(28,29,27,.6)}
footer .fcol .fh{font-weight:500}
footer .fcol a:hover{color:var(--ink)}
footer .fsym{display:block;width:44px;height:44px;margin-bottom:34px;background:var(--ink);-webkit-mask:url("assets/img/ruido-symbol.svg") center/contain no-repeat;mask:url("assets/img/ruido-symbol.svg") center/contain no-repeat}
@media (max-width:800px){footer .fcols{grid-template-columns:1fr}}
.theme-c footer{background:var(--taupe)}

/* nav: no bar, just a soft blur that fades out downward; symbol only, plain text controls */
.nav{inset:0 0 auto;border-radius:0;padding:20px max(20px,2.2vw) 20px;border:0;box-shadow:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav:before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 72%,transparent),transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask:linear-gradient(#000 40%,transparent);mask:linear-gradient(#000 40%,transparent)}
.nav .brand>[data-wm]{display:none}
.logo-b .nav .navsym,.nav .navsym{display:block;width:40px;height:40px}
.nav .right{gap:28px}
.nav .sound,.nav .blk.sm,.nav .blk.silver{background:none;box-shadow:none;padding:0;height:auto;color:var(--ink);font:500 13px var(--sans);letter-spacing:.04em;text-transform:none}
.nav .blk.sm:after{--ki:var(--ink);background:var(--ink)}

.logoswitch{border-radius:var(--r-pill);padding:4px}
.logoswitch button{border-radius:var(--r-pill)}
.logoswitch button[aria-pressed=true]{background:var(--stone);color:#f4f2ee}

/* promise: two lines, broken after "slowly," */
.promise .big{max-width:none}
.promise .big span{display:block}

/* ---------- option C: the warm grey #c6c1b6 is the page colour, type in black and white ---------- */
body.theme-c{
  --paper:#c4c4c1;
  --soft:#2c2a26;                         /* body text: near-black */
  --grey:rgba(28,29,27,.55);              /* small labels: black, softened */
  --line:rgba(28,29,27,.14);
  --silver:rgba(255,255,255,.55);         /* rules and dividers turn white */
  --glow-centre:#d6d1c7;
  --glow-side:#b5ae9f;
  --wglass:rgba(255,255,255,.22);
  --wedge:rgba(255,255,255,.6);
}
.theme-c .acc,.theme-c .free h2 .acc{color:#fff}           /* accent words in white */
.theme-c .nav nav a{color:rgba(28,29,27,.6)}
.theme-c .nav nav a:hover{color:var(--ink)}
.theme-c #plateShape{fill:#c4c4c1}                        /* the journey's cover plate matches the page */
.theme-c .rule{background:rgba(255,255,255,.5)}
.theme-c .counters{border-top-color:rgba(255,255,255,.6)}

/* hero plate: brushed metal, dark on the left, lit from the top right (user's metal reference) */
.logo-b .hero{background:radial-gradient(110% 120% at 88% 8%,#f3f3f1 0%,#c9c9c6 26%,#8d8d8a 52%,#4a4a48 76%,#1f1f1e 100%);color:#fff;overflow:hidden}
.logo-b .hero:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.logo-b .hero>.glow{display:none}
.logo-b .hero h1{color:rgba(255,255,255,.82);font-weight:400;letter-spacing:.06em}
.logo-b .hero .sandmark:after{display:none}
.logo-b .hero .meta .mono{color:rgba(255,255,255,.6)}
/* footer: the same brushed metal as the hero plate, light type */
footer,.theme-c footer{position:relative;background:linear-gradient(100deg,#2b2b2a 0%,#454543 50%,#5c5c5a 100%);color:#fff}
footer:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
footer>*{position:relative}
footer .fcol>div{color:rgba(255,255,255,.62)}
footer .fcol a:hover{color:#fff}
footer .fsym{background:#fff}
/* soft, blurred hand-off from the page into the metal footer instead of a hard line */
footer{padding-top:170px;margin-top:-60px;-webkit-mask:linear-gradient(transparent 0,rgba(0,0,0,.35) 60px,#000 170px);mask:linear-gradient(transparent 0,rgba(0,0,0,.35) 60px,#000 170px)}
#faq{border-bottom:0}
footer{padding-top:300px;margin-top:-160px;-webkit-mask:linear-gradient(transparent 0,rgba(0,0,0,.12) 70px,rgba(0,0,0,.45) 160px,rgba(0,0,0,.85) 250px,#000 320px);mask:linear-gradient(transparent 0,rgba(0,0,0,.12) 70px,rgba(0,0,0,.45) 160px,rgba(0,0,0,.85) 250px,#000 320px)}
footer:before{opacity:.22}

/* ---------- silver system: big metal surfaces (hero, footer) > metal primary buttons > small metal artifacts ---------- */
:root{
  --metal:linear-gradient(180deg,#f4f4f2 0%,#cfcfcc 38%,#a9a9a6 62%,#d9d9d6 100%);          /* polished pill */
  --metal-dark:linear-gradient(180deg,#5d5d5b 0%,#3a3a39 55%,#2a2a29 100%);                   /* dark brushed */
  --metal-disc:radial-gradient(circle at 32% 28%,#fbfbfa 0%,#d4d4d1 30%,#9a9a97 70%,#c8c8c5 100%);
  --metal-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 26px rgba(30,30,28,.22);
}
/* 2 · primary buttons: polished silver, dark type */
.blk.silver{background:var(--metal);color:#1c1c1b;box-shadow:var(--metal-edge);--ki:#1c1c1b}
.blk.silver:hover{filter:brightness(1.04)}
/* on the dark metal hero the primary stays polished; the secondary goes smoked glass */
.logo-b .hero .blk.glass{background:rgba(255,255,255,.12);color:#fff;--ki:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
/* 3 · small artifacts */
.pl .pb{background:var(--metal-disc);box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(30,30,28,.2)}
.pl.on .pb{background:var(--metal-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px rgba(30,30,28,.25)}
.rail button[aria-current=true]{background:var(--metal);color:#1c1c1b;box-shadow:var(--metal-edge)}
.rail button[aria-current=true] span{color:#5a5a58}
.ptext .listen{background:var(--metal);color:#1c1c1b;box-shadow:var(--metal-edge)}
.fold .freetag{background:var(--metal);box-shadow:inset 0 1px 0 #fff}
.logoswitch button[aria-pressed=true]{background:var(--metal-dark)}
.faq summary:after{background:#8d8d8a}
.promise{border-bottom:0}

/* ---------- sandy liquid glass (replaces the brushed-silver plates) ----------
   flat silver tint, heavy blur, bright liquid edge, and a fine sand grain like the hero animation */
:root{--sand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .21 0 0 0 0 .2 7 0 0 0 -4.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23s)'/%3E%3C/svg%3E");--glass-silver:rgba(214,214,211,.42);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -14px 30px rgba(255,255,255,.18),0 30px 70px rgba(30,30,28,.14);
  --metal:#d6d6d3;--metal-disc:#d6d6d3}
.gplate,.price,.tree,.tstage{position:relative;background:var(--glass-silver);-webkit-backdrop-filter:blur(34px) saturate(1.5);backdrop-filter:blur(34px) saturate(1.5);box-shadow:var(--glass-edge)}
.gplate:before,.price:after,.tree:before,.tstage:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--sand);opacity:.42;mix-blend-mode:multiply;z-index:0}
.gplate>*,.price>*,.tree>*,.tstage>*{position:relative;z-index:1}
/* COLD sample section fits one screen */
.free{min-height:100vh;justify-content:center;padding-block:80px;gap:26px}
.free h2{font-size:clamp(34px,4.4vw,64px)}
.free .gplate.solo{width:min(600px,100%)}
.free .gplate .L{padding:30px 34px;gap:13px}
.free .gplate h3{font-size:clamp(52px,6vw,86px)}
.free .gplate .line{font-size:18px}
.free .players{gap:4px}
/* flat silver, no gradient: buttons, play discs, album rail, journey plate */
.blk.silver,.ptext .listen,.rail button[aria-current=true]{background:var(--metal);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.5),0 10px 26px rgba(30,30,28,.16)}
.pl .pb{background:var(--metal-disc);box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(30,30,28,.16)}
.pl.on .pb{background:#3d3b37}
#plateShape{fill:#f2f2f2}.theme-c #plateShape{fill:#c4c4c1}   /* plate = the scene's ground colour, so the island floats on one solid surface */
.logoswitch[hidden]{display:none!important}
.fold .freetag{background:var(--metal)}

/* journey plate: no outline, edges dissolve into the page */
.plate{-webkit-mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent),linear-gradient(transparent 0,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent),linear-gradient(transparent 0,#000 9%,#000 91%,transparent);mask-composite:intersect}
/* journey plate: smaller, with clear room under the nav and above the album rail */
.plate,.plateTop{width:min(940px,84vw,calc(66vh * 1.3333));max-height:66vh;top:calc(50% - 8px)}

/* journey plate, take 3: a subtle blurred glass pane BEHIND the island (so there's no cut-out shape), the svg plate itself is invisible */
#plateShape,.theme-c #plateShape{fill:none}
.plateBack{position:absolute;left:50%;top:calc(50% - 8px);width:min(940px,84vw,calc(66vh * 1.3333));aspect-ratio:1000/750;max-height:66vh;transform:translate(-50%,-50%);transform-origin:var(--ox,74%) var(--oy,50%);pointer-events:none;visibility:hidden;
  border-radius:44px;background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 30px 80px rgba(30,30,28,.08);filter:blur(10px)}