/* The site's one stylesheet: every page links it, so a look change happens here once. */
/* Design tokens lifted from tools/store_screenshots/gen_store.py - the site is
   styled as the next store asset. Backgrounds/accents must stay in sync with SHOTS. */
@font-face { font-family:'Jakarta'; src:url('/fonts/PlusJakartaSans-latin.woff2') format('woff2'); font-weight:200 800; font-display:swap; }

* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:#0B0D11; color:#ECEEF2; line-height:1.6;
  font-family:'Jakarta',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:1060px; margin:0 auto; padding-left:24px; padding-right:24px; }
a { color:#FF9A6B; }

/* Store caption system: eyebrow / headline with accent word / sub, plus body copy */
.eb { font-size:.82rem; letter-spacing:.19em; text-transform:uppercase; font-weight:700; }
.sh { font-weight:800; font-size:clamp(2.1rem,4.6vw,3.1rem); line-height:1.04; letter-spacing:-.02em; color:#ECEEF2; margin-top:12px; }
.sh .a { -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub { margin-top:14px; font-size:1.14rem; color:#B9BFC9; font-weight:500; line-height:1.4; }
.body { margin-top:12px; font-size:1.02rem; color:#8A909C; line-height:1.55; }

/* Phone frame, proportions from the store pipeline */
.phone { position:relative; flex:none; width:min(340px,80vw); padding:8px; border-radius:34px;
  background:linear-gradient(160deg,#20242e,#0d0f14); border:2px solid #3A404B;
  box-shadow:0 24px 64px rgba(0,0,0,.55); }
.phone img { display:block; width:100%; height:auto; border-radius:26px; background:#101319; }

/* Watch frame for the Wear OS tile: the square store shot, rounded into a watch face */
.watch { flex:none; width:min(300px,70vw); padding:10px; border-radius:50%;
  background:linear-gradient(160deg,#20242e,#0d0f14); border:2px solid #3A404B;
  box-shadow:0 24px 64px rgba(0,0,0,.55); }
.watch img { display:block; width:100%; height:auto; border-radius:50%; background:#000; }

.badge-cta { display:inline-block; margin-top:26px; }
.badge-cta img { display:block; height:64px; width:auto; }
.platform { margin-top:14px; font-size:.92rem; color:#8A909C; }

/* Hero: the feature graphic, expanded */
.hero { background:
    radial-gradient(60% 95% at 82% 45%, rgba(255,122,69,.22) 0%, rgba(255,122,69,0) 60%),
    radial-gradient(50% 80% at 15% 90%, rgba(255,179,0,.10) 0%, rgba(255,179,0,0) 55%),
    linear-gradient(150deg,#232833 0%,#181B22 52%,#0B0D11 100%);
  padding:76px 0 36px; }
.hero-grid { display:flex; align-items:center; justify-content:space-between; gap:48px; }
.hero-copy { max-width:520px; }
.lockup h1 { font-weight:800; font-size:clamp(3rem,7vw,4.4rem); line-height:1; letter-spacing:-.02em;
     color:#ECEEF2; text-shadow:0 3px 22px rgba(0,0,0,.55); }
.lockup h1 .flame { color:#FF7A45; }
.lockup { display:flex; align-items:center; gap:22px; }
.appicon { display:block; width:80px; height:80px; flex:none; border-radius:18px;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.5)); }
/* The H1 reads "STOKE. Habit & streak tracker for Android"; column-reverse shows the tag above
   the wordmark, as the separate line it was before it joined the heading. */
.lockup h1 { display:flex; flex-direction:column-reverse; }
.modes-tag { margin-bottom:8px; color:#FF9A6B; font-weight:600; font-size:1.05rem;
  letter-spacing:.04em; line-height:1.6; text-shadow:none; }
.tagline { margin-top:22px; font-size:1.42rem; font-weight:700; line-height:1.3; }
.hero .sub { max-width:440px; }

section { padding:72px 0; }

/* Feature rows: each carries its store shot's background + accent */
.mode { padding:64px 0; }
.row { display:flex; align-items:center; justify-content:space-between; gap:48px; }
.row.rev { flex-direction:row-reverse; }
.row .copy { max-width:500px; }
.bg-today    { background:radial-gradient(66% 40% at 50% 72%, rgba(255,122,69,.30) 0, rgba(255,122,69,0) 60%), linear-gradient(180deg,#181B22,#0B0D11); }
.bg-detail   { background:radial-gradient(66% 40% at 50% 72%, rgba(232,93,42,.26) 0, rgba(232,93,42,0) 60%), linear-gradient(180deg,#181B22,#0B0D11); }
.bg-insights { background:radial-gradient(66% 40% at 50% 72%, rgba(255,179,0,.20) 0, rgba(255,179,0,0) 60%), linear-gradient(180deg,#181B22,#0B0D11); }
.bg-rest     { background:radial-gradient(66% 40% at 50% 72%, rgba(87,180,242,.24) 0, rgba(87,180,242,0) 60%), linear-gradient(180deg,#161B26,#0B0D11); }
.bg-widgets  { background:radial-gradient(66% 40% at 50% 72%, rgba(255,122,69,.30) 0, rgba(255,122,69,0) 60%), linear-gradient(180deg,#181B22,#0B0D11); }

.acc-today    { background-image:linear-gradient(92deg,#FF7A45,#FFB300); }
.acc-detail   { background-image:linear-gradient(92deg,#FFB300,#FF7A45); }
.acc-insights { background-image:linear-gradient(92deg,#FFB300,#FF7A45); }
.acc-rest     { background-image:linear-gradient(92deg,#57B4F2,#9BD8FF); }
.acc-widgets  { background-image:linear-gradient(92deg,#FF7A45,#FFB300); }

/* Centered sections */
.center { text-align:center; }
.center .sub, .center .body { margin-left:auto; margin-right:auto; max-width:620px; }


.grid4 { margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:left; }
.fact { background:linear-gradient(180deg,#1D2129,#12151B); border:1px solid #2E3440; border-radius:18px; padding:22px 20px; }
.fact h3 { font-size:1.04rem; font-weight:700; color:#ECEEF2; }
.fact p { margin-top:8px; font-size:.94rem; color:#8A909C; line-height:1.5; }
.grid4 + .body { margin-top:24px; }

/* More features: Health Connect across the top with examples, the rest in threes */
.more { margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:left; }
.more .wide { grid-column:1 / -1; padding:26px 24px; }
/* Before the media queries below, so a phone still gets one column */
.more.two { grid-template-columns:repeat(2,1fr); }
/* A badge's text starts with a space (<span class="tier"> Premium</span>) so a heading's text
   reads "Wear OS Premium", not "Wear OSPremium"; the pill drops a leading space, so it looks the same */
.tier { display:inline-block; margin-left:10px; padding:2px 9px; border-radius:999px; vertical-align:2px;
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#FFD9C7; background:rgba(255,122,69,.14); border:1px solid #7A4630; }
.tier.free { color:#B9BFC9; background:rgba(185,191,201,.08); border-color:#3A404B; }
.examples { margin-top:14px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 28px; list-style:none; }
.examples li { font-size:.94rem; color:#B9BFC9; line-height:1.45; }
.examples b { color:#ECEEF2; }
.examples + p { margin-top:14px; }
@media (max-width:920px){ .more { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .more, .more.two, .examples { grid-template-columns:1fr; } .more { gap:14px; } }

.faq { max-width:760px; margin:36px auto 0; text-align:left; }
.faq details { border-top:1px solid #262B36; padding:18px 0; }
.faq details:last-of-type { border-bottom:1px solid #262B36; }
.faq summary { cursor:pointer; font-weight:700; font-size:1.06rem; color:#ECEEF2;
  list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:#8A909C; font-weight:600; }
.faq details[open] summary::after { content:'\2013'; }
.faq p { margin-top:10px; color:#8A909C; font-size:1rem; line-height:1.6; }

.prem-card { max-width:680px; margin:0 auto; text-align:center; padding:52px 36px;
  background:linear-gradient(180deg,#232833,#14171E); border:1px solid #3A404B; border-radius:24px; }
.prem-card .small { margin-top:12px; font-size:.9rem; color:#8A909C; }

/* The site menu, at the top of every hero: the brand on the left (not on the home page, whose hero
   is the brand), the feature pages on the right, the current one in the accent */
.hero:has(> .wrap > .topbar) { padding-top:22px; }
.topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:12px 24px; margin-bottom:40px; }
.topbar.home { justify-content:flex-end; }
.topbar .brand { display:inline-flex; align-items:center; gap:10px; color:#ECEEF2; text-decoration:none;
  font-weight:800; font-size:1.15rem; letter-spacing:-.01em; }
.topbar .brand img { width:32px; height:32px; border-radius:8px; }
.topbar .menu { display:flex; flex-wrap:wrap; gap:8px 24px; }
.topbar .menu a { color:#B9BFC9; text-decoration:none; font-weight:600; font-size:.95rem; }
.topbar .menu a:hover { color:#ECEEF2; }
.topbar .menu a[aria-current="page"] { color:#FF9A6B; }
/* On a phone the four links do not fit one line: two rows of two, not three and a stray one */
@media (max-width:560px){ .topbar, .topbar.home { justify-content:center; }
  .topbar .menu { display:grid; grid-template-columns:repeat(2,auto); justify-content:center;
    justify-items:center; gap:8px 22px; } }
.back { margin-top:18px; font-size:.95rem; }
/* Single-card pages: /add (where a shared-habits link lands) and the 404. Scoped to the body
   class, because the landing page's section, footer and type sizes differ */
body.card-page { min-height:100vh; display:flex; flex-direction:column; }
.card-page main { flex:1; display:flex; align-items:center; justify-content:center; padding:48px 24px; }
.card-page .card { max-width:460px; width:100%; }
.card-page section { padding:0; }
.card-page .mark { width:64px; height:64px; border-radius:18px; display:block; margin-bottom:22px; }
.card-page .eb { color:#FF9A6B; }
.card-page h1 { font-weight:800; font-size:clamp(1.8rem,5vw,2.4rem); line-height:1.08; letter-spacing:-.02em;
  margin-top:10px; }
.card-page .sub { font-size:1.08rem; line-height:1.6; }
.card-page .body { margin-top:10px; font-size:.98rem; line-height:1.6; }
.card-page .actions { margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.card-page .btn { display:flex; align-items:center; justify-content:center; min-height:56px; padding:0 22px;
  border-radius:16px; font-weight:700; font-size:1.05rem; text-decoration:none; }
.card-page .btn.primary { background:#FF7A45; color:#181B22; }
.card-page .btn.ghost { border:1.5px solid #3A404B; color:#ECEEF2; }
.card-page .badge img { display:block; height:60px; width:auto; margin:0 auto; }
.card-page .hint { margin-top:22px; font-size:.86rem; color:#8A909C; }
.card-page footer { border-top:none; padding:20px 24px; font-size:.82rem; }
.card-page footer a { color:#8A909C; text-decoration:none; }
[hidden] { display:none !important; }

/* A card that is a link to its own page */
.link-card { display:block; color:inherit; text-decoration:none; transition:border-color .15s, transform .15s; }
.link-card:hover { border-color:#7A4630; transform:translateY(-2px); }
.link-card .go { display:inline-block; margin-top:12px; color:#FF9A6B; font-weight:700; font-size:.95rem; }
.link-card .go::after { content:' \2192'; }

/* Import guides: numbered steps */
.steps { max-width:760px; margin:32px auto 0; list-style:none; counter-reset:step; text-align:left;
  display:grid; gap:16px; }
.steps li { counter-increment:step; position:relative; padding:22px 22px 22px 74px;
  background:linear-gradient(180deg,#1D2129,#12151B); border:1px solid #2E3440; border-radius:18px; }
.steps li::before { content:counter(step); position:absolute; left:22px; top:20px; width:34px; height:34px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#181B22; background:#FF7A45; }
.steps h3 { font-size:1.06rem; font-weight:700; color:#ECEEF2; }
.steps p { margin-top:6px; color:#B9BFC9; font-size:.98rem; line-height:1.55; }
.steps b { color:#ECEEF2; font-weight:600; }
@media (max-width:560px){ .steps li { padding:20px 18px 20px 64px; } .steps li::before { left:16px; } }

footer { border-top:1px solid #262B36; padding:40px 0 56px; text-align:center; color:#8A909C; font-size:.92rem; }
footer nav { margin-bottom:14px; }
footer nav.pages a { color:#ECEEF2; text-decoration:none; font-weight:600; }
footer nav a { margin:0 12px; }
footer .legal { margin-top:14px; font-size:.8rem; color:#8A909C; }

/* Stacked layouts (tablet + phone) */
@media (max-width:920px){
  .hero { padding:52px 0 20px; }
  .hero-grid { flex-direction:column; text-align:center; gap:44px; }
  .hero-copy { max-width:560px; }
  .lockup { justify-content:center; gap:16px; }
  .appicon { width:60px; height:60px; }
  .tagline { margin-top:32px; }
  .hero .sub { margin-left:auto; margin-right:auto; margin-top:18px; }
  .hero .badge-cta { margin-top:32px; }
  .row, .row.rev { flex-direction:column; align-items:center; gap:36px; }
  .row .copy { max-width:560px; width:100%; }
  section, .mode { padding:56px 0; }
  .grid4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .sh { font-size:clamp(2.2rem,8.5vw,3.1rem); }
  .lockup h1 { font-size:2.7rem; }
  .appicon { width:54px; height:54px; }
  .modes-tag { font-size:.85rem; }
  .tagline { font-size:1.15rem; max-width:88%; margin-left:auto; margin-right:auto; }
  .hero .sub { font-size:1.02rem; max-width:82%; }
  .badge-cta img { height:56px; }
  .phone { width:min(340px,86vw); }
  section, .mode { padding:48px 0; }
  .grid4 { grid-template-columns:1fr; gap:14px; }
  .fact { padding:18px; }
  .prem-card { padding:40px 22px; }
  .prem-card br { display:none; }
}