/* Shared foundation for all three options. Mobile first, breakpoints 640 / 768 / 1024 / 1280. */
:root{
  --sans:"Jost","Century Gothic",Futura,sans-serif;
  --ink:#0b0a09;--ink-2:#161412;--white:#fff;
  --gold:#c9a45a;--gold-hi:#e3c27c;
  --ease:cubic-bezier(.7,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-weight:400;line-height:1.55;font-size:1.0625rem;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:clamp(16px,5vw,48px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Header behaviour, styled per option */
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.logo{display:block;flex:none;width:118px}
.menu-btn{min-height:44px;min-width:44px;padding:0 4px;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;position:relative;z-index:62}
.nav{display:none}
.nav.open{display:flex;flex-direction:column;position:fixed;inset:0;z-index:60;padding:88px clamp(16px,5vw,48px) 32px;overflow-y:auto;gap:2px}
.nav a{display:flex;align-items:center;min-height:44px}
.nav .nav-g{display:contents}
.nav .sub{display:flex;flex-direction:column;padding-left:16px;margin-bottom:8px;font-size:.95rem}
body.menu-open{overflow:hidden}
@media (min-width:1024px){
  .menu-btn{display:none}
  .nav,.nav.open{display:flex;position:static;flex-direction:row;align-items:center;padding:0;gap:clamp(18px,2.4vw,36px);overflow:visible}
  .nav .has-sub{position:relative}
  .nav .sub{position:absolute;top:100%;left:-18px;margin:0;padding:10px 18px;min-width:220px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
  .nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
}

/* Logo tracker */
.track{display:flex;align-items:center;overflow:hidden;width:100%}
.track-lab{flex:none;padding-inline:clamp(16px,3vw,32px) 18px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.track-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.track-run{display:flex;align-items:center;width:max-content;animation:run 54s linear infinite}
.track:hover .track-run{animation-play-state:paused}
.track-set{display:flex;align-items:center;flex:none;gap:clamp(36px,5vw,72px);padding-right:clamp(36px,5vw,72px)}
.track-set img{flex:none;width:auto;max-width:none}
.t-delta{height:26px}.t-col{height:34px}
.t-lbm{height:22px}
.t-ocg{font-family:"Inter Tight",var(--sans);font-weight:500;font-size:1rem;letter-spacing:-.01em;white-space:nowrap}
.t-ask{white-space:nowrap;font-size:.92rem;letter-spacing:.02em;border-bottom:1px solid currentColor}
@keyframes run{to{transform:translateX(-50%)}}
@media (max-width:639.98px){.track-lab{display:none}}

/* The sentence */
.say-line{font-weight:300;line-height:1.28}
.say select{appearance:none;-webkit-appearance:none;background-color:transparent;border:0;border-bottom:.055em solid currentColor;border-radius:0;padding:0 .72em .02em .04em;margin:0 .04em;max-width:100%;cursor:pointer;background-repeat:no-repeat;background-position:right .08em center;background-size:.42em .42em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23c9a45a' stroke-width='1.4'/%3E%3C/svg%3E")}
.say select option{color:#111;background:#fff;font-size:1rem;font-style:normal}
.say-go{display:inline-flex;align-items:center;gap:.7em;min-height:52px;padding:0 26px;margin-top:clamp(20px,3vw,36px);font-weight:500;letter-spacing:.02em}
.say-go::after{content:"";width:22px;height:1px;background:currentColor;transition:width .25s}
.say-go:hover::after{width:36px}

/* Way back to the feedback page */
.backpill{position:fixed;right:12px;bottom:12px;z-index:50;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;font-size:.78rem;letter-spacing:.02em;background:#fff;color:#111;border:1px solid #111;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.backpill:hover{background:#111;color:#fff}

/* Reveal */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .track-run{animation:none}
  *{scroll-behavior:auto!important}
}