/* Oh Shift Challenge — brand direction v1 (Ink, Bone, Chartreuse, Clay) */
:root{
  --ink:#1A1611;
  --bone:#ECE6DA;
  --chartreuse:#D2F000;
  --clay:#B4462B;

  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Archivo",system-ui,sans-serif;

  --measure:34rem;
  --wide:72rem;
  --split-gap:clamp(3rem,6vw,6rem);
  --gutter:clamp(1.25rem,5vw,2rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  line-height:1.6;
  color:var(--ink);
  background:var(--bone);
}
img{max-width:100%;display:block}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- type roles ---------- */
/* The logo words. Only ever "Oh Shift", always italic serif, never caps. */
/* .script: the same italic serif, for the emphasis words the client picked */
.os,.script{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:0;text-transform:none;
}
p .os,li .os,p .script,li .script{font-size:1.15em;line-height:1}

/* Archivo 800 uppercase: The, Challenge, UI, labels, buttons. Tracked wide when small. */
.label{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;font-size:.75rem;line-height:1.4;
}

/* every section title, including the toothbrush statement, shares one size */
h2,.said{
  font-weight:800;text-transform:uppercase;
  font-size:clamp(1.75rem,1.1rem + 1.6vw,2.25rem);
  line-height:1.08;letter-spacing:-.01em;
  margin-bottom:1.5rem;text-wrap:balance;
}
h2 .os,h2 .script{font-size:1.3em;line-height:.8}
/* a sentence inside a title that starts on its own line, with a little air above */
.title-line{display:block;margin-top:.6em}
.said .script{font-size:1.3em;line-height:1}
h3{font-weight:700;font-size:1.125rem;line-height:1.3}
p+p{margin-top:1.1em}
.lede{font-size:1.15em;line-height:1.5;font-weight:500}

/* ---------- surfaces: Ink and Bone carry everything, one accent each ---------- */
.band{padding:clamp(3.5rem,10vw,7rem) var(--gutter)}
.s-bone{background:var(--bone);color:var(--ink);--accent:var(--clay)}
.s-ink{background:var(--ink);color:var(--bone);--accent:var(--chartreuse)}
.s-chartreuse{background:var(--chartreuse);color:var(--ink);--accent:var(--ink)}
.s-clay{background:var(--clay);color:var(--bone);--accent:var(--bone)}

.wrap{max-width:var(--measure);margin-inline:auto}
.rule{width:3rem;height:3px;background:var(--accent);border:0;margin-bottom:1.75rem}

/* ---------- hero ---------- */
.hero{
  background:var(--ink);color:var(--bone);
  padding:clamp(2.5rem,7vw,4rem) var(--gutter) clamp(3rem,8vw,5rem);
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
}
.hero__inner{max-width:var(--measure);margin-inline:auto;width:100%}
.kicker{opacity:.7;margin-bottom:clamp(2rem,6vw,3rem)}

.lockup{
  display:flex;flex-direction:column;align-items:flex-start;
  font-size:clamp(4.5rem,22vw,8rem);
  font-weight:400;margin:0;
}
.lockup__the{
  font-weight:800;text-transform:uppercase;
  font-size:.2em;letter-spacing:.3em;line-height:1;
  color:var(--chartreuse);margin-left:.05em;
}
.lockup__name{font-size:1em;line-height:1;margin:.08em 0 .1em;color:var(--bone);white-space:nowrap}
.lockup__challenge{
  font-weight:800;text-transform:uppercase;
  font-size:.3em;letter-spacing:.14em;line-height:1;margin-left:.05em;
}

.promise{
  font-size:clamp(1.2rem,1rem + 1.1vw,1.6rem);
  line-height:1.3;max-width:20ch;font-weight:500;
  margin:clamp(2rem,6vw,3rem) 0 clamp(1.75rem,5vw,2.25rem);
  text-wrap:balance;
}

/* ---------- form ---------- */
.signup{max-width:26rem}
.field{display:flex;flex-direction:column;gap:.6rem}
.field input{
  font:inherit;
  padding:1rem 1.1rem;
  border:1.5px solid rgba(236,230,218,.35);
  background:transparent;
  color:var(--bone);
  border-radius:0;
  width:100%;
}
.field input::placeholder{color:rgba(236,230,218,.55)}
.field input:focus-visible{outline:2px solid var(--chartreuse);outline-offset:2px;border-color:transparent}

/* honeypot: hidden from people, filled in by bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-msg{font-size:.925rem;line-height:1.45;padding-left:.75rem;border-left:3px solid var(--chartreuse)}

.btn{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:.875rem;
  padding:1.15rem 1.4rem;
  background:var(--chartreuse);color:var(--ink);
  border:0;border-radius:0;cursor:pointer;width:100%;
  transition:background .15s ease;
}
.btn:hover{background:var(--bone)}
.btn:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.btn:disabled{opacity:.7;cursor:progress}

.finewrap{margin-top:.9rem;font-size:.875rem;opacity:.7;line-height:1.5}

/* ---------- lists ---------- */
.qs{list-style:none;margin:1.5rem 0}
.qs li{padding:.6rem 0 .6rem 1.6rem;position:relative;line-height:1.5}
.qs li::before{
  content:"";position:absolute;left:0;top:1.3rem;
  width:.8rem;height:3px;background:var(--accent);
}

.kit{list-style:none;counter-reset:k;margin-top:2rem}
.kit li{
  counter-increment:k;
  display:grid;grid-template-columns:2.75rem 1fr;gap:.3rem 1rem;
  padding:1.25rem 0;
  border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);
}
.kit li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.kit li::before{
  content:counter(k,decimal-leading-zero);
  font-weight:800;font-size:.875rem;letter-spacing:.08em;
  color:var(--accent);grid-row:1/3;padding-top:.15rem;
}
.kit p{font-size:.95rem;opacity:.75;line-height:1.5}
.tool-intro{margin-bottom:.4rem}

