/* ditchedhq.com: the home page, the privacy policy, support and squad invites.
   Layout: a sheet of die-cut stickers on cobalt. Real screens from the app are framed as
   stickers (white die-cut, ink outline, hard shadow), and Root grows down the page.
   Colours are the app's tokens (src/theme/colors.ts); stickers look the same in light and
   dark, as in the app. Fonts are self-hosted, so no page calls a font service. */
@font-face { font-family: Parkinsans; font-weight: 400; src: url(fonts/Parkinsans_400Regular.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: Parkinsans; font-weight: 500; src: url(fonts/Parkinsans_500Medium.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: Parkinsans; font-weight: 700; src: url(fonts/Parkinsans_700Bold.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: Parkinsans; font-weight: 800; src: url(fonts/Parkinsans_800ExtraBold.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'DM Mono'; font-weight: 500; src: url(fonts/DMMono_500Medium.ttf) format('truetype'); font-display: swap; }

:root {
  /* The page */
  --ground: #EBEEF5;
  --card: #FFFFFF;
  --ink: #14163A;
  --slate: #595D7A;
  --link: #1F4DFF;
  --rule: rgba(20, 22, 58, 0.08);
  --field: #1F4DFF;
  --on-field: #FFFFFF;
  --on-field-2: rgba(255, 255, 255, 0.84);
  /* Brand colours that never change (stickers, butter, flare) */
  --butter: #FFE872;
  --flare: #FF5A36;
  --sticker-ink: #14163A;
  --cut: #FFFFFF;
  --sticker-shadow: rgba(20, 22, 58, 0.18);
  --on-butter-2: #3D3F5C;
  /* Type */
  --display: Parkinsans, ui-rounded, system-ui, -apple-system, sans-serif;
  --body: Parkinsans, system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --page: 1120px;
  --gutter: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #0E1030;
    --card: #1A1D45;
    --ink: #F3F4FA;
    --slate: #A3A8C8;
    --link: #8EA2FF;
    --rule: rgba(255, 255, 255, 0.08);
    --field: #14237D;
    --sticker-shadow: rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --ground: #0E1030;
  --card: #1A1D45;
  --ink: #F3F4FA;
  --slate: #A3A8C8;
  --link: #8EA2FF;
  --rule: rgba(255, 255, 255, 0.08);
  --field: #14237D;
  --sticker-shadow: rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--link); font-weight: 500; }
a[href^='tel:'] { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }
.wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }

/* Top bar: the wordmark, the pages, and when it's coming. */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--field); color: var(--on-field); }
.top .wrap { display: flex; align-items: center; gap: 20px; padding-block: 14px; }
.word { font: 800 28px/1 var(--display); letter-spacing: -0.03em; color: var(--on-field); text-decoration: none; }
.top nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.top nav a { color: var(--on-field); font-weight: 500; font-size: 15px; text-decoration: none; opacity: 0.85; }
.top nav a:hover, .top nav a[aria-current='page'] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--butter); color: var(--sticker-ink);
  font: 700 16px/1 var(--display); text-decoration: none;
  padding: 14px 22px; border-radius: 999px;
  border: 3px solid var(--sticker-ink);
  box-shadow: 0 4px 0 var(--sticker-ink);
}
.pill.small { font-size: 14px; padding: 9px 14px; border-width: 2px; box-shadow: 0 3px 0 var(--sticker-ink); }
.pill svg { flex: none; }

/* Framed screens: a phone drawn as a sticker */
.phone {
  position: relative; width: 100%; max-width: 290px; aspect-ratio: 1170 / 2532;
  border-radius: 40px; overflow: hidden; background: var(--cut);
  border: 3px solid var(--sticker-ink);
  box-shadow: 0 0 0 9px var(--cut), 0 7px 0 9px var(--sticker-shadow);
}
.phone img { width: 100%; height: 100%; object-fit: cover; }
.tilt-l { transform: rotate(-3deg); }
.tilt-r { transform: rotate(2.5deg); }

/* Hero */
.hero { background: var(--field); color: var(--on-field); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 56px 88px; }
.hero h1 { font: 800 clamp(48px, 8.6vw, 104px)/0.95 var(--display); letter-spacing: -0.045em; margin: 0 0 22px; }
.hero h1 em { font-style: normal; color: var(--butter); }
.hero .lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--on-field-2); max-width: 30em; margin: 0 0 30px; }
.hero .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.hero .ctas a.more { color: var(--on-field); text-underline-offset: 4px; }
.stage { position: relative; display: grid; place-items: center; min-height: 560px; }
.stage .phone { max-width: 270px; transform: rotate(-3deg); }
.stage .root { position: absolute; width: 190px; left: calc(50% - 250px); bottom: 10px; }
.stage .bubble {
  position: absolute; left: calc(50% - 300px); bottom: 216px; max-width: 200px;
  background: var(--cut); color: var(--sticker-ink); font: 500 15px/1.35 var(--body);
  padding: 10px 14px; border-radius: 18px 18px 18px 6px; border: 2px solid var(--sticker-ink);
  box-shadow: 0 3px 0 var(--sticker-shadow);
}
.stage .k1 { position: absolute; width: 74px; right: calc(50% - 205px); top: 12px; transform: rotate(12deg); }
.stage .k2 { position: absolute; width: 58px; right: calc(50% - 210px); bottom: 70px; transform: rotate(-10deg); }
.stage .k3 { position: absolute; width: 52px; left: calc(50% - 175px); top: 40px; transform: rotate(-14deg); }

/* One orchestrated moment: the hero's stickers land on the sheet. */
@keyframes land { from { opacity: 0; transform: translateY(14px) scale(0.86) rotate(var(--r, 0deg)); } to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r, 0deg)); } }
.stage > * { animation: land 520ms cubic-bezier(0.2, 0.9, 0.25, 1.25) both; }
.stage .phone { --r: -3deg; animation-delay: 60ms; }
.stage .root { animation-delay: 260ms; }
.stage .bubble { animation-delay: 520ms; }
.stage .k1 { --r: 12deg; animation-delay: 360ms; }
.stage .k2 { --r: -10deg; animation-delay: 440ms; }
.stage .k3 { --r: -14deg; animation-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage > * { animation: none; }
}

/* Sections on the ground */
section.band { padding-block: 88px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin: 0 0 14px; }
.eyebrow img { width: 30px; }
h2 { font: 800 clamp(34px, 5vw, 56px)/1.02 var(--display); letter-spacing: -0.035em; margin: 0 0 16px; }
.lead { font-size: 19px; color: var(--slate); max-width: 34em; margin: 0; }

/* What you can quit */
.habits { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 36px 0 0; }
.habit { background: var(--card); border-radius: 24px; padding: 18px 12px 16px; text-align: center; font: 700 16px/1.2 var(--display); }
.habit img { width: 76px; height: 76px; margin: 0 auto 10px; object-fit: contain; }
.habits-note { margin: 22px 0 0; color: var(--slate); }

/* Features: a framed screen beside its words, sides alternating */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.feature + .feature { margin-top: 96px; }
.feature .shot { display: grid; place-items: center; position: relative; padding-block: 12px; }
.feature .shot .deco { position: absolute; width: 70px; }
.feature:nth-child(even) .shot { order: 2; }
.feature p { font-size: 19px; color: var(--slate); max-width: 30em; margin: 0 0 14px; }
.feature .fine { font-size: 14px; }

/* Root grows: the subject's own scale, Day 0 to Day 90 */
.grow { background: var(--butter); color: var(--sticker-ink); }
.grow .eyebrow, .grow .lead { color: var(--on-butter-2); }
.stages { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; }
.stages li { display: grid; justify-items: center; gap: 10px; text-align: center; }
.stages img { width: 100%; max-width: 132px; height: auto; }
.stages b { font: 800 18px/1 var(--display); }
.stages span { font: 500 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-butter-2); }

/* Two smaller cards */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tile { background: var(--card); border-radius: 32px; padding: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; align-items: center; }
.tile h3 { font: 800 28px/1.08 var(--display); letter-spacing: -0.02em; margin: 0 0 10px; }
.tile p { color: var(--slate); margin: 0; }
.tile .phone { max-width: 150px; border-radius: 22px; box-shadow: 0 0 0 6px var(--cut), 0 5px 0 6px var(--sticker-shadow); border-width: 2px; }

