/* Try it: a real form field, and the extension's real decision beside it. */
.try { background: var(--paper); color: var(--ink); padding-block: var(--section); row-gap: 3rem; }
.try__ask { display: grid; gap: 2rem; align-content: start; }
.try__field { display: grid; gap: 0.5rem; }
.try__label { font: 500 var(--step-small)/1.3 var(--font-display); color: var(--ink); }
.try__input { width: 100%; min-height: 72px; padding: 0 1.25rem; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--white); color: var(--ink); caret-color: var(--ocean); font: 600 var(--step-lead)/1.32 var(--font-display); }
.try__input:focus { outline: 3px solid var(--ocean); outline-offset: 3px; }
.try__samples { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.try__samples button { min-height: 44px; padding: 0 1rem; border: 0; border-radius: var(--radius); background: var(--pale); color: var(--deep); font-size: var(--step-small); cursor: pointer; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.try__samples button:hover { background: var(--ocean); color: var(--white); }
.try__samples button:active { transform: scale(0.97); }
.answer { background: var(--ocean) var(--lit); color: var(--white); border-radius: var(--radius-large); padding: clamp(1.5rem, 3vw, 3rem); display: grid; align-content: space-between; gap: 2rem; min-height: clamp(320px, 34vw, 480px); }
.answer__verdict { font: 600 var(--step-lead)/1.32 var(--font-display); color: var(--pale); }
.answer__value { font: 600 var(--step-head)/1.16 var(--font-display); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.answer__why { max-width: 46ch; }
.try__note { color: var(--soft); font-size: var(--step-small); max-width: 52ch; }

/* Careful with what matters: the claim holds still while its proofs pass beside it. */
.why { background: var(--white); color: var(--ink); padding-block: var(--section); row-gap: 3rem; }
.why__head { position: sticky; top: 6rem; align-self: start; }
.why__rows { display: grid; gap: clamp(4rem, 8vw, 7rem); }
.why__row { display: grid; gap: 1.5rem; }
.why__row h3 { margin-bottom: 0.75rem; }
.why__row p { max-width: 48ch; }
.frag { background: var(--paper); color: var(--ink); border-radius: var(--radius-large); padding: clamp(1.25rem, 2.4vw, 2rem); display: grid; align-content: center; gap: 0.75rem; min-height: 200px; overflow: clip; }
.frag__label { font: 500 var(--step-small)/1.3 var(--font-display); }
.frag__big { font: 600 var(--step-head)/1.16 var(--font-display); letter-spacing: -0.015em; color: var(--ocean); }
.frag__field { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 0 1rem; border-radius: var(--radius); background: var(--white); }
.frag__tag { font: 500 var(--step-small)/1 var(--font-display); color: var(--ocean); white-space: nowrap; }
.frag__caret { width: 2px; height: 1.25em; background: var(--ocean); }
.frag__submit { position: relative; justify-self: start; display: inline-flex; align-items: center; min-height: 56px; padding: 0 1.75rem; border-radius: var(--radius); background: var(--ocean); color: var(--white); font: 600 var(--step-body)/1 var(--font-display); }
.frag__pointer { position: absolute; left: 100%; top: 50%; margin-left: 0.75rem; width: 24px; height: 24px; fill: var(--ink); }
.frag__note { color: var(--soft); font-size: var(--step-small); }
.frag__undo { display: inline-flex; align-items: center; justify-self: start; min-height: 36px; padding: 0 0.875rem; border-radius: 8px; background: var(--pale); color: var(--ocean); font: 500 var(--step-small)/1 var(--font-display); }
@media (prefers-reduced-motion: no-preference) {
  .js .is-in .frag__caret { animation: caret 1s steps(2) infinite; }
  .js .frag__tag { opacity: 0; translate: 8px 0; transition: opacity 400ms ease 700ms, translate 700ms var(--ease-expo) 700ms; }
  .js .is-in .frag__tag { opacity: 1; translate: 0 0; }
  /* The pointer comes for the button, then stops short of it. That refusal is the whole claim. */
  .js .frag__pointer { translate: 120px 60px; transition: translate 1400ms var(--ease-expo) 500ms; }
  .js .is-in .frag__pointer { translate: 0 0; }
  .js .is-in .frag__typed { animation: undo-text 6s var(--ease-out) infinite; }
  .js .is-in .frag__field--undo { animation: undo-field 6s linear infinite; }
  .js .is-in .frag__undo { animation: undo-press 6s var(--ease-out) infinite; }
}
@keyframes caret { 50% { opacity: 0; } }
@keyframes undo-text { 0%, 55% { opacity: 1; } 62%, 88% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes undo-field { 0%, 55% { background: var(--pale); outline: 2px solid var(--ocean); outline-offset: -2px; } 62%, 88% { background: var(--white); outline-color: transparent; } 95%, 100% { background: var(--pale); outline: 2px solid var(--ocean); outline-offset: -2px; } }
@keyframes undo-press { 0%, 50% { transform: none; } 54% { transform: scale(0.94); } 60%, 100% { transform: none; } }
@media (max-width: 860px) { .why__head { position: static; } }

/* Sites: the sentence lights up as it is read past. */
.sites { background: var(--paper); padding-block: var(--section) calc(var(--section) / 2); row-gap: 2.5rem; }
.sites__list { display: flex; flex-wrap: wrap; gap: 0.1em 0.5em; color: var(--soft); }
.sites__list li { transition: color 500ms ease; }
.sites__list .is-lit { color: var(--ocean); }

/* Questions: every answer is open, the questions work as an index. */
.faq { background: var(--paper); padding-block: calc(var(--section) / 2); row-gap: clamp(2.5rem, 4vw, 4rem); }
.faq__row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; row-gap: 1rem; }
.faq__row p { max-width: 52ch; }

/* Only the footer wordmark uses this weight, so it is declared here and not preloaded. */
@font-face { font-family: 'Overused Grotesk'; src: url(../assets/fonts/overused-grotesk-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }
.foot { --foot-soft: color-mix(in srgb, var(--pale) 78%, var(--abyss)); position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; background: var(--abyss); color: var(--pale); padding: clamp(32px, 4vw, 56px) var(--margin) clamp(24px, 2.5vw, 32px); text-align: center; }
.foot a { text-decoration: none; transition: color var(--t-hover) ease, background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .foot a:hover { color: var(--white); }
  .foot__social a:hover { background: var(--deep); }
}
/* No box here at the owner's request; keyboard users follow the same change that hover shows. */
.foot a:focus-visible { outline: none; color: var(--white); }
.foot__social a:focus-visible { background: var(--deep); }
/* The footer closes the page, so the bar steps aside; scrolling up is the visitor asking for it back. */
.bar { transition: color 300ms ease, background-color 300ms ease, translate 300ms var(--ease-out), visibility 300ms; }
/* Hidden, not just moved: an off-screen bar would otherwise still take keyboard focus. */
.bar.is-tucked { translate: 0 -100%; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
/* Full bleed so centring holds if the word is wider than the content. The block padding keeps the
   gradient painted over the whole letters: background-clip stops at the box, and 0.82 line height is shorter than they are.
   The text's hit area runs well past that short line and over the links below, so the word must not take clicks. */
.foot__name { position: relative; pointer-events: none; justify-self: stretch; margin-inline: calc(var(--margin) * -1); padding-block: 0.1em; margin-block: -0.1em; white-space: nowrap; user-select: none; font: 800 clamp(96px, 29.5vw, 480px)/0.82 var(--font-display); letter-spacing: -0.02em; color: transparent; background: linear-gradient(90deg, var(--ocean), var(--pale), var(--ocean)) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; } /* taste-skill-ignore: gradient requested by the owner. */
@media (prefers-reduced-motion: no-preference) {
  .foot__name { animation: foot-tide 12s ease-in-out infinite alternate; }
}
@keyframes foot-tide { to { background-position: 100% 0; } }
.foot__digits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.foot__pitch { text-wrap: balance; font: 400 clamp(20px, 2.4vw, 32px)/1.32 var(--font-display); }
.foot__links { display: flex; justify-content: center; gap: 0 clamp(1rem, 3vw, 2.5rem); font-size: 15px; color: var(--foot-soft); }
.foot__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
@media (max-width: 479px) {
  .foot__links { display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; }
}
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 1rem; font-size: 15px; color: var(--foot-soft); }
.foot__social { display: flex; color: var(--pale); }
.foot__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.foot__credit { white-space: nowrap; font: 700 clamp(14px, 1.4vw, 18px)/1.3 var(--font-display); }
.foot__credit a { display: inline-block; padding-block: calc((44px - 1.3em) / 2); text-decoration: none; }