/* Self-hosted fonts (SIL Open Font License), so pages make no requests to Google Fonts.
   Latin and Latin Extended subsets of Inter (variable) and Poppins, from fonts.google.com. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Custom styles, layered on top of the compiled Tailwind utilities (assets/css/tailwind.css).
   Load order in <head>: tailwind.css first, then this file. */

html { scroll-behavior: smooth; scroll-padding-top: 96px; interpolate-size: allow-keywords; }
body { -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Hero wash: the icon's two days (sky blue, amber) and their overlap (green) */
.hero-mesh {
  background:
    radial-gradient(55% 55% at 8% 8%, rgba(74,127,214,.16) 0%, rgba(74,127,214,0) 60%),
    radial-gradient(55% 55% at 92% 6%, rgba(229,138,46,.16) 0%, rgba(229,138,46,0) 60%),
    radial-gradient(55% 55% at 50% 100%, rgba(21,156,122,.12) 0%, rgba(21,156,122,0) 60%);
}

/* Dark sections: the icon's night sky with soft glows behind the cards */
.night-glow {
  background:
    radial-gradient(45% 35% at 12% 0%, rgba(74,127,214,.26) 0%, rgba(74,127,214,0) 70%),
    radial-gradient(40% 30% at 92% 28%, rgba(229,138,46,.16) 0%, rgba(229,138,46,0) 70%),
    radial-gradient(50% 30% at 50% 100%, rgba(21,156,122,.18) 0%, rgba(21,156,122,0) 70%);
}
.card-glow-sky   { background: radial-gradient(70% 60% at 100% 100%, rgba(74,127,214,.28), rgba(74,127,214,0) 70%), rgba(255,255,255,.035); }
.card-glow-teal  { background: radial-gradient(70% 60% at 0% 100%, rgba(21,156,122,.26), rgba(21,156,122,0) 70%), rgba(255,255,255,.035); }
.card-glow-amber { background: radial-gradient(70% 60% at 100% 0%, rgba(229,138,46,.2), rgba(229,138,46,0) 70%), rgba(255,255,255,.035); }
.card-plain      { background: rgba(255,255,255,.035); }

/* ---------- Header: full width at the top, a floating pill once scrolled ---------- */
.nav-shell {
  max-width: 80rem;
  border: 1px solid transparent;
  transition: max-width .4s cubic-bezier(.2,.8,.2,1), background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#site-header.is-scrolled .nav-shell {
  max-width: 56rem;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-color: rgba(27,30,46,.07);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 30px rgba(16,24,40,.10);
}
#site-header.is-scrolled.is-dark .nav-shell {
  background: rgba(16,19,58,.74);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.nav-link { color: #5D6275; transition: color .2s ease; }
.nav-link:hover { color: #1B1E2E; }
.nav-name { color: #1B1E2E; transition: color .2s ease; }
#site-header.is-dark .nav-link { color: rgba(255,255,255,.7); }
#site-header.is-dark .nav-link:hover { color: #fff; }
#site-header.is-dark .nav-name { color: #fff; }
#site-header.is-dark #navToggle { color: #fff; }
#site-header.is-dark #navToggle:hover { background: rgba(255,255,255,.08); }

/* ---------- Phone mockup ---------- */
.phone {
  position: relative;
  border-radius: 3.1rem;
  padding: 11px;
  background: linear-gradient(145deg, #2d3150 0%, #14162c 45%, #282c49 100%);
}
.phone::before { /* side button hint */
  content: ""; position: absolute; right: -3px; top: 150px; width: 3px; height: 64px;
  border-radius: 0 3px 3px 0; background: #22253d;
}
.phone::after {
  content: ""; position: absolute; left: -3px; top: 120px; width: 3px; height: 38px;
  border-radius: 3px 0 0 3px; background: #22253d; box-shadow: 0 56px 0 #22253d;
}
.phone-screen {
  position: relative;
  aspect-ratio: 9 / 19.3;
  border-radius: 2.45rem;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}
.island {
  position: absolute; z-index: 30; left: 50%; top: 9px; transform: translateX(-50%);
  width: 84px; height: 24px; border-radius: 999px; background: #0b0c14;
}
.screen { /* each screen is opaque; the incoming one fades in on top, the old one drops out after */
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; visibility: hidden;
  transition: opacity 0s linear .35s, visibility 0s linear .35s;
}
.screen.is-active {
  z-index: 2; opacity: 1; visibility: visible;
  transition: opacity .35s ease;
}

/* ---------- Day bars (drawn by site.js) ---------- */
.daybar { position: relative; height: 12px; border-radius: 999px; background: #E3E3E8; }
.daybar-lg { height: 22px; }
.daybar-sm { height: 8px; }
.daybar .gap { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: #fff; }
.daybar .moment {
  position: absolute; top: -4px; bottom: -4px; left: 50%; width: 2.5px; margin-left: -1.25px;
  background: #0b0c14; border-radius: 2px; pointer-events: none;
}
.daybar .moment::before { /* the knob */
  content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: #0b0c14;
}
.daybar-lg .moment { top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; }
.daybar-lg .moment::before { top: -6px; width: 12px; height: 12px; margin-left: -6px; }
.ticks { position: relative; height: 14px; }
.ticks span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }

/* The draggable demo: the whole board is the slider's track. Each bar keeps its own moment mark, as in the app. */
.demo-track { touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.demo-track:focus-visible { outline: 3px solid #4A7FD6; outline-offset: 6px; border-radius: 1.5rem; }
.demo-track.is-dragging { cursor: grabbing; }

/* iOS-style toggle in the mockups */
.ios-toggle { position: relative; display: inline-block; width: 36px; height: 22px; border-radius: 999px; background: #34C759; flex-shrink: 0; }
.ios-toggle::after { content: ""; position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ios-toggle.is-off { background: #E3E3E8; }
.ios-toggle.is-off::after { right: auto; left: 2px; }

/* Floating place cards around the hero phone */
.float-card { animation: float 7s ease-in-out infinite; }
.float-card:nth-child(2n) { animation-duration: 8.5s; animation-delay: -2s; }
.float-card:nth-child(3n) { animation-duration: 9.5s; animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Cycling text in the closing section */
.cycle-text { transition: opacity .3s ease, transform .3s ease; }
.cycle-text.is-out { opacity: 0; transform: translateY(6px); }

/* Scroll reveal. Content stays visible without JS. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Editor-written rich text (FAQ answers, plan notes, the privacy and support pages) */
.prose-hl > * + * { margin-top: .85em; }
.prose-hl a { color: #3666BC; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.prose-hl a:hover { color: #2B5299; }
.prose-hl strong { color: #1B1E2E; font-weight: 600; }
.prose-hl ul { list-style: disc; padding-left: 1.25rem; }
.prose-hl ol { list-style: decimal; padding-left: 1.25rem; }
.prose-hl li + li { margin-top: .35em; }
.prose-hl h2 { margin-top: 2.2em; font-family: Poppins, Inter, system-ui, sans-serif; font-weight: 600; font-size: 1.5rem; line-height: 1.25; color: #1B1E2E; letter-spacing: -.01em; }
.prose-hl h3 { margin-top: 1.6em; font-family: Poppins, Inter, system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; color: #1B1E2E; }
.prose-hl h2 + *, .prose-hl h3 + * { margin-top: .6em; }
.prose-hl table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose-hl th, .prose-hl td { border-bottom: 1px solid #E6E8EF; padding: .55rem .5rem; text-align: left; vertical-align: top; }
.prose-hl th { color: #1B1E2E; font-weight: 600; }
.prose-hl code { font-size: .9em; background: #F1F3F8; border-radius: 6px; padding: .1em .35em; }

/* Plan feature lists come from one-per-line textareas, so they're styled here */
.plan-list ul { display: grid; gap: .8rem; }
.plan-list li { position: relative; padding-left: 1.85rem; }
.plan-list li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.15rem; height: 1.15rem; border-radius: 999px;
  background: #E8FAF4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F7D62' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.plan-list.is-dark li::before {
  background: rgba(63,211,168,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FD3A8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* FAQ accordion: native <details> with a smooth open/close slide (same as phrasehopper.com).
   Browsers without ::details-content just toggle instantly. */
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition-property: block-size, content-visibility;
  transition-duration: .28s;
  transition-timing-function: ease;
  transition-behavior: allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
.faq-item summary::-webkit-details-marker { display: none; }

/* Announcement bar: hl_announce_on must be y to show it */
#announce:not([data-on="y"]) { display: none; }

/* One-per-line lists (plans, principles): readable as lines without JS; site.js makes them a <ul> */
[data-lines] { white-space: pre-line; }

/* Cookie choice bar (Google Consent Mode) */
#consent { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
#consent.is-hidden { transform: translateY(16px); opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .float-card { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .screen, .screen.is-active, .cycle-text { transition: none; transform: none; }
  .nav-shell, #consent { transition: none; }
  .faq-item::details-content { transition: none; }
}

/* Hero place cards: up to six, placed by their order in the hero's items */
.hl-float:nth-child(1) { left: 3%; top: 7%; }
.hl-float:nth-child(2) { left: 10%; top: 35%; }
.hl-float:nth-child(3) { left: 1%; top: 63%; opacity: .6; }
.hl-float:nth-child(4) { right: 3%; top: 10%; opacity: .6; }
.hl-float:nth-child(5) { right: 9%; top: 38%; }
.hl-float:nth-child(6) { right: 1%; top: 66%; }
.hl-float:nth-child(n+7) { display: none; }

/* Accent colors an editor picks per item (Accent field: sky, teal, amber, none) */
.tile-icon.accent-sky, .tile-icon.accent-none { background: #EEF5FD; color: #2B5299; }
.tile-icon.accent-teal { background: #E8FAF4; color: #0C6450; }
.tile-icon.accent-amber { background: #FEF6EA; color: #9A5600; }
.card-glow-none { background: rgba(255,255,255,.035); }

/* Inline lead: a bold title followed by the item's formatted body on the same line */
.lead-inline p, .lead-inline .lead-body { display: inline; }

/* Principles box: one rule per line in the section's List field */
.rules-list ul { display: grid; gap: 1rem 2rem; }
@media (min-width: 640px) { .rules-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rules-list li { position: relative; padding-left: 2rem; }
.rules-list li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 1.25rem; height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7B866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m5.7 5.7 12.6 12.6'/%3E%3C/svg%3E") center / contain no-repeat;
}