/* claudetaste — a Taste Company product. Shares the house tokens with the main site. */

:root{
  --paper:#ffffff;
  --ink:#0a0a0a;
  --panel:#f2f2f0;
  --muted:#75756f;
  --line:#e5e5e1;
  --warm:#ff5a36;   /* the side that chose something */

  --pad:clamp(20px,5vw,64px);
  --gap:clamp(64px,10vh,140px);
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,blockquote,figure{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
code{font:400 .88em/1.4 var(--mono);background:var(--panel);border-radius:5px;padding:.12em .38em}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

.wrap{width:min(1200px,100%);margin-inline:auto}

/* ---------- shared type ---------- */
.h2{
  font-weight:700;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(1.9rem,4.2vw,3.2rem);max-width:20ch;
}
.h2--center{margin-inline:auto;text-align:center;max-width:18ch}
.lede{margin-top:22px;color:#3a3a37;font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:52ch}
.lede--center{margin-inline:auto;text-align:center}
.lede a{text-decoration:underline;text-underline-offset:3px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  height:52px;padding:0 26px;border-radius:999px;
  font-weight:500;font-size:1rem;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.btn svg{width:18px;height:18px;transition:transform .18s ease}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{transform:translateY(-1px);background:#1f1f1f}
.btn--ghost{border-color:var(--line);background:var(--paper)}
.btn--ghost:hover{border-color:#c9c9c3}
.btn--ghost:hover svg{transform:translateX(3px)}
.btn--sm{height:42px;padding:0 18px;font-size:.92rem}

/* ---------- nav ---------- */
.nav{
  position:fixed;z-index:60;top:18px;left:50%;transform:translateX(-50%);
  width:min(1060px,calc(100vw - 2*var(--pad)));
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 10px 10px 22px;border-radius:999px;
  background:rgba(242,242,240,.86);backdrop-filter:blur(14px);
}
.nav__brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em}
.nav__brand img{display:block;border-radius:6px}
.nav__links{display:flex;align-items:center;gap:24px;font-weight:500}
.nav__links > a:not(.btn){color:#2c2c2a}
.nav__links > a:not(.btn):hover{color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding:0 var(--pad);text-align:center}
.hero__inner{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(130px,19vh,220px) 0 clamp(30px,6vh,70px);
}
.hero__title{
  font-weight:700;letter-spacing:-.045em;line-height:.98;
  font-size:clamp(2.3rem,5.6vw,4.4rem);text-wrap:balance;
}
.hero__title .dim{color:#a8a8a2}
.hero__sub{
  margin-top:clamp(20px,3vh,30px);color:var(--muted);
  font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:56ch;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(28px,5vh,44px)}
.hero__fine{margin-top:18px;font-size:.88rem;color:#a5a59f}
/* sits past the fold on desktop — the hero above it already owns a full viewport */
.hero__scroll{
  margin-top:clamp(30px,7vh,90px);
  font-size:.85rem;letter-spacing:.02em;color:#a5a59f;
}

/* ---------- 2. the spike: scroll wipes one page into the other ---------- */
.compare{position:relative;height:340vh}
.compare__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,3vh,34px);padding:88px var(--pad) clamp(20px,4vh,40px);
}
.compare__h{
  font-weight:700;letter-spacing:-.04em;line-height:1;text-align:center;
  font-size:clamp(1.4rem,3vw,2.3rem);
}
.compare__pair{
  position:relative;flex:0 1 auto;
  height:min(62svh,calc(88vw * 1180 / 1440));
  aspect-ratio:1440/1180;max-width:88vw;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--panel);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.45);
}
.side{position:absolute;inset:0;overflow:hidden}
.side iframe{
  position:absolute;top:0;left:0;width:1440px;height:1180px;border:0;
  transform:scale(var(--s,.5));transform-origin:top left;
  pointer-events:none;
}
/* the taste page is held behind a curtain that scroll pulls to the left */
.side--taste{clip-path:inset(0 0 0 calc((1 - var(--p,0)) * 100%))}
.compare__line{
  position:absolute;top:0;bottom:0;left:calc((1 - var(--p,0)) * 100%);
  width:2px;background:var(--warm);
  opacity:calc(1 - max(0, var(--p,0) - .92) * 12);
}
.compare__line::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;
  background:var(--warm);
  box-shadow:0 0 0 6px rgba(255,90,54,.16);
}
.chip{
  position:absolute;bottom:14px;z-index:2;
  padding:9px 16px;border-radius:999px;
  font-size:.82rem;font-weight:500;letter-spacing:.01em;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid var(--line);
}
.chip--base{left:14px;opacity:calc(1 - var(--p,0) * 1.6)}
.chip--taste{right:14px;color:#fff;background:var(--ink);border-color:var(--ink);opacity:var(--p,0)}
.compare__open{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- the two verdicts ---------- */
.verdicts{padding:var(--gap) var(--pad) 0}
.verdicts__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px)}
.verdict p{margin-top:16px;color:var(--muted);max-width:46ch}
.tag{
  display:inline-block;padding:7px 14px;border-radius:999px;
  font-size:.78rem;font-weight:500;background:var(--panel);color:var(--muted);
}
.tag--own{background:var(--ink);color:#fff}

/* ---------- install ---------- */
.install{padding:calc(var(--gap) * 1.75) var(--pad) var(--gap)}
.install__grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center;
}
.replay{
  margin-top:26px;display:inline-flex;align-items:center;gap:8px;
  background:none;border:0;padding:0;cursor:pointer;
  font-weight:500;font-size:.92rem;color:var(--muted);transition:color .2s ease;
}
.replay:hover{color:var(--ink)}
.replay svg{width:14px;height:14px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.replay:hover svg{transform:rotate(-180deg)}
.term{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.4);
}
.term__bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.term__bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.term__bar span{margin-left:8px;font:400 .75rem/1 var(--mono);color:var(--muted)}
.term__body{
  padding:22px 20px 26px;
  font:400 .85rem/1.85 var(--mono);
  min-height:15.5rem;white-space:pre-wrap;word-break:break-word;
}
.term__body .p{color:#a5a59f}
.term__body .ok{color:var(--ink);font-weight:500}
.term__body .mut{color:var(--muted)}
.cursor{
  display:inline-block;width:.5rem;height:1.05em;background:var(--ink);
  vertical-align:-.18em;animation:blink 1.05s steps(1,end) infinite;
}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ---------- how it thinks ---------- */
.how{padding:var(--gap) var(--pad)}
.beats{
  margin-top:clamp(44px,7vh,80px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3.5vw,3rem);
}
.beat{padding-top:18px;border-top:1px solid var(--ink)}
.beat__n{font:500 .75rem/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.beat h3{margin:14px 0 10px;font-size:1.18rem;font-weight:700;letter-spacing:-.02em}
.beat p{color:var(--muted);font-size:.95rem;line-height:1.62}

/* ---------- the argument ---------- */
.argument{padding:var(--gap) var(--pad);background:var(--panel)}
.argument .wrap{max-width:900px;text-align:center}
.argument__quote{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.2;letter-spacing:-.01em;
}
.argument__attrib{margin:26px auto 0;max-width:52ch;color:var(--muted)}
/* the specimen: evidence, not an artwork — framed like everything else, but inert */
.specimen{margin-top:clamp(40px,6vh,72px)}
.specimen img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:18px;background:var(--paper);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.4);
  user-select:none;pointer-events:none;
}
.specimen figcaption{margin-top:16px;font-size:.85rem;color:var(--muted)}

.tells{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:clamp(22px,3.5vh,36px);
}
.tells li{
  padding:11px 20px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);color:#8a8a83;
  font-size:.92rem;font-weight:500;
}

/* ---------- faq ---------- */
.faq-sec{padding:var(--gap) var(--pad)}
.faq{max-width:780px;margin:clamp(40px,6vh,70px) auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-weight:600;font-size:1.02rem;letter-spacing:-.02em;transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--muted)}
.faq summary .chev{flex:none;width:13px;height:13px;margin-top:6px;transition:transform .3s ease}
.faq details[open] summary .chev{transform:rotate(45deg)}
.faq .answer{padding:0 0 26px;max-width:62ch;color:var(--muted);font-size:.95rem;line-height:1.68}
.faq .answer p+p{margin-top:14px}
.faq .answer a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cmd{
  display:block;margin-top:14px;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
  font:400 .84rem/1.7 var(--mono);color:var(--ink);
  white-space:pre-wrap;word-break:break-word;
}
.ask{
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:34px;font-size:.92rem;color:var(--muted);
}
.ask a{display:inline-flex;align-items:center;gap:7px;transition:color .2s ease}
.ask a:hover{color:var(--ink)}

/* ---------- buy ---------- */
.buy{padding:var(--gap) var(--pad) clamp(70px,10vh,130px);text-align:center}
.buy__title{
  font-weight:700;letter-spacing:-.045em;line-height:.98;
  font-size:clamp(2.2rem,5.4vw,3.8rem);
}
.card{
  max-width:500px;margin:clamp(40px,6vh,70px) auto 0;text-align:left;
  border:1px solid var(--line);border-radius:22px;padding:34px;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.4);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.card:hover{transform:translateY(-4px)}
.price{display:flex;align-items:baseline;gap:10px}
.price b{font-size:3.2rem;font-weight:700;letter-spacing:-.045em;line-height:1}
.price span{font-size:.92rem;color:var(--muted)}
.card ul{margin:28px 0}
.card li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;font-size:.95rem;color:var(--muted)}
.card li svg{width:16px;height:16px;margin-top:4px;flex:none;stroke-width:2.2;color:var(--ink)}
.card .btn{width:100%;justify-content:center}
.card__fine{margin-top:16px;font-size:.82rem;color:#a5a59f;text-align:center}
#lessthan{display:inline-block}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fade-in-up{animation:fadeInUp .5s ease forwards}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:80;transform:translateX(-50%) translateY(160%);
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;font-weight:500;font-size:.92rem;
  padding:14px 20px;border-radius:999px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.45);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.toast.in{transform:translateX(-50%) translateY(0)}
