/* Quit It · quitit.pro
   Palette lifted straight from the app (QuitIt/Design/Theme.swift) so the site and the
   product are recognisably the same thing: near-black ground, off-white ink, and exactly
   one colour, the green that is the only coloured pixel in the whole app. */
:root{
  --night:#0a0a0d;      /* Palette.night  */
  --sheet:#0d0d0f;      /* Palette.sheet (dark) */
  --card:#1c1c1f;       /* Palette.card (dark)  */
  --raised:#242428;     /* Palette.raised (dark)*/
  --ink:#f2f2f0;        /* Palette.ink (dark)   */
  --grey:#9e9ea6;       /* Palette.grey (dark)  */
  --faint:#73737a;
  --line:rgba(255,255,255,.10);
  --go:#54c96b;         /* Palette.go, the ONE accent. Do not add a second. */
  --alert:#e63836;
  --nav:65px;          /* .nav .row height + its 1px border */
  --maxw:68rem;
  --read:42rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden}
body{
  margin:0;background:var(--night);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.read{max-width:var(--read)}

/* Type. The app's display face is heavy and tight; the page matches it. */
h1,h2,h3{letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.4rem,7vw,4.4rem);font-weight:800;line-height:1.02}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:800;line-height:1.1}
h3{font-size:1.05rem;font-weight:700}
.eyebrow{
  display:block;font-size:12px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-bottom:.9rem;
}
.lead{color:var(--grey);font-size:clamp(1.02rem,2.2vw,1.2rem);max-width:34rem}
.muted{color:var(--grey)}

/* Buttons: capsules, like every CTA in the app. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:800;font-size:16px;border-radius:999px;padding:1.05rem 2rem;
  border:1px solid transparent;transition:filter .15s ease,transform .15s ease;
}
.btn.p{background:var(--go);color:#06210c}
.btn.p:hover{filter:brightness(1.07)}
.btn.p:active{transform:translateY(1px)}
.btn.s{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.s:hover{border-color:rgba(255,255,255,.28)}

/* Nav */
header.nav{
  position:sticky;top:0;z-index:30;background:rgba(10,10,13,.82);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);
}
.nav .row{display:flex;align-items:center;gap:1.4rem;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.04em;text-decoration:none}
.brand .mark{width:34px;height:34px;border-radius:9px;display:block}
.nav nav{margin-left:auto;display:flex;gap:1.5rem;align-items:center;font-size:14px;font-weight:600;color:var(--grey)}
.nav nav a{text-decoration:none}
.nav nav a:hover{color:var(--ink)}
@media(max-width:640px){.nav nav a.hideS{display:none}}

/* NAV. ROX AI's shape: brand left, links right, a filled pill CTA on the end.
   The old bar had two links and nothing else and read as unfinished. */
