/* Case study: feel30 */
/* Layout: the page takes on Feel30's own world (almost black, offwhite, navy, burnt orange) for the identity chapters,
   then hands back to Decibel's night for the funnel. One 12-column grid, 1360px max. */
:root{
  --night:#071D23; --ink:#0F343C; --signal:#00C6E6; --coral:#F47F55; --paper:#F8F4EC; --paper-deep:#EFE8DA;
  --on-night:#F8F4EC; --on-night-2:rgba(248,244,236,.66); --on-night-3:rgba(248,244,236,.42); --night-line:rgba(248,244,236,.12);
  --on-paper:#0F343C; --on-paper-2:rgba(15,52,60,.7); --on-paper-3:rgba(15,52,60,.5); --paper-line:rgba(15,52,60,.14);
  /* Feel30 brand palette, from its guidelines */
  --f-black:#060606; --f-off:#EDEBDA; --f-orange:#CD5C40; --f-navy:#130F3D; --f-white:#FFFFFF;
  --f-off-2:rgba(237,235,218,.66); --f-off-3:rgba(237,235,218,.4); --f-off-line:rgba(237,235,218,.14);
  --f-blk-2:rgba(6,6,6,.66); --f-blk-3:rgba(6,6,6,.45); --f-blk-line:rgba(6,6,6,.14);
  --f-cream:#F8F7F1; --f-midnight:#0E0C22; --f-terra:#CD5C40; --f-mint:#06DA8D; --f-amber:#E39B3C;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display:clamp(2.5rem,5.8vw,6.25rem); --t-h3:clamp(1.5rem,2.2vw,2rem);
  --t-lede:clamp(1.0625rem,1.35vw,1.3125rem); --t-body:1.0625rem; --t-ui:.9375rem; --t-label:.75rem;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --hdr:72px; --gutter:clamp(16px,4vw,48px); --max:1360px;
  color-scheme:dark;
}
/* ===== Hero ===== */
.hero{position:relative;padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + clamp(28px,4vw,56px));padding-bottom:clamp(64px,8vw,120px);overflow:hidden;background:radial-gradient(70% 60% at 85% 70%,#16130F 0%,var(--f-black) 70%)}
.hero-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,36px)}
.masthead{color:var(--f-off);width:100%;height:auto;overflow:visible}
.masthead .mh-l{animation:rise 900ms var(--ease-out) both;animation-delay:calc(200ms + var(--i) * 70ms)}
.masthead .mh-s{animation:wipe 1400ms var(--ease-in-out) both;animation-delay:700ms}
@media (prefers-reduced-motion:reduce){.masthead .mh-l,.masthead .mh-s{animation-name:in-fade;animation-duration:400ms}}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(40px,6vw,88px);align-items:start}
.hero-copy{grid-column:1 / span 5;display:grid;gap:24px;align-content:start;padding-top:clamp(0px,2vw,24px)}
.hero h1{font-size:clamp(2.1rem,3.6vw,3.6rem);font-weight:800;font-stretch:92%;line-height:1;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--f-orange)}
.hero-lede{color:var(--f-off-2);max-width:44ch;font-size:var(--t-lede)}
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:12px 0 0;padding-top:20px;border-top:1px solid var(--f-off-line)}
.meta div{display:grid;gap:5px;min-width:0}
.meta dt{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--f-off-3)}
.meta dd{margin:0;font-weight:500;line-height:1.4}
.collage{grid-column:7 / span 6;position:relative;aspect-ratio:1 / .98;max-width:100%}
.collage figure{position:absolute;overflow:hidden;border-radius:20px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);transform:translateY(var(--py,0px));animation:unveil 1200ms var(--ease-in-out) both;animation-delay:var(--d,0ms)}
.collage img{width:100%;height:100%;object-fit:cover}
.c-tee{right:0;top:0;width:66%;aspect-ratio:1 / 1}
.c-cap{left:0;top:30%;width:38%;aspect-ratio:2 / 3}
.c-bottle{right:6%;bottom:0;width:27%;aspect-ratio:2 / 3}
.c-bottle img{object-position:50% 60%}
@media (prefers-reduced-motion:reduce){.collage figure{animation-name:in-fade;animation-duration:400ms}}