/* ---------- testimonials ---------- */
.testimonials{list-style:none}
.testimonials li{padding:1.75rem 0;border-top:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.testimonials li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.testimonials blockquote{font-size:1.1rem;line-height:1.55}
.testimonials figcaption{margin-top:1rem}

.stamp{
  display:none;
  width:9rem;aspect-ratio:1;border-radius:50%;
  border:2px solid currentColor;
  place-content:center;justify-items:center;gap:.2rem;
  margin-top:3rem;
}
.stamp .os{font-size:1.75rem;line-height:1}
.stamp .label{font-size:.55rem;letter-spacing:.22em}

/* ---------- bio ---------- */
.portrait{
  width:min(100%,15rem);height:auto;aspect-ratio:1;border-radius:50%;
  object-fit:cover;margin-bottom:1.75rem;
}

/* ---------- how it runs ---------- */
.timeline{list-style:none;margin-top:2rem;padding-left:5px}
.timeline li{
  position:relative;display:flex;flex-direction:column;gap:.35rem;
  padding:0 0 1.75rem 1.75rem;
}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-5px;top:.2rem;
  width:11px;height:11px;border-radius:50%;background:var(--accent);
}
.timeline li:not(:last-child)::after{
  content:"";position:absolute;left:0;top:1rem;bottom:-.2rem;
  width:1px;background:color-mix(in srgb,currentColor 25%,transparent);
}
.timeline .label{color:var(--accent)}
.timeline__date{font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1.05;letter-spacing:-.005em}