.nav nav .cta{
  background:var(--go);color:#06210c;padding:.55rem 1.05rem;border-radius:999px;
  font-weight:800;font-size:13.5px;
}
.nav nav .cta:hover{filter:brightness(1.07);color:#06210c}

/* HERO. Two columns: the words on the left, the phone on the right.
   Centring both put the phone under a full-width block of text and left the page reading
   as one narrow column down the middle of a very wide screen. Splitting it fills the width
   and gives the screenshot somewhere to be that is not "behind the words". */
.hero{
  position:relative;overflow:hidden;
  /* MINUS THE NAV. The hero starts below a 65px sticky bar, so a plain 100svh box centres
     its contents 65px lower than the middle of what you can actually see, and the phone
     ends up almost touching the bottom edge while there is a wide gap under the nav.
     Subtracting the bar makes the box exactly the visible area. */
  min-height:calc(min(100svh,1200px) - var(--nav));
  display:flex;align-items:center;
  /* Symmetric, so `align-items:center` produces equal gaps above and below by
     construction rather than by tuning two different numbers. */
  padding:clamp(2rem,4vh,4rem) 0;
  border-bottom:1px solid var(--line);
}
.hero .wrap{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero .copy{text-align:left}
.hero h1{margin-bottom:1.3rem;text-transform:uppercase}
.hero .lead{margin:0 0 2.2rem;max-width:30rem}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}

/* A soft green cast behind the phone, the app's one colour, so the right half is not flat. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(38% 46% at 72% 52%,rgba(84,201,107,.13),transparent 70%);
}

/* THE PHONE
   Drawn in CSS rather than shipped as a frame PNG: it stays sharp at any size, weighs
   nothing, and the bezel colour can match the page instead of fighting it. The screenshot
   inside is the real app, status bar and tab bar included. That is what makes it read as
   a phone rather than as a floating rectangle. */
.device{
  position:relative;margin:0 auto;
  /* Also capped against viewport HEIGHT. Sized on width alone the phone grew taller than
     the hero on a short window, overflowed, got clipped, and the gaps stopped being equal.
     38svh keeps it inside the box at every height this page is read at. */
  width:min(26rem,74%,38svh);
  padding:.62rem;border-radius:3.1rem;
  background:linear-gradient(160deg,#3a3a40,#161619 34%,#101013 64%,#34343a);
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
}
.device img{width:100%;height:auto;border-radius:2.55rem;display:block}
/* No drawn side buttons: at this size they read as two grey slivers floating beside the
   bezel rather than as hardware. The bezel gradient alone is enough. */

@media(max-width:900px){
  .hero{min-height:0;padding-top:3.5rem}
  .hero .wrap{grid-template-columns:1fr;gap:2.6rem;text-align:center}
  .hero .copy{text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .cta-row{justify-content:center}
  .device{width:min(17rem,72vw)}
  .hero::before{background:radial-gradient(60% 30% at 50% 80%,rgba(84,201,107,.13),transparent 70%)}
}

/* Sections */
section{padding:6rem 0;border-bottom:1px solid var(--line);text-align:center}
section .lead{margin-left:auto;margin-right:auto}
.read{margin-left:auto;margin-right:auto}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-top:2.5rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.6rem}
.card{text-align:left}
.card h3{margin-bottom:.5rem}
.card p{margin:0;color:var(--grey);font-size:15px}
.card .ic{
  width:34px;height:34px;border-radius:10px;background:var(--raised);
  display:grid;place-items:center;margin-bottom:1rem;font-size:16px;
}

/* Quotes */
.quotes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));margin-top:2.5rem}
.q{background:var(--card);border-radius:16px;padding:1.5rem;text-align:left}
.q .who{font-weight:800;font-size:14px}
.q .role{color:var(--faint);font-size:12.5px;margin-bottom:.7rem}
.q p{margin:0;color:#dcdcda;font-size:15px}

/* Pricing */
.plans{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:2.5rem;max-width:40rem}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.6rem;position:relative}
.plan.best{border-color:var(--go)}
.plan .tag{
  position:absolute;top:-.7rem;left:1.2rem;background:var(--go);color:#06210c;
  font-size:11px;font-weight:900;letter-spacing:.04em;padding:.25rem .6rem;border-radius:999px;
}
.plan .name{font-weight:800;margin-bottom:.3rem}
.plan .price{font-size:1.7rem;font-weight:800}
.plan .per{color:var(--grey);font-size:14px}
.legal{color:var(--faint);font-size:12.5px;margin:1.8rem auto 0;max-width:var(--read)}
.legal a{color:var(--grey);text-decoration:underline;text-underline-offset:2px}

/* Docs (privacy / terms / support) */
.doc{padding:3.5rem 0 5rem}
.doc h1{font-size:clamp(2rem,5vw,2.9rem);margin-bottom:.5rem}
.doc .stamp{color:var(--faint);font-size:13.5px;margin-bottom:2.5rem}
.doc h2{font-size:1.25rem;margin:2.6rem 0 .7rem}
.doc p,.doc li{color:#cfcfcd;font-size:16px}
.doc ul{padding-left:1.1rem}
.doc li{margin:.35rem 0}
.doc a{color:var(--go);text-decoration:underline;text-underline-offset:3px}
.doc strong{color:var(--ink)}
.note{
  border-left:3px solid var(--alert);background:rgba(230,56,54,.07);
  padding:1rem 1.2rem;border-radius:0 12px 12px 0;margin:1.6rem 0;
}
.note p{margin:0;font-size:15px}

/* Footer. ROX AI's shape: a brand column with the pitch and the CTA, then columns of
   links, then a rule and a bottom line with the company and where it was made. */
footer{padding:4.5rem 0 3rem;border-top:1px solid var(--line)}
.fgrid{
  display:grid;gap:2.5rem;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  text-align:left;
}
.fbrand .brand{margin-bottom:1rem}
.fbrand p{color:var(--grey);font-size:15px;margin:0 0 1.6rem;max-width:22rem}
.fcol h4{
  font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--go);margin:.35rem 0 1rem;
}
.fcol a{display:block;color:var(--grey);font-size:15px;margin-bottom:.7rem}
.fcol a:hover{color:var(--ink)}
.fbot{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;
  margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);
  color:var(--faint);font-size:13.5px;
}
.fbot .made{margin-left:auto}
.fnote{color:var(--faint);font-size:12.5px;margin:1.2rem 0 0;max-width:58rem;line-height:1.55}
@media(max-width:820px){
  .fgrid{grid-template-columns:1fr 1fr;gap:2rem}
  .fbrand{grid-column:1 / -1}
  .fbot .made{margin-left:0;width:100%}
}