/* ===== Brief ===== */
.brief{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.brief .label{grid-column:1 / -1}
.brief-q{grid-column:1 / span 8;font:600 clamp(1.75rem,3.5vw,3.25rem)/1.12 var(--f-display);font-stretch:96%;letter-spacing:-.02em}
.brief-q span{color:var(--f-blk-3)}
.brief-cols{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--f-blk-line)}
.brief-cols h3{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--f-blk-3);margin-bottom:10px}
.brief-cols p{color:var(--f-blk-2)}

/* ===== The mark ===== */
.mark-sec{background:var(--f-navy)}
.mark-sec .label{color:var(--f-off-2)}
.construct{position:relative;border-radius:32px;background:#0C0A2A;box-shadow:inset 0 0 0 1px rgba(237,235,218,.08);padding:clamp(24px,5vw,72px) clamp(16px,4vw,56px);overflow:hidden}
.construct-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:clamp(16px,3vw,32px);flex-wrap:wrap}
.construct-top span{font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--f-off-3)}
.cx{width:100%;height:auto;overflow:visible;color:var(--f-off)}
.cx .g{fill:none;stroke:rgba(237,235,218,.32);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1100ms var(--ease-in-out);transition-delay:calc(var(--k,0) * 90ms)}
.cx .bar{fill:rgba(205,92,64,.22);transform-box:fill-box;transform-origin:50% 0;scale:1 0;transition:scale 900ms var(--ease-out);transition-delay:calc(300ms + var(--k,0) * 90ms)}
.cx .note{fill:rgba(237,235,218,.62);font:500 10.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity 400ms ease-out;transition-delay:calc(700ms + var(--k,0) * 90ms)}
.cx .lead{fill:none;stroke:rgba(237,235,218,.45);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 700ms var(--ease-out);transition-delay:calc(600ms + var(--k,0) * 90ms)}
.construct[data-on="true"] .g,.construct[data-on="true"] .lead{stroke-dashoffset:0}
.construct[data-on="true"] .bar{scale:1 1}
.construct[data-on="true"] .note{opacity:1}
.construct[data-on="false"] .g,.construct[data-on="false"] .lead,.construct[data-on="false"] .bar,.construct[data-on="false"] .note{transition-delay:0ms;transition-duration:250ms}
@media (prefers-reduced-motion:reduce){.cx .g,.cx .lead,.cx .bar,.cx .note{transition:opacity 300ms ease-out!important}.cx .g,.cx .lead{stroke-dashoffset:0}.cx .bar{scale:1 1}.construct[data-on="false"] .g,.construct[data-on="false"] .lead,.construct[data-on="false"] .bar{opacity:0}}
.idea{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;margin-top:16px}
.idea-tile{position:relative;border-radius:32px;background:var(--f-orange);display:grid;place-items:center;aspect-ratio:16 / 10;max-width:100%;overflow:hidden}
.idea-tile svg{width:62%;height:auto;color:var(--f-off)}
.idea-tile .sym{clip-path:inset(0 100% 0 0);transition:clip-path 1500ms var(--ease-in-out)}
.idea-tile[data-on="true"] .sym{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.idea-tile .sym{clip-path:none}}
.idea-tile small{position:absolute;left:24px;bottom:22px;font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(237,235,218,.75)}
.idea-copy{border-radius:32px;background:#0C0A2A;box-shadow:inset 0 0 0 1px rgba(237,235,218,.08);padding:clamp(24px,3vw,40px);display:grid;gap:18px;align-content:end}
.idea-copy h3{font-size:clamp(1.75rem,2.8vw,2.6rem);font-weight:800;font-stretch:90%;letter-spacing:-.03em;line-height:1}
.idea-copy p{color:var(--f-off-2)}
.idea-copy b{color:var(--f-off);font-weight:600}

/* Lockups */
.lockups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lock{border-radius:28px;aspect-ratio:4 / 3.2;max-width:100%;display:grid;place-items:center;position:relative;overflow:hidden}
.lock svg{height:auto}
.lock small{position:absolute;left:20px;bottom:18px;font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.lock-1{background:#111;box-shadow:inset 0 0 0 1px rgba(237,235,218,.08);color:var(--f-off)}.lock-1 svg{width:70%}.lock-1 small{color:var(--f-off-3)}
.lock-2{background:var(--f-off);color:var(--f-black)}.lock-2 svg{width:42%}.lock-2 small{color:var(--f-blk-3)}
.lock-3{background:var(--f-navy);color:var(--f-off)}.lock-3 svg{width:46%}.lock-3 small{color:var(--f-off-3)}
@media (hover:hover) and (pointer:fine){.lock svg{transition:scale 500ms var(--ease-out)}.lock:hover svg{scale:1.04}}

/* Color + type */
.palette{display:flex;height:clamp(260px,32vw,420px);border-radius:28px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--f-blk-line)}
.chip{position:relative;flex:var(--use) 1 0;min-width:0;padding:clamp(14px,1.8vw,24px);display:flex;flex-direction:column;justify-content:space-between;transition:flex-grow 500ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.palette:hover .chip{flex-grow:calc(var(--use) * .7)}.palette .chip:hover{flex-grow:calc(var(--use) * 1.9)}}
.chip b{font:600 .9375rem/1.2 var(--f-body)}
.chip span{font:500 .6875rem/1.5 var(--f-mono);letter-spacing:.04em;opacity:.75;display:block}
.chip .use{font:800 clamp(2rem,4vw,3.75rem)/1 var(--f-display);font-stretch:85%;letter-spacing:-.03em;opacity:1}
.types{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:16px}
.tcard{border-radius:28px;background:#fff;box-shadow:0 0 0 1px var(--f-blk-line);padding:clamp(20px,2.6vw,32px);display:grid;gap:14px;align-content:space-between;min-width:0;color:var(--f-black)}
.tcard small{font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--f-blk-3)}
.t-syne{grid-column:span 6;background:var(--f-black);color:var(--f-off);box-shadow:none}
.t-syne small{color:var(--f-off-3)}
.t-syne .spec{font:800 clamp(4rem,9vw,8rem)/.9 "Syne",var(--f-display);letter-spacing:-.04em}
.t-syne p{font:700 clamp(1.4rem,2.2vw,2rem)/1.05 "Syne",var(--f-display);letter-spacing:-.03em}
.t-dm{grid-column:span 3}
.t-dm .spec{font:500 clamp(3rem,5vw,4.5rem)/1 "DM Sans",var(--f-body);letter-spacing:-.04em}
.t-dm p{font:400 1rem/1.45 "DM Sans",var(--f-body);color:var(--f-blk-2)}
.t-mono .spec{font:400 clamp(2.6rem,4.4vw,4rem)/1 "DM Mono",var(--f-mono);letter-spacing:-.04em}
.t-mono p{font:400 .875rem/1.5 "DM Mono",var(--f-mono);color:var(--f-blk-2);text-transform:uppercase;letter-spacing:.02em}

/* Applications */
.apps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.apps figure{position:relative;border-radius:24px;overflow:hidden;background:#141414;min-width:0}
.apps img{width:100%;height:100%;object-fit:cover;transition:scale 900ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.apps figure:hover img{scale:1.035}}
.apps figcaption{position:absolute;left:16px;bottom:14px;font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:8px 10px;border-radius:999px;background:rgba(6,6,6,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.a-1{grid-column:span 7;aspect-ratio:1 / 1}
.a-2{grid-column:span 5}
.a-2 img{object-position:50% 20%}
.a-3{grid-column:span 5}
.a-3 img{object-position:50% 55%}
.a-4{grid-column:span 7;aspect-ratio:1 / 1}
.a-5{grid-column:1 / -1;background:#050505!important;aspect-ratio:1528 / 500}
.a-5 img{object-fit:contain}

/* ===== Funnel ===== */
.browser{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px oklch(1 0 0 / .06),0 50px 100px -40px rgba(0,0,0,.75)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#ECEAE3}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#D3D0C6}
.browser-bar span{margin-inline:auto;font:500 .6875rem/1 var(--f-mono);color:#6F6C66;background:#F8F7F1;padding:6px 40px;border-radius:999px}
.browser img{width:100%;height:auto}
.phone{position:relative;aspect-ratio:390 / 844;width:100%;max-width:100%;border-radius:clamp(30px,4.4vw,48px);padding:clamp(7px,.9vw,10px);background:#0B0B10;box-shadow:inset 0 0 0 1.5px #2A2A33,0 50px 90px -40px rgba(0,0,0,.75)}
.phone-screen{position:relative;height:100%;border-radius:clamp(24px,3.6vw,39px);overflow:hidden;background:var(--f-cream)}
.phone-screen > img{position:absolute;left:0;top:0;width:100%;height:auto;transform:translateY(var(--sy,0px));will-change:transform}
.phone-notch{position:absolute;z-index:2;left:50%;top:clamp(12px,1.4vw,16px);translate:-50% 0;width:31%;height:clamp(18px,2.2vw,26px);border-radius:999px;background:#0B0B10}
.show{position:relative;max-width:1180px;margin-inline:auto;padding-bottom:6%}
.show .phone{position:absolute;right:-3%;bottom:0;width:clamp(120px,20vw,270px);transform:translateY(var(--pp,0px))}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(56px,7vw,112px);align-items:start}
.duo figure:nth-child(2){margin-top:clamp(40px,8vw,140px)}
.duo figcaption{margin-top:16px;color:var(--on-night-2);font-size:var(--t-ui);max-width:44ch}
.duo figcaption b{color:var(--on-night);font-weight:600}

/* Collection pages */
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(248,244,236,.06);box-shadow:inset 0 0 0 1px var(--night-line);margin-bottom:20px;max-width:100%;overflow-x:auto}
.tab{-webkit-tap-highlight-color:transparent;border:0;cursor:pointer;white-space:nowrap;height:40px;padding-inline:16px;border-radius:999px;background:transparent;color:var(--on-night-2);font:500 var(--t-ui)/1 var(--f-body);transition-property:background-color,color,scale;transition-duration:150ms;transition-timing-function:ease-out}
.tab:active{scale:.96}
.tab[aria-selected="true"]{background:var(--f-cream);color:var(--f-midnight)}
@media (hover:hover) and (pointer:fine){.tab[aria-selected="false"]:hover{color:var(--on-night)}}
.cp-stack{display:grid;background:var(--f-cream)}
.cp-stack img{grid-area:1 / 1;width:100%;height:auto;opacity:0;transition:opacity 300ms var(--ease-out)}
.cp-stack img[data-on="true"]{opacity:1}
@media (prefers-reduced-motion:no-preference){.cp-stack img{transform:scale(1.015);transition-property:opacity,transform;transition-duration:300ms,700ms}.cp-stack img[data-on="true"]{transform:none}}
.ui-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(56px,7vw,112px);align-items:start}
.ui-wide{grid-column:1 / -1}
.ui-grid figure:nth-child(3){margin-top:clamp(0px,6vw,96px)}
.ui-grid figcaption,.compare-side p{margin-top:16px;color:var(--on-night-2);font-size:var(--t-ui);max-width:48ch}
.ui-grid b,.compare-side b{color:var(--on-night);font-weight:600}
.compare{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(56px,7vw,112px)}
.compare-side{display:grid;justify-items:start}
.compare-side .phone{width:min(100%,280px)}

/* Assessment demo */
.demo-sec{background:var(--ink);color:var(--on-night)}
.demo-sec .label{color:var(--on-night-2)}
.demo-sec .label::before{background:var(--signal)}
.demo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.demo-copy{display:grid;gap:28px}
.demo-copy h2{font-size:var(--t-display);font-weight:800;font-stretch:90%;line-height:.94;letter-spacing:-.03em}
.demo-copy > p{color:var(--on-night-2);max-width:48ch;font-size:var(--t-lede)}
.rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--night-line)}
.rules li{display:grid;grid-template-columns:3em minmax(0,1fr);gap:16px;padding-block:18px;border-bottom:1px solid var(--night-line)}
.rules span{font:500 var(--t-label)/1.6 var(--f-mono);color:var(--signal)}
.rules b{display:block;font-weight:600;margin-bottom:2px}
.rules p{color:var(--on-night-2);font-size:var(--t-ui)}
.demo-device{justify-self:center;width:min(100%,360px);display:grid;gap:14px;justify-items:center}
.app{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;background:var(--f-cream);color:var(--f-midnight);font-family:var(--f-body)}
.app::-webkit-scrollbar{display:none}
.app-bar{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:44px 18px 12px;background:#0B0A0F;color:#fff}
.app-bar svg{height:11px;width:auto}
.app-bar span{font-size:.625rem;opacity:.8}
.app-body{padding:18px 16px 140px;display:grid;gap:12px}
.app .app-title{margin:0;font:600 1.375rem/1.1 var(--f-body);letter-spacing:-.02em;color:var(--f-midnight)}
.app .app-title em{font-style:normal;color:var(--f-terra);display:block}
.app .legend{font-size:.6875rem;line-height:1.4;color:#5b5a63;margin-bottom:4px}
.app .legend b{color:var(--f-midnight)}
.q{background:#fff;border-radius:12px;padding:12px;display:grid;gap:10px;box-shadow:inset 0 0 0 1px rgba(14,12,34,.06);opacity:.35;transition-property:opacity,box-shadow;transition-duration:300ms;transition-timing-function:var(--ease-out)}
.q[data-state="active"]{opacity:1;box-shadow:inset 0 0 0 1.5px var(--f-mint)}
.q[data-state="done"]{opacity:1}
.q p{margin:0;font-size:.8125rem;font-weight:500}
.scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.scores button{-webkit-tap-highlight-color:transparent;height:34px;border-radius:8px;border:0;background:#F1F0EA;box-shadow:inset 0 0 0 1px rgba(14,12,34,.08);font:500 .8125rem/1 var(--f-body);color:var(--f-midnight);cursor:pointer;transition-property:background-color,color,scale;transition-duration:150ms;transition-timing-function:ease-out}
.scores button:not(:disabled):active{scale:.96}
.scores button:disabled{cursor:default}
.scores button[aria-pressed="true"]{background:var(--f-midnight);color:#fff;box-shadow:0 6px 12px -6px rgba(14,12,34,.6)}
.app-cta{margin-top:6px;height:46px;border:0;border-radius:999px;background:#DDDBD4;color:#8B8A85;font:600 .875rem/1 var(--f-body);transition-property:background-color,color,scale;transition-duration:200ms;transition-timing-function:ease-out}
.app-cta[data-ready="true"]{background:var(--f-terra);color:#fff;cursor:pointer;box-shadow:0 12px 24px -12px rgba(205,92,64,.8)}
.app-cta[data-ready="true"]:active{scale:.96}
.demo-hint{font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-3);text-align:center}
.demo-hint b{color:var(--on-night-2);font-weight:500}
.reset{-webkit-tap-highlight-color:transparent;border:0;background:transparent;color:var(--on-night-2);font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:10px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--night-line);transition:scale 150ms ease-out}
.reset:active{scale:.96}

/* Gauges */
.gauges{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.gauge{background:#fff;border-radius:24px;padding:clamp(20px,2.4vw,32px);display:grid;gap:18px;box-shadow:0 0 0 1px rgba(14,12,34,.06),0 30px 60px -40px rgba(14,12,34,.35);color:var(--f-midnight);font-family:var(--f-body);min-width:0}
.g-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.g-top h3{font:600 clamp(1.125rem,1.6vw,1.5rem)/1.15 var(--f-body);letter-spacing:-.01em}
.g-top small{display:block;margin-top:4px;color:#8E8E8E;font-size:.8125rem}
.g-score{display:grid;justify-items:center;gap:6px;padding:10px 12px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(14,12,34,.1);min-width:76px}
.g-score b{font:500 1.5rem/1 var(--f-body);font-variant-numeric:tabular-nums}
.g-score b small{display:inline;font-size:.8125rem;color:#8E8E8E;margin:0}
.badge{font:700 .5625rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--f-terra);padding:4px 7px;border-radius:999px}
.badge.mod{background:var(--f-amber)}
.g-bar{position:relative;height:5px;border-radius:3px;background:linear-gradient(90deg,#3DBE8B 0%,#C9A38A 45%,#CD5C40 70%,#7A2E2E 100%)}
.g-bar i{position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px var(--f-midnight),0 4px 8px -2px rgba(14,12,34,.4);translate:-50% -50%;transition:left 1400ms var(--ease-out)}
.g-scale{display:flex;justify-content:space-between;font:500 .625rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#8E8E8E;margin-top:-6px}
.g-note{font-size:.8125rem;color:#5b5a63;line-height:1.45;padding:10px 12px;border-radius:10px;background:#FBF0EC;box-shadow:inset 0 0 0 1px rgba(205,92,64,.25)}

/* Delivered */
.shipped{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.shipped h2{grid-column:1 / span 5;font-size:var(--t-display);font-weight:800;font-stretch:90%;letter-spacing:-.03em;line-height:.94}
.shipped ul{grid-column:7 / span 6;list-style:none;margin:0;padding:0;border-top:1px solid var(--night-line)}
.shipped li{display:grid;grid-template-columns:3em minmax(0,1fr);gap:16px;padding-block:22px;border-bottom:1px solid var(--night-line)}
.shipped li span{font:500 var(--t-label)/1.7 var(--f-mono);color:var(--signal)}
.shipped li b{display:block;font:700 1.25rem/1.2 var(--f-display);font-stretch:95%;letter-spacing:-.01em;margin-bottom:4px}
.shipped li p{color:var(--on-night-2);font-size:var(--t-ui)}

/* Responsive */
@media (max-width:1080px){
  .hero-copy,.collage{grid-column:1 / -1}
  .collage{margin-top:16px}
  .head h2,.head p{grid-column:1 / -1}
  .brief-q{grid-column:1 / -1}
  .brief-cols{grid-template-columns:minmax(0,1fr)}
  .idea{grid-template-columns:minmax(0,1fr)}
  .t-syne{grid-column:1 / -1}.t-dm{grid-column:span 6}
  .demo{grid-template-columns:minmax(0,1fr)}
  .compare{grid-template-columns:minmax(0,1fr)}
  .compare-side{grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:20px;align-items:center}
  .compare-side p{margin-top:0}
  .gauges{grid-template-columns:minmax(0,1fr)}
  .shipped h2,.shipped ul{grid-column:1 / -1}
  .next h2,.next-side{grid-column:1 / -1}
}
@media (max-width:760px){
  :root{--hdr:64px}
  .crumb{display:none}
  .brand svg{height:31px}
  .nav .btn{padding-block:11px;padding-inline:16px 14px}
  .meta{grid-template-columns:minmax(0,1fr)}
  .lockups{grid-template-columns:minmax(0,1fr)}
  .palette{flex-direction:column;height:auto}
  .chip{min-height:calc(var(--use) * 9px + 64px);flex-direction:row;align-items:flex-end}
  .types .tcard{grid-column:1 / -1}
  .apps figure{grid-column:1 / -1!important}
  .a-2,.a-3{aspect-ratio:4 / 5}
  .a-5 figcaption{display:none}
  .ui-grid{grid-template-columns:minmax(0,1fr)}
  .ui-grid figure:nth-child(3){margin-top:0}
  .cx .note,.cx .lead{display:none}
}

/* Palette chips take their colours from custom properties set in the markup */
.chip{background:var(--bg);color:var(--fg)}
.chip-edge{box-shadow:inset 1px 0 0 rgba(6,6,6,.08)}
.sec.lock-sec{padding-top:0;background:var(--f-navy)}