/* Termfit landing page.  Brand: Midnight, Cobalt, Citron, Mist, Tint, Paper.
   Headings in Archivo Expanded 800, body in Inter, both bundled with the app.
   Termfit is a personal tool built and owned by Mike Kapin.  (c) 2026 Mike Kapin.  All rights reserved. */

@font-face{font-family:"Inter";src:url("app/src/fonts/inter.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Archivo Expanded";src:url("app/src/fonts/archivo-expanded.woff2") format("woff2");font-weight:600 800;font-display:swap}

:root{
  --midnight:#0B1433; --cobalt:#2340C8; --citron:#C9D63F; --mist:#C9D2EE;
  --tint:#EEF1FC; --paper:#F6F8FC; --white:#FFFFFF; --line:#DCE1EC;
  --muted:#4A5570; --on-dark:#D5DCF2; --on-dark-muted:#AAB4D6;
  --display:"Archivo Expanded", "Segoe UI", Arial, sans-serif;
  --body:"Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --radius:14px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--midnight);font:400 1.0625rem/1.6 var(--body)}
img,video{max-width:100%}
p{margin:0 0 1em}
a{color:var(--cobalt);text-underline-offset:.18em}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;margin:0;overflow-wrap:break-word;text-wrap:balance}
h1{font-size:clamp(2.3rem, 7.4vw, 5.1rem);line-height:1.02;color:var(--white)}
h2{font-size:clamp(1.55rem, 4.2vw, 2.6rem);line-height:1.08}
h3{font-size:clamp(1.12rem, 2.2vw, 1.4rem);line-height:1.18}

.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(16px, 4vw, 40px)}
.band{padding-block:clamp(56px, 9vw, 112px)}
.small{font-size:.94rem;color:var(--muted)}
.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}

/* Keyboard focus: cobalt on light ground, citron on dark ground. */
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.usb :focus-visible,.foot :focus-visible{outline-color:var(--citron)}
main:focus{outline:none}

.skip{position:absolute;left:16px;top:12px;z-index:10;padding:.6em 1em;background:var(--citron);color:var(--midnight);
  font-weight:700;border-radius:8px;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none;outline:3px solid var(--white);outline-offset:2px}

/* Buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.8em 1.35em;border-radius:10px;
  font:700 1rem/1.2 var(--body);text-decoration:none;transition:background-color .15s, box-shadow .15s, transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--cobalt);color:var(--white)}
.btn-primary:hover{background:#1B33A6}
.btn-citron{background:var(--citron);color:var(--midnight)}
.btn-citron:hover{background:#D6E25A}
.btn-ghost{color:var(--white);box-shadow:inset 0 0 0 1.5px var(--mist)}
.btn-ghost:hover{background:rgba(201,210,238,.14)}

/* Hero: poster still, then the video once it plays, then a Midnight scrim, then the words.
   The scrim never drops below 80% Midnight, so white and Mist text keep AA contrast over any frame. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--midnight);color:var(--on-dark);
  min-height:clamp(560px, 88vh, 880px);display:flex;align-items:center}
.hero-media,.hero-video,.hero-scrim{position:absolute;inset:0;width:100%;height:100%}
.hero-media{z-index:0;background:var(--midnight) url("media/hero-poster.jpg") center/cover no-repeat}
.hero-video{z-index:1;object-fit:cover;opacity:0;transition:opacity .9s ease}
.hero.is-playing .hero-video{opacity:1}
/* Dark where the text sits, light on the right so the video shows through.  Worst case (a pure
   white frame) keeps the lede at 4.7:1 at the end of its longest line (about 67% across). */
.hero-scrim{z-index:2;background:linear-gradient(100deg, rgba(11,20,51,.9) 0%, rgba(11,20,51,.88) 52%, rgba(11,20,51,.62) 74%, rgba(11,20,51,.26) 100%)}
@media (max-width:760px){.hero-scrim{background:rgba(11,20,51,.86)}}
/* Phones get the 960 px poster (tools/make-landing-rungs.mjs).  The video carries no poster
   attribute: a browser fetches that even when the video is hidden, and the video stays see-through
   until it plays, so this layer is the poster everyone sees. */