/* the offer is its own chartreuse field, so the form inside flips to ink */
.offer{
  margin-top:clamp(2.5rem,6vw,4.5rem);
  padding:clamp(1.5rem,4vw,3rem);
  background:var(--chartreuse);color:var(--ink);
  display:grid;gap:2rem;
}
.offer .field input{border-color:rgba(26,22,17,.4);color:var(--ink)}
.offer .field input::placeholder{color:rgba(26,22,17,.6)}
.offer .field input:focus-visible{outline-color:var(--ink)}
.offer .btn{background:var(--ink);color:var(--bone)}
.offer .btn:hover{background:color-mix(in srgb,var(--ink) 82%,var(--bone))}
.offer .btn:focus-visible{outline-color:var(--ink)}
.offer .form-msg{border-left-color:var(--ink)}
.offer__price{
  font-weight:800;font-size:clamp(3.5rem,9vw,5.5rem);
  line-height:.9;letter-spacing:-.03em;margin-top:.6rem;
}
.offer__note{margin-top:1.1rem;font-size:.8rem;letter-spacing:.12em;line-height:1.6;opacity:.8}

/* ---------- footer ---------- */
.foot{
  background:var(--bone);color:var(--ink);
  padding:3rem var(--gutter);text-align:center;
}
.foot__mark{display:inline-flex;flex-direction:column;align-items:center;gap:.25rem;margin-bottom:1.25rem}
.foot__mark .os{font-size:2.25rem;line-height:1}
.foot__mark .label{font-size:.625rem;letter-spacing:.26em}
.foot p{font-size:.8rem;opacity:.7}
.foot a{color:inherit}

/* ---------- thank-you page ---------- */
.hero--short{min-height:auto;padding-block:clamp(4rem,12vw,7rem) clamp(3rem,8vw,4.5rem)}
.big{
  font-weight:800;text-transform:uppercase;
  font-size:clamp(3.25rem,14vw,6.5rem);line-height:.92;letter-spacing:-.02em;
  text-wrap:balance;
}
.hero--short .promise{margin-bottom:0;max-width:none}
.signoff{margin-top:2.25rem}
.back{
  display:inline-block;margin-top:2.5rem;
  color:inherit;text-decoration:none;
  border-bottom:3px solid var(--accent);padding-bottom:.2rem;
}

/* ---------- one load sequence, hero only ---------- */
@media(prefers-reduced-motion:no-preference){
  .fade{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
  .fade:nth-child(1){animation-delay:.05s}
  .fade:nth-child(2){animation-delay:.18s}
  .fade:nth-child(3){animation-delay:.34s}
  .fade:nth-child(4){animation-delay:.46s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---------- laptop and up: heading on the left, copy on the right ---------- */
@media(min-width:64rem){
  .hero__inner{
    max-width:var(--wide);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,var(--measure));
    column-gap:var(--split-gap);
  }
  .kicker{grid-column:1/-1}
  .lockup{grid-column:1;grid-row:2;font-size:clamp(6.5rem,11.5vw,11rem);align-self:center}
  /* tagline + form sit centered against the lockup */
  .hero__action{grid-column:2;grid-row:2;align-self:center}
  .promise{margin-top:0;font-size:1.85rem;max-width:18ch;margin-bottom:1.75rem}

  .hero--short .hero__inner{display:block}
  .hero--short .promise{margin-top:2.5rem}

  .split{
    max-width:var(--wide);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,var(--measure));
    column-gap:var(--split-gap);
    align-items:start;
  }
  .split__head{position:sticky;top:clamp(2rem,6vh,4rem)}
  .split__head > :last-child{margin-bottom:0}
  .split__body > :first-child{margin-top:0}
  /* line the copy up with the heading, not the accent rule above it */
  .split__head:has(> .rule:first-child) + .split__body{padding-top:calc(1.75rem + 3px)}

  .portrait{width:min(100%,22rem)}
  .stamp{display:grid}
  .testimonials blockquote{font-size:1.2rem}

  .runs{max-width:var(--wide)}
  .timeline{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.5rem;
    margin-top:3.5rem;padding-left:0;
    border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);
  }
  .timeline li{padding:1.75rem 0 0}
  .timeline li::before{left:0;top:-6px}
  .timeline li:not(:last-child)::after{display:none}
  .timeline__date{font-size:clamp(1.4rem,1.9vw,1.85rem);white-space:nowrap}
  .offer{grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:center;column-gap:var(--split-gap)}
}