/* Terrela landing page, from Connor's Figma (Terrela Concept → "Terrela landing page / hero", 1440 × 1024).
   Sizes are the frame's, scaled down smoothly on narrower screens. */

:root {
  /* The app's own background (ScreenBackground): cream, with a soft pale-mint wash toward the bottom */
  --bg: #F7F7F2;
  --wash: rgba(225, 240, 231, .4);
  --ink: #000000;
  --button: #111610;
  --on-button: #FFFFFF;
  --left: clamp(20px, 3.8vw, 55px);   /* the frame's 55 px left edge */
}

/* The sky behind the whole page: one layer fixed to the screen, its colours set by js/sky.js as you scroll
   (day at the top, sunset at section 2, night at section 3). Without scripts it stays as the day. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top, var(--bg)) 0%, var(--sky-top, var(--bg)) 30%, var(--sky-glow, #E8F1E9) 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The root gets its own background so the body's (with the wash) is painted on the page itself, where the
   device videos can blend with it (blending can't reach the browser's canvas) */
html { -webkit-text-size-adjust: 100%; background: var(--sky-top, var(--bg)); }
body {
  min-height: 100vh;
  background: transparent;
  color: var(--ink);
  font-family: "Karla", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Top left: the animated "t" and the name */
.top { padding: 16px var(--left) 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-t {
  position: relative;
  width: 15px;
  height: 28px;
  /* Still fallback for browsers without WebGPU: the t in Terrela's greens */
  background: linear-gradient(160deg, #6DA25B 10%, #1A482B 45%, #B1ED84 85%);
  -webkit-mask: url(assets/t-mask.png) center / contain no-repeat;
  mask: url(assets/t-mask.png) center / contain no-repeat;
}
.t-fill { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s ease; }
.t-fill.live { opacity: 1; }
.brand-name { font-size: 24px; letter-spacing: -0.02em; }

/* Hero: the words on the left, the phone on the right (stacked on narrow screens) */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  max-width: 1440px;
  padding: 0 var(--left) 96px;
}
.hero-phone { display: flex; justify-content: center; padding-top: 40px; }
.hero-phone .device-video { width: min(470px, 100%); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 56px; }
  .hero-phone { padding-top: 0; }
  .hero-phone .device-video { width: min(420px, 100%); }
}
.hero-art {
  width: clamp(120px, 11vw, 158px);
  aspect-ratio: 600 / 522;
  margin-top: clamp(40px, 7vw, 92px);
  background: var(--ink);
  -webkit-mask: url(assets/writing-hand.png) center / contain no-repeat;
  mask: url(assets/writing-hand.png) center / contain no-repeat;
}
h1 {
  max-width: 590px;           /* wide enough for the Figma line breaks with the eased spacing */
  margin-top: clamp(28px, 4vw, 52px);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: clamp(42px, 4.45vw, 64px);
  line-height: 1.13;
  letter-spacing: -0.025em;   /* Figma: -4.5%, eased so letters don't touch */
}
.lede {
  max-width: 540px;
  margin-top: clamp(24px, 3vw, 44px);
  font-size: clamp(19px, 1.67vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.01em;    /* Figma: -8%, eased for reading */
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  max-width: 100%;
  height: 58px;
  margin-top: clamp(40px, 6vw, 92px);
  border-radius: 30px;
  background: var(--button);
  color: var(--on-button);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
/* The smaller "Get started" at the top right */
.cta-small { width: auto; height: 44px; margin-top: 0; padding: 0 22px; border-radius: 22px; font-size: 16px; }
/* Section 3's button, under its words */
.pocket .cta { margin-top: 36px; }
.cta:hover { opacity: .9; }
.cta:active { transform: scale(.98); }

@media (max-width: 600px) {
  .cta { width: 100%; font-size: 20px; }
  .cta-small { width: auto; font-size: 15px; height: 40px; padding: 0 18px; }
}

/* Section 2: any time of day */
.anytime { grid-column: 1 / -1; margin-top: clamp(64px, 9vw, 140px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.anytime-copy { max-width: 640px; }
.anytime h2 {
  font-family: "Fraunces", Georgia, serif; font-weight: 400; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: clamp(36px, 3.9vw, 56px); line-height: 1.12; letter-spacing: -0.025em;
}
.anytime p { margin-top: 20px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; letter-spacing: -0.01em; }
.anytime .device-video { width: min(980px, 100%); margin-top: clamp(32px, 4vw, 60px); }

/* The device videos: recorded on pure white (section 3's night scene on black), which js/device-videos.js makes
   see-through. Where it can't (no WebGL), they're blended into the page instead: multiply for white, screen for black. */
.device-video {
  display: block; height: auto; background: transparent; mix-blend-mode: multiply;
  /* The devices' soft shadows reach the edges of the recording: fade the outer edges so they trail off */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
                      linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
                      linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
          mask-composite: intersect;
}
/* The <video> itself only feeds the canvas: kept in the page (so it keeps playing) but out of sight */
.device-video-source { position: absolute !important; width: 2px !important; height: 2px !important; opacity: 0; pointer-events: none; }
.device-video.phone { aspect-ratio: 560 / 1040; }
.device-video.duo { aspect-ratio: 1160 / 860; }
.device-video.duo:not(.keyed) { opacity: calc(1 - var(--night, 0) * .85); } /* blended, it would muddy as night falls */
.device-video.duo-closed { aspect-ratio: 700 / 860; mix-blend-mode: screen; }
.device-video.keyed { mix-blend-mode: normal; }

/* Section 3: the closed Duo on the left, the words on the right */
.pocket {
  grid-column: 1 / -1; margin-top: clamp(64px, 9vw, 140px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px);
}
.pocket .device-video { width: min(520px, 100%); justify-self: center; }
.pocket h2 {
  font-family: "Fraunces", Georgia, serif; font-weight: 400; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: clamp(36px, 3.9vw, 56px); line-height: 1.12; letter-spacing: -0.025em; max-width: 520px;
}
.pocket p { margin-top: 20px; max-width: 480px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; letter-spacing: -0.01em; }
@media (max-width: 860px) {
  .pocket { grid-template-columns: 1fr; }
  .pocket .device-video { width: min(400px, 100%); order: 2; }
}
/* Room below the last section, so it can reach the middle of the screen and the night fully arrives */
.pocket { padding-bottom: clamp(80px, 22vh, 260px); }

/* The app's hand-drawn underline (as under "daily gratitude, made simple" on the splash), under the bottom line
   of each heading, the full width of that line, drawn left to right the first time it's seen (js/underline.js) */
.ul-line { position: relative; display: inline-block; }
.hand-underline {
  position: absolute; left: 0; bottom: -0.06em; width: 100%; height: 0.2em; overflow: visible;
}
.hand-underline path { fill: none; stroke: var(--muted, #5A5B48); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Drawn by revealing the whole line from left to right (a dash-length "draw" comes up short once the line is
   stretched across a long heading); a little room either side keeps the round ends whole */
.hand-underline { clip-path: inset(-4px 100% -4px -4px); }
.hand-underlined.drawn .hand-underline { animation: hand-underline 1.1s cubic-bezier(.45, 0, .25, 1) .3s forwards; }
.hero .hand-underlined.drawn .hand-underline { animation-delay: .9s; } /* after the page has settled */
@keyframes hand-underline { to { clip-path: inset(-4px -4px -4px -4px); } }
@media (prefers-reduced-motion: reduce) { .hand-underline { animation: none !important; clip-path: none; } }
/* Balanced heading lines, so a heading never ends on one lonely word (the underline sits under the last line) */
h1, h2 { text-wrap: balance; }

/* The open Duo's frame for the phone close-up; on bigger screens it simply holds the whole Duo */
.anytime .pan-frame { width: min(980px, 100%); margin-top: clamp(32px, 4vw, 60px); }
.anytime .pan-frame .device-video { width: 100%; margin-top: 0; }

/* Phones: the open Duo runs edge to edge (it's wide, so in the text column it would be too small to read),
   and the sections sit a little closer together */
@media (max-width: 700px) {
  /* Up close, one half at a time (js/device-videos.js glides between them in step with the video) */
  .pan-frame {
    position: relative; overflow: hidden; width: 100vw; margin: clamp(24px, 6vw, 40px) calc(50% - 50vw) 0;
    aspect-ratio: 560 / 860;
  }
  .pan-frame .device-video.duo {
    position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none; margin: 0;
    aspect-ratio: 1160 / 860; will-change: transform;
  }
  .hero { gap: 40px; padding-bottom: 48px; }
  .anytime, .pocket { margin-top: 56px; }
  .anytime p, .pocket p { margin-top: 14px; }
  .hero-art { display: none; } /* phones go straight to the heading */
  .hero-copy h1 { margin-top: 36px; }
  /* Every heading and its words centred, as section 2 already is */
  .hero-copy, .pocket-copy { text-align: center; }
  .hero-copy h1, .hero-copy .lede, .pocket h2, .pocket p { margin-inline: auto; }
}

/* Footer: the legal pages and how to reach us, at the bottom of the night */
.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px;
  max-width: 1440px; padding: 28px var(--left) 40px;
  border-top: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  color: var(--muted); font-size: 15px;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .site-foot, .site-foot nav { flex-direction: column; justify-content: center; text-align: center; }
}

/* On phones each "Start your list" sits below its device, after you've seen the app; wider screens keep it under the words */
.cta-after { display: none; }
@media (max-width: 700px) {
  .hero-copy .cta, .pocket-copy .cta { display: none; }
  .cta-after { display: inline-flex; }
  .hero-phone { flex-direction: column; align-items: center; }
  .hero-phone .cta-after { margin-top: 32px; }
  .pocket .cta-after { order: 3; margin-top: 8px; }
}

/* Features (Figma 423:1221): a big rounded card of drifting greens (the "t"'s shader, in the card's own colours),
   three icons centred at the top, and a white card below them with the chosen feature: words on the left,
   a small live screen of the app on the right */
.features {
  grid-column: 1 / -1; position: relative; margin-top: clamp(40px, 6vw, 96px);
  border-radius: clamp(36px, 6.25vw, 90px); overflow: hidden; isolation: isolate;
  padding: clamp(28px, 3.4vw, 48px) clamp(14px, 6.8vw, 98px) clamp(14px, 4.9vw, 70px);
  /* Shown until the shader runs (and where WebGPU isn't available): the same greens, still */
  background:
    radial-gradient(40% 45% at 38% 72%, #B1ED84 0%, rgba(177, 237, 132, 0) 100%),
    radial-gradient(55% 70% at 80% 40%, #6DA25B 0%, rgba(109, 162, 91, 0) 100%),
    radial-gradient(50% 55% at 25% 20%, #3F7040 0%, rgba(63, 112, 64, 0) 100%),
    #1A482B;
}
.features-fill { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity .6s ease; }
.features-fill.live { opacity: 1; }

/* The icons: frosted squares, the chosen one in the "t"'s lime with a little point toward the card */
.features-tabs { display: flex; justify-content: center; gap: clamp(10px, 1vw, 14px); margin-bottom: clamp(22px, 2.6vw, 36px); }
.features-tab {
  position: relative; width: clamp(50px, 4.2vw, 60px); aspect-ratio: 1; border-radius: 30%;
  display: grid; place-items: center; cursor: pointer; color: #102E1B;
  border: 3px solid rgba(255, 255, 255, .85); background: rgba(247, 247, 242, .78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .3s ease, transform .2s ease;
}
.features-tab:hover { transform: translateY(-2px); }
.features-tab svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.features-tab[aria-selected="true"] { background: #B1ED84; }
.features-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 12px; height: 12px; margin-left: -6px;
  background: rgba(255, 255, 255, .85); clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.features-tab:focus-visible { outline: 3px solid #F7F7F2; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.features-card { border-radius: clamp(28px, 3.4vw, 48px); background: #FBFBF7; color: #0B120E; box-shadow: 0 30px 60px -30px rgba(10, 30, 16, .45); }
.features-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 64px);
  padding: clamp(20px, 3.4vw, 54px); min-height: clamp(420px, 40vw, 580px);
}
/* The panels share one spot, so the card keeps the tallest one's height and doesn't jump when switching */
.features-card { display: grid; }
.features-panel { grid-area: 1 / 1; }
.features-panel[hidden] { display: grid; visibility: hidden; }
.features-panel:not([hidden]) .features-copy { animation: features-in .5s ease both; }
@keyframes features-in { from { opacity: 0; transform: translateY(8px); } }
.features-copy { padding-left: clamp(0px, 1.6vw, 22px); }
.features-label { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; }
.features-label svg { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: #B1ED84; fill: none; stroke: #102E1B; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.features-copy h3 {
  margin-top: clamp(16px, 2vw, 26px); font-family: "Fraunces", Georgia, serif; font-weight: 400; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: clamp(32px, 3.3vw, 48px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance;
}
.features-copy p:not(.features-label) { margin-top: 18px; max-width: 440px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; color: #4C4E3E; }

/* The screen's surroundings: a pale mint panel, as in the app's wash */
.features-visual {
  position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  border-radius: clamp(22px, 2.4vw, 34px); background: linear-gradient(180deg, #EEF6F0, #E1F0E7); padding: clamp(20px, 2.4vw, 36px) 16px;
}

/* A small screen of the app, in any of its four themes (light), with the app's own colours */
.mock {
  --m-bg: #F7F7F2; --m-ink: #102E1B; --m-muted: #5A5B48; --m-soft: #E1F0E7; --m-primary: #102E1B; --m-on: #F7F7F2; --m-surface: #E4E4D9;
  width: min(300px, 100%); border-radius: 30px; padding: 20px 20px 22px; background: var(--m-bg); color: var(--m-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 24px 50px -24px rgba(16, 46, 27, .35), 0 0 0 1px rgba(16, 46, 27, .06);
  transition: background-color .5s ease, color .5s ease;
}
.mock[data-theme="clay"]  { --m-bg: #FCF7F4; --m-ink: #3B1E15; --m-muted: #7A5A4E; --m-soft: #FBDDD3; --m-primary: #8E4630; --m-on: #FCF7F4; --m-surface: #F4E7E1; }
.mock[data-theme="tide"]  { --m-bg: #F5F9FA; --m-ink: #11262D; --m-muted: #4E646B; --m-soft: #D8ECF4; --m-primary: #2B4F5A; --m-on: #F5F9FA; --m-surface: #E2ECEF; }
.mock[data-theme="stone"] { --m-bg: #F7FAF5; --m-ink: #1B1C1A; --m-muted: #5D5F5B; --m-soft: #E6E8E2; --m-primary: #2F302E; --m-on: #F7FAF5; --m-surface: #E8EBE5; }
.mock * { transition: background-color .5s ease, color .5s ease; }
.mock-top { display: flex; justify-content: space-between; align-items: center; }
.mock-t { width: 12px; height: 22px; background: var(--m-ink); -webkit-mask: url(assets/t.png) center / contain no-repeat; mask: url(assets/t.png) center / contain no-repeat; }
.mock-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--m-soft); font: 400 13px/1 "Fraunces", Georgia, serif; }
.mock-greet { margin-top: 18px; font-size: 12px; color: var(--m-muted); }
.mock-prompt, .mock-title { margin-top: 4px; font: 400 24px/1.12 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 0, "WONK" 1; letter-spacing: -0.025em; }
.mock-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.mock-chips span { padding: 5px 9px; border-radius: 12px; background: var(--m-soft); font-size: 10.5px; font-weight: 500; }
.mock-lines { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.mock-lines span { display: inline-block; width: 21px; }
.features-panel:not([hidden]) .mock-lines li { animation: features-in .45s ease both; }
.features-panel:not([hidden]) .mock-lines li:nth-child(2) { animation-delay: .35s; }
.features-panel:not([hidden]) .mock-lines li:nth-child(3) { animation-delay: .7s; }
.mock-save { display: grid; place-items: center; height: 40px; margin-top: 22px; border-radius: 20px; background: var(--m-primary); color: var(--m-on); font-size: 13px; font-weight: 600; }
.mock-week { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 10px; text-align: center; font-size: 12px; }
.mock-week li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0 6px; border-radius: 10px; }
.mock-week b { font-size: 9.5px; color: var(--m-muted); }
.mock-week i { width: 4px; height: 4px; border-radius: 50%; }
.mock-week i.on { background: #85BF9A; }
.mock-week .now { background: var(--m-soft); box-shadow: inset 0 0 0 1.5px var(--m-ink); font-weight: 600; }
.mock-card { margin: 12px 0 14px; padding: 11px 13px; border-radius: 16px; background: var(--m-surface); }
.mock-eyebrow { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--m-muted); }
.mock-q { margin-top: 4px; font-size: 11px; color: var(--m-muted); }
.mock-line { margin-top: 6px; font-size: 12px; }
.mock-line span { display: inline-block; width: 19px; }
.mock-cal .mock-chips { margin-top: 8px; }

/* Personalization: try the themes */
.mock-themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mock-themes button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 16px; cursor: pointer;
  border: 1px solid rgba(16, 46, 27, .12); background: rgba(255, 255, 255, .7); color: #102E1B; font: 600 13px/1 "Karla", sans-serif;
}
.mock-themes button::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.mock-themes [data-theme="terrela"] { --dot: #102E1B; }
.mock-themes [data-theme="clay"] { --dot: #8E4630; }
.mock-themes [data-theme="tide"] { --dot: #2B4F5A; }
.mock-themes [data-theme="stone"] { --dot: #2F302E; }
.mock-themes [aria-pressed="true"] { background: #102E1B; color: #F7F7F2; border-color: #102E1B; }

@media (max-width: 760px) {
  .features-panel { grid-template-columns: 1fr; min-height: 0; }
  .features-copy { padding: 8px 4px 0; text-align: center; }
  .features-copy p:not(.features-label) { margin-inline: auto; }
  .features-visual { padding: 24px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .features-panel .features-copy, .features-panel .mock-lines li { animation: none !important; }
}

/* The cursor ball (js/cursor.js), desktop only: a near-black sage by day, Tide's light blue at night */
html.has-ball, html.has-ball * { cursor: none !important; }
.cursor-ball {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: color-mix(in srgb, #C3E5F4 calc(var(--night, 0) * 100%), #1F2B24);
  box-shadow: 0 2px 8px rgba(16, 46, 27, .18);
  opacity: 0; transition: opacity .2s ease, scale .25s cubic-bezier(.22, 1.2, .36, 1), background-color .3s ease;
}
.cursor-ball.on { opacity: 1; }
.cursor-ball.over { scale: 2.2; opacity: .55; }
.cursor-ball.down { scale: .75; }
.cursor-ball.over.down { scale: 1.8; }

/* Under each "Start your list": which devices, and when */
.cta-note, .pocket .cta-note { margin-top: 14px; font-size: 15px; line-height: 1.4; color: var(--muted, #5A5B48); }
p.cta-after { display: none; }
@media (max-width: 700px) {
  .hero-copy .cta-note, .pocket-copy .cta-note { display: none; }
  p.cta-after { display: block; text-align: center; }
  .pocket p.cta-after { order: 4; margin-top: 0; }
}