/* Help */
.help { background: var(--card); border-radius: 32px; padding: 36px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 20px; }
.help img { width: 96px; }
.help h3 { font: 800 28px/1.1 var(--display); margin: 0 0 8px; }
.help p { margin: 0; color: var(--slate); }
.help strong { color: var(--ink); }

/* Closing */
.close { background: var(--field); color: var(--on-field); text-align: center; }
.close .wrap { padding-block: 80px 96px; display: grid; justify-items: center; gap: 18px; }
.close img { width: 170px; }
.close h2 { margin: 0; }
.close p { color: var(--on-field-2); margin: 0; }
.close .addr { font: 500 15px/1.4 var(--mono); color: var(--on-field); user-select: all; }

/* Footer */
.foot { color: var(--slate); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-block: 28px 48px; }
.foot .word { color: var(--ink); font-size: 22px; margin-right: auto; }
.foot a { color: var(--slate); }

/* Long pages: privacy, support, join */
main.doc { max-width: 760px; margin: 0 auto; padding: 40px var(--gutter) 72px; }
main.doc h1 { font: 800 clamp(36px, 6vw, 48px)/1.05 var(--display); letter-spacing: -0.03em; margin: 8px 0 8px; }
main.doc h2 { font: 700 24px/1.3 var(--display); letter-spacing: -0.01em; margin: 40px 0 8px; }
main.doc h3 { font: 700 18px/1.35 var(--display); margin: 24px 0 4px; }
main.doc ul { padding-left: 1.2em; }
main.doc li { margin: 6px 0; }
.meta { color: var(--slate); font-size: 15px; margin: 0 0 24px; }
.card { background: var(--card); border-radius: 24px; padding: 20px 22px; margin: 16px 0; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.short li { font-weight: 500; }
.table { background: var(--card); border-radius: 24px; padding: 6px 12px; overflow-x: auto; margin: 16px 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--rule); }
tr:last-child td { border-bottom: 0; }
th { font: 500 12px/1.4 var(--mono); color: var(--slate); text-transform: uppercase; letter-spacing: 0.08em; }
td:first-child { font-weight: 700; width: 26%; }
.code { font: 500 34px/1.2 var(--mono); letter-spacing: 0.14em; margin: 4px 0 0; overflow-wrap: anywhere; }
.page-hero { background: var(--field); color: var(--on-field); }
.page-hero .wrap { display: grid; justify-items: center; text-align: center; gap: 14px; padding-block: 36px 56px; }
.page-hero img { width: 150px; }
.page-hero h1 { font: 800 clamp(36px, 7vw, 56px)/1.02 var(--display); letter-spacing: -0.035em; margin: 0; }
.page-hero p { color: var(--on-field-2); max-width: 30em; margin: 0; font-size: 18px; }

/* Narrow screens */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-block: 40px 64px; gap: 24px; }
  .stage { min-height: 520px; }
  .habits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature, .pair { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feature:nth-child(even) .shot { order: 0; }
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .top nav { display: none; }
  .top .pill.small { margin-left: auto; }
  .stage { min-height: 460px; }
  .stage .phone { max-width: 210px; }
  .stage .root { width: 128px; left: calc(50% - 178px); }
  .stage .bubble { left: calc(50% - 176px); bottom: 150px; max-width: 150px; font-size: 13px; }
  .stage .k1 { width: 58px; right: calc(50% - 150px); }
  .stage .k2 { width: 46px; right: calc(50% - 158px); }
  .stage .k3 { display: none; }
  section.band { padding-block: 64px; }
  .habits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .habit img { width: 60px; height: 60px; }
  /* Words first, then the screen, small enough to see the next section coming. */
  .feature { gap: 24px; }
  .feature .shot, .feature:nth-child(even) .shot { order: 2; }
  .feature .phone { max-width: 230px; }
  .feature + .feature { margin-top: 72px; }
  .tile { grid-template-columns: minmax(0, 1fr); padding: 26px; }
  .tile .phone { max-width: 170px; justify-self: center; }
  .help { grid-template-columns: minmax(0, 1fr); padding: 28px; }
}