@media (max-width:760px){.hero-media{background-image:url("media/hero-poster-960.jpg")}}
/* A faint week grid over the scrim: five day columns and hour rows, fading out at the edges. */
.hero-scrim::after{content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(201,210,238,.075) 0 1px, transparent 1px 20%),
    repeating-linear-gradient(180deg, rgba(201,210,238,.05) 0 1px, transparent 1px 64px);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 50%, #000 30%, transparent 85%);
  mask-image:radial-gradient(120% 90% at 70% 50%, #000 30%, transparent 85%)}
.hero-inner{position:relative;z-index:3;padding-block:clamp(72px, 12vh, 128px)}
.hero-logo{display:block;width:auto;height:clamp(36px, 5vw, 48px);margin-bottom:clamp(28px, 5vw, 48px)}
.hero h1{max-width:12ch;margin-bottom:.42em}
.lede{font-size:clamp(1.08rem, 1.9vw, 1.3rem);line-height:1.55;max-width:38em;color:var(--on-dark);margin-bottom:1.8em}
.hero-note{margin:1.4em 0 0;font-size:.92rem;color:var(--on-dark-muted)}
.hero-note a{color:var(--citron)}

/* "fitted." gets the citron block from the logo: the last class dropping into place. */
.fit{position:relative;display:inline-block;white-space:nowrap}
.fit::after{content:"";position:absolute;left:.02em;right:.42em;bottom:-.1em;height:.13em;border-radius:.05em;background:var(--citron)}

.motion-toggle{position:absolute;z-index:4;right:clamp(16px, 3vw, 32px);bottom:clamp(16px, 3vw, 28px);
  padding:.5em 1em;border-radius:999px;border:1px solid rgba(201,210,238,.55);background:rgba(11,20,51,.72);
  color:var(--white);font:600 .85rem/1.2 var(--body);cursor:pointer}
.motion-toggle:hover{background:rgba(11,20,51,.92)}

/* How it works: three class blocks placed down a week grid, one step later each. */
.how{background:var(--white)}
.how h2{margin-bottom:clamp(28px, 4vw, 48px)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  background:repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 48px)}
.step{background:var(--tint);border-left:5px solid var(--cobalt);border-radius:8px;padding:20px 22px 22px}
.step h3{margin-bottom:.5em}
.step p{margin:0;color:var(--muted)}
.step-n{display:block;font:800 1.6rem/1 var(--display);color:var(--cobalt);margin-bottom:.55em}
.step-last{background:var(--midnight);border-left-color:var(--citron);color:var(--white)}
.step-last p{color:var(--on-dark)}
.step-last .step-n{color:var(--citron)}

/* Feature cards */
.cards{display:grid;gap:clamp(18px, 2.4vw, 28px)}
.card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px, 3vw, 32px)}
.card h3{margin-bottom:.55em}
.card p{color:var(--muted)}
.eyebrow{font:700 .78rem/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);margin-bottom:.9em}
.shot{margin-top:auto;border-radius:10px;overflow:hidden;border:1px solid var(--mist);background:var(--tint);
  aspect-ratio:16 / 10;box-shadow:0 18px 40px -26px rgba(11,20,51,.45)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:22% 18%}

/* Privacy */
.privacy{background:var(--tint)}
.privacy-inner{display:grid;gap:clamp(20px, 4vw, 56px);align-items:start}
.privacy h2{max-width:14ch}
.privacy p{font-size:1.12rem;max-width:36em}
.privacy p.small{font-size:.94rem}

/* Free to use */
.free{background:var(--white)}
.free-inner,.usb-inner{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.free-inner > div,.usb-inner > div{flex:1 1 30rem;min-width:0}
.free h2,.usb h2{margin-bottom:.55em}
.free p{max-width:36em;margin-bottom:0}

/* Download for USB */
.usb{background:var(--midnight);color:var(--on-dark)}
.usb h2{color:var(--white)}
.usb .small{color:var(--on-dark-muted);max-width:40em}
.usb p:last-child{margin-bottom:0}

.foot{background:var(--midnight);color:var(--on-dark-muted);font-size:.9rem;border-top:1px solid rgba(201,210,238,.16)}
.foot p{margin:0;padding-block:28px}

/* The not-here page (404.html): one Midnight screen with the logo, a line and two ways back. */
.notfound{min-height:100vh;display:flex;flex-direction:column;background:var(--midnight);color:var(--on-dark)}
.notfound-inner{flex:1;padding-block:clamp(72px, 14vh, 160px)}
.notfound h1{max-width:14ch;margin-bottom:.5em}

@media (min-width:760px){
  .steps{grid-template-columns:repeat(3, 1fr);align-items:start}
  .step:nth-child(2){margin-top:48px}
  .step:nth-child(3){margin-top:96px}
  .cards{grid-template-columns:repeat(2, 1fr)}
  .privacy-inner{grid-template-columns:1fr 1fr}
}

/* Motion only for visitors who have not asked for less of it. */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  .fit::after{animation:fit-drop .7s cubic-bezier(.3, 1.4, .5, 1) .5s both}
}
@keyframes fit-drop{from{transform:translateY(-.9em);opacity:0}to{transform:none;opacity:1}}

/* Screenshots ease in as they scroll into view.  Static where scroll timelines are missing. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .shot img{animation:shot-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  }
}
@keyframes shot-zoom{from{transform:scale(1.1)}to{transform:scale(1)}}

@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .btn:hover{transform:none}
}