.toast svg{width:16px;height:16px;stroke-width:2.2;color:#22c55e}

/* ---------- viewing room ---------- */
dialog{
  width:100vw;max-width:100vw;height:100svh;max-height:100svh;
  border:0;padding:0;background:var(--paper);
}
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.viewer{display:flex;flex-direction:column;height:100%}
.viewer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,3vw,26px);border-bottom:1px solid var(--line);flex:none;
}
.viewer__bar strong{font-weight:700;letter-spacing:-.02em;font-size:.98rem}
.viewer__bar span{margin-left:12px;font-size:.8rem;color:var(--muted)}
.viewer iframe{flex:1;width:100%;border:0}
.close-x{
  width:36px;height:36px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);cursor:pointer;display:grid;place-items:center;flex:none;
  transition:background .2s ease,transform .2s ease;
}
.close-x:hover{background:var(--panel);transform:translateY(-1px)}

/* ---------- footer ---------- */
.foot{
  padding:26px var(--pad);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  color:var(--muted);font-size:.95rem;
}
.foot a:hover{color:var(--ink)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .install__grid{grid-template-columns:1fr;gap:2.5rem}
  .beats{grid-template-columns:1fr;gap:2rem}
  .verdicts__grid{grid-template-columns:1fr;gap:2rem}
  .nav__links > a:not(.btn){display:none}
  .compare{height:300vh}
  .compare__pair{height:min(52svh,calc(90vw * 1180 / 1440));max-width:90vw}
}
@media (max-width:520px){
  .term__body{font-size:.76rem;padding:18px 16px 20px}
  .card{padding:24px}
  .chip{font-size:.74rem;padding:7px 12px}
}

/* ---------- reduced motion: the wipe becomes a static pair ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .compare{height:auto}
  .compare__stage{position:static;height:auto;padding:var(--gap) var(--pad)}
  .compare__pair{
    height:auto;aspect-ratio:auto;max-width:none;width:100%;
    display:grid;grid-template-columns:1fr 1fr;gap:16px;border:0;background:none;box-shadow:none;
  }
  .side{position:relative;inset:auto;aspect-ratio:1440/1180;border:1px solid var(--line);border-radius:16px}
  .side--taste{clip-path:none}
  .compare__line{display:none}
  .chip{opacity:1;position:static;justify-self:center}
}