/* FLXCUT public pages: light grid explainer look, with the lime and warm off-white of the logo artwork
   (references/logo-reference.jpg, see BRIEF.md). Lime is too light to read as text on white, so it's a
   fill: buttons get charcoal text, and payoff words get a lime highlighter swipe behind dark letters. */
:root {
  --paper: #f6f7f1;
  --grid: #e4e6dc;
  --rule: #c4c8b6;
  --ink: #111111;
  --muted: #777777;
  --card: #ffffff;
  --accent: #bee32c;
  --accent-ink: #1f2112;
  --mark: #bee32c;
  --mark-ink: #111111;
  --success: #1eaa48;
  /* only for things that float or lift on hover (a menu, a reel in the carousel, a card under the pointer);
     cards at rest are told apart from the paper by their white fill alone */
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(0, 0, 0, 0.05);
  --serif: "Playfair Display", Georgia, serif;
  /* a step darker than the paper, for secondary buttons and quiet surfaces */
  --tone: #eaece2;
  /* five sizes do the visible work: display, heading, lead, body (17px, on body), small */
  --fs-display: clamp(46px, 7vw, 88px);
  --fs-h2: clamp(34px, 5vw, 56px);
  --fs-h3: 22px;
  --fs-lead: 19px;
  --fs-small: 14px;
  /* motion: one easing, three lengths. A marketing page moves subtly (200–600 ms, ease-out); buttons answer at once */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-fast: 140ms;
  --t-mid: 260ms;
  --t-slow: 600ms;
}
/* Anything about paying (prices, plans, top-ups) uses greens instead of the brand colour.
   #15803d keeps white button text above 4.5:1 contrast; the lighter greens are for tints and accents. */
.money {
  --accent: #15803d;
  --accent-ink: #ffffff;
  --mark: transparent;
  --mark-ink: #15803d;
  --money-tint: #e8f5ec;
}
.money .amount { color: #15803d; }
.money .btn.soft { background: var(--money-tint); border-color: #bfe3cb; color: #166534; }
@media (hover: hover) and (pointer: fine) { .money .btn.soft:hover { background: #d9efe0; } }

* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  color: var(--ink);
  font: 17px/1.6 Inter, system-ui, sans-serif;
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
/* keyboard focus is always visible: a charcoal ring clear of the element (lime is too light to see on the paper) */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 700; }
/* payoff words: italic serif on a highlighter swipe */
.pay, .hero h1 em, .sec-head h1 em, .sec-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--mark-ink);
  background: linear-gradient(transparent 38%, var(--mark) 38%, var(--mark) 92%, transparent 92%);
  padding: 0 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* nav and logo: the FLXCUT wordmark image (logo-light.png, from references/logo-reference.jpg); the big X overhangs the nav a little.
   The nav stays pinned to the top while the page scrolls, on solid paper (a box-shadow carries it past the centred
   column to the window edges, and only paints there, so the page never gets wider or scrolls sideways). At the top of
   the page it sits on the paper with nothing under it; once the page scrolls (site.js adds .scrolled) a line under it
   keeps the content scrolling beneath apart from the bar */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 12px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  border-bottom: 1px solid transparent;
  clip-path: inset(0 -100vmax);
}
/* the one line on the page, and only while content scrolls under the pinned bar  taste-skill-ignore */
.nav.scrolled { border-image: linear-gradient(var(--rule), var(--rule)) 0 0 1 0 / 0 0 1px 0 / 0 100vmax; }
/* jumping to a section from the nav lands it below the pinned bar, not under it */
section[id] { scroll-margin-top: 110px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 100px; width: auto; display: block; margin: -18px 0; }
@media (max-width: 760px) { .logo img { height: 58px; margin: -8px 0; } }
.navlinks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; align-items: center; font-size: 15px; font-weight: 500; }
.navlinks a { text-decoration: none; color: #3a3a3a; padding: 10px 0; transition: color var(--t-fast); }
.navlinks a.btn { padding: 12px 22px; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-mid), filter var(--t-mid); }
@media (hover: hover) and (pointer: fine) { .navlinks a:hover { color: var(--ink); } }
.navlinks a { white-space: nowrap; }
@media (max-width: 380px) {
  .logo img { height: 46px; margin: -4px 0; }
}
/* a Home link at the start of the nav (pricing page): text on a computer, a house button on a phone */
.navlinks .homelink { display: inline-flex; align-items: center; gap: 8px; }
.navlinks .homelink svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 760px) {
  .navlinks .homelink { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 12px; background: var(--tone); }
  .navlinks .homelink svg { width: 20px; height: 20px; }
  .navlinks .homelink span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 760px) {
  .navlinks .hide-sm { display: none; }
  /* one row on a phone: the logo, two links and the button */
  .navlinks { flex-wrap: nowrap; gap: 14px; font-size: 14px; }
  .navlinks a.btn { padding: 10px 16px; font-size: 14px; }
}

/* buttons: flat fills, fully round, at least 44px tall for a thumb. Secondary buttons are a step darker than the
   paper rather than an outline. A press dips them a touch, so every click is answered */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; padding: 12px 22px; font: 700 15px Inter, sans-serif; text-decoration: none; border: 0; background: var(--tone); color: var(--ink); cursor: pointer; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-mid), filter var(--t-mid); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #dfe2d5; } }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .btn.primary:hover { background: var(--accent); filter: brightness(1.06); } }
.btn.dark { background: var(--ink); color: #fff; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
/* the nav swaps Log in and Sign up for New project by hiding one set; display: inline-flex above would undo hidden */
.btn[hidden], .navlinks [hidden] { display: none; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px; align-items: center; padding: 48px 0 96px; }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; padding-bottom: 64px; } }
.kicker { color: var(--muted); font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.hero h1 { font-family: var(--serif); font-weight: 900; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 24px; }
.lead { font-size: var(--fs-lead); color: #2a2a2a; max-width: 560px; margin: 0 0 28px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* what every edit gets, as a plain list with charcoal ticks (no pills, no shadows) */
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 30px 0 0; font-size: 15px; font-weight: 600; }
.facts li { display: flex; align-items: center; gap: 9px; }
.facts li::before,
.ticks li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23bee32c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* the hero reel sits on the right margin at desktop, so the page's two margins match; centred when stacked */
.phone { justify-self: end; margin-right: 0; width: min(320px, 80vw); aspect-ratio: 9 / 16; border-radius: 34px; background: #000; border: 8px solid #fff; box-shadow: var(--shadow); overflow: hidden; position: relative; rotate: 2deg; }
@media (max-width: 880px) { .phone { justify-self: center; margin-right: 0; } }
.phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone .ph-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--paper); text-align: center; padding: 20px; color: var(--muted); font-size: 14px; }
/* display: flex above would otherwise override the hidden attribute and cover the demo video */
.phone .ph-empty[hidden] { display: none; }
.phone .badge { position: absolute; top: 14px; left: 14px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }

/* sample reels: phones side by side, tilted a little either way */
/* samples coverflow: --w is a reel's width, --step how far each neighbour sits from the middle */
.flow { --w: clamp(190px, 27vw, 290px); --step: calc(var(--w) * 0.68); position: relative; height: calc(var(--w) * 16 / 9 + 50px); max-width: 1000px; margin: 0 auto; perspective: 1500px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.flow:focus-visible { box-shadow: 0 0 0 3px var(--accent); border-radius: 24px; }
.flow-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.flow .slide { position: absolute; left: 50%; top: 50%; width: var(--w); rotate: none; cursor: pointer; box-shadow: none; transition: transform 420ms var(--ease-out), opacity 320ms, filter 320ms; filter: brightness(0.82) saturate(0.9); }
.flow .slide.on { filter: none; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.08); }
.flow .slide video { pointer-events: none; -webkit-user-drag: none; }
.flow .snd { position: absolute; right: 12px; bottom: 12px; background: rgba(17, 17, 17, 0.75); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.flow .slide.on .snd { opacity: 1; }
/* a tap on a reel turns its sound on and pops up a button to edit in its style */
.flow-go { position: absolute; left: 50%; bottom: 13%; translate: -50% 0; z-index: 3; white-space: nowrap; opacity: 0; transform: scale(0.94); pointer-events: none; transition: opacity 0.2s, transform 200ms var(--ease-out); }
.flow-go[hidden] { display: none; }
.picked > .flow-go { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 600px) { .flow-go { padding: 10px 16px; font-size: 14px; } }
.phone.tappable { cursor: pointer; }
.phone > .snd { position: absolute; right: 14px; bottom: 14px; background: rgba(17, 17, 17, 0.75); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; pointer-events: none; }
.phone > .snd[hidden] { display: none; }
/* the arrows float over the reels, so they keep a shadow */
.flow-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 20; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--shadow); font: 700 28px/1 Inter, sans-serif; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; padding-bottom: 4px; transition: transform var(--t-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .flow-arrow:hover { background: #fafbf7; } }
.flow-arrow:active { transform: scale(0.94); }
.flow-arrow.prev { left: 8px; }
.flow-arrow.next { right: 8px; }
.flow-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.flow-dots button { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; background: #c9cbc2; cursor: pointer; transition: width 0.3s, background 0.3s; }
.flow-dots button.on { width: 26px; background: var(--ink); }
.flow-cap { text-align: center; font-size: 15px; color: #555; margin: 14px auto 0; max-width: 460px; min-height: 3.2em; }
.flow-cap b { display: block; color: var(--ink); font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .flow .slide { transition: none; } }

/* our own promos: four upright reels in a row, two by two on narrow screens, each with its caption under it */
.promo-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; max-width: 1040px; margin: 0 auto; }
@media (max-width: 880px) { .promo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.promo { margin: 0; min-width: 0; }
.promo .phone { width: 100%; justify-self: stretch; rotate: none; border-width: 6px; border-radius: 26px; }
.promo:nth-child(odd) .phone { rotate: -1.2deg; }
.promo:nth-child(even) .phone { rotate: 1.2deg; }
@media (max-width: 600px) { .promo .phone > .snd { right: 8px; bottom: 8px; font-size: 11px; padding: 4px 8px; } }
.promo figcaption { text-align: center; font-size: 14px; color: #555; margin-top: 12px; }
.promo figcaption b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 2px; }

/* sections: clearly more space between sections than inside one. A heading, then one plain supporting sentence
   under it (no small label above). The showcase sections centre their heads; the reading sections sit left */
section.block { padding: 72px 0; }
@media (min-width: 900px) { section.block { padding: 96px 0; } }
.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head h1, .sec-head h2 { font-family: var(--serif); font-weight: 900; font-size: var(--fs-h2); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
/* a page whose first section carries its title gets the display size */
.sec-head h1 { font-size: clamp(42px, 6vw, 72px); }
.sec-sub { font-size: var(--fs-lead); color: #2a2a2a; max-width: 620px; margin: 16px auto 0; }
.sec-head.left { text-align: left; }
.sec-head.left .sec-sub { margin-left: 0; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
/* white on the paper is the separation; only cards that lift under the pointer get a shadow */
.card { background: var(--card); border-radius: 26px; padding: 26px; min-width: 0; }
.card h3 { margin: 0 0 6px; font-size: var(--fs-h3); }
.card p { margin: 0; color: #444; font-size: 16px; }

/* steps: the heading on the left, the steps stacked on the right, in order (a real list), each led by a lime dot on a
   charcoal ring rather than a number */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 28px; } }
.split > .sec-head { margin-bottom: 0; position: sticky; top: 130px; }
@media (max-width: 880px) { .split > .sec-head { position: static; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { position: relative; background: var(--card); border-radius: 26px; padding: 26px 28px 28px 74px; }
.steps li::before { content: ""; position: absolute; left: 24px; top: 27px; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; background: var(--accent); border: 6px solid var(--ink); }
.steps h3 { margin: 0 0 6px; font-size: var(--fs-h3); }
.steps p { margin: 0; color: #444; font-size: 16px; }

/* style categories: one tile per kind of video, with a small fanned deck of its styles' previews (copies of the cards'
   preview art, shrunk). The open tile's style cards are dealt out into the panel below */
.cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1180px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; border: 0; border-radius: 24px; background: var(--card); padding: 16px 16px 18px; font: inherit; color: var(--ink); cursor: pointer; transition: transform 0.25s var(--ease-out), box-shadow 0.25s; }
.cat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--accent); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.cat.on::after, .cat:focus-visible::after { opacity: 1; }
.cat:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .cat:hover { transform: scale(1.03); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.12), 0 5px 14px rgba(0, 0, 0, 0.07); }
  .cat:hover::after { opacity: 1; }
}
.cat b { font-size: 18px; line-height: 1.25; margin-top: 4px; }
.cat .use { color: #555; font-size: 14px; line-height: 1.4; margin-top: 4px; }
.cat .count { margin-top: 10px; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #eef0e6; color: #444; }
.cat.on .count { background: var(--accent); color: var(--accent-ink); }
.deck { position: relative; width: 100%; height: 112px; margin-bottom: 6px; }
.deck .mini { position: absolute; left: 50%; top: 50%; width: 300px; height: 190px; overflow: hidden; border-radius: 22px; border: 6px solid #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); pointer-events: none; transform: translate(-50%, -50%) translateX(calc(var(--i) * 36px)) rotate(calc(var(--i) * 9deg)) scale(0.42); transition: transform 260ms var(--ease-out); }
.cat.on .mini { transform: translate(-50%, -50%) translateX(calc(var(--i) * 52px)) rotate(calc(var(--i) * 13deg)) scale(0.44); }
@media (hover: hover) and (pointer: fine) { .cat:hover .mini { transform: translate(-50%, -50%) translateX(calc(var(--i) * 52px)) rotate(calc(var(--i) * 13deg)) scale(0.44); } }
@media (max-width: 600px) {
  .deck { height: 84px; }
  .deck .mini { transform: translate(-50%, -50%) translateX(calc(var(--i) * 24px)) rotate(calc(var(--i) * 9deg)) scale(0.3); }
  .cat.on .mini { transform: translate(-50%, -50%) translateX(calc(var(--i) * 32px)) rotate(calc(var(--i) * 12deg)) scale(0.31); }
  @media (hover: hover) and (pointer: fine) { .cat:hover .mini { transform: translate(-50%, -50%) translateX(calc(var(--i) * 32px)) rotate(calc(var(--i) * 12deg)) scale(0.31); } }
  .cat { padding: 12px 10px 14px; }
  .cat b { font-size: 16px; }
  .cat .use { font-size: 13px; }
}
.cat-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 18px; margin-top: 22px; scroll-margin-bottom: 24px; }
.cat-panel[hidden], .style-pool[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cat, .deck .mini { transition: none; } .cat:hover { transform: none; } }

/* style cards */
.style-card { position: relative; padding: 0; overflow: hidden; cursor: pointer; transition: transform 0.25s var(--ease-out), box-shadow 0.25s; }
.style-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--accent); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.style-card.picked::after, .style-card:focus-visible::after { opacity: 1; }
.style-card:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .style-card:hover { z-index: 1; transform: scale(1.03); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.12), 0 5px 14px rgba(0, 0, 0, 0.07); }
  .style-card:hover::after { opacity: 1; }
}
.style-card .go { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(17, 17, 17, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.style-card .go .btn { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); transform: scale(0.94); transition: transform 200ms var(--ease-out); }
.style-card.picked .go { opacity: 1; pointer-events: auto; }
.style-card.picked .go .btn { transform: none; }
@media (prefers-reduced-motion: reduce) { .style-card, .style-card .go .btn, .flow-go { transition: opacity 0.2s; } .style-card:hover { transform: none; } }
.style-card .preview { height: 190px; position: relative; overflow: hidden; }
.style-card .body { padding: 18px 22px 22px; }
.tag { display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.tag.on { background: #e6f6ea; color: #0f5a27; }
.tag.soon { background: #f1f1f3; color: #666; }

/* what every edit gets: one white panel holding the list in three columns, the heading inside it on the left */
.panel { background: var(--card); border-radius: 32px; padding: 48px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 48px; align-items: start; }
@media (max-width: 980px) { .panel { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; } }
.panel .sec-head { margin: 0; }
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px 32px; }
.features h3 { font-size: 19px; margin: 0 0 6px; }
.features p { margin: 0; color: #444; font-size: 16px; }

/* pricing */
.price-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; align-items: start; }
/* the plan most people pick is the one with a frame */
.plan { box-shadow: inset 0 0 0 3px var(--accent); }
.amount { font-family: var(--serif); font-weight: 900; font-size: 64px; line-height: 1; margin: 10px 0 2px; }
.amount small { font-family: Inter, sans-serif; font-size: 17px; font-weight: 500; color: var(--muted); }
.ticks { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; }
.ticks li::before { margin-top: 3px; }
.money .ticks li::before { background-color: #15803d; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fine { font-size: var(--fs-small); color: #666; margin-top: 12px; }
.slider-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 0 6px; }
.slider-row b { font-size: 30px; }
.slider-row .usd { font-size: 30px; font-weight: 800; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
/* plan picker: how often you pay, then the three plans */
.periods { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 30px; padding: 5px; background: var(--card); border-radius: 26px; }
.periods button { border: 0; background: none; border-radius: 999px; min-height: 44px; padding: 9px 16px; font: 600 15px Inter, sans-serif; color: #333; cursor: pointer; transition: background-color var(--t-mid), color var(--t-mid); }
@media (hover: hover) and (pointer: fine) { .periods button:hover { background: var(--tone); } }
.periods button small { font-size: 13px; font-weight: 800; color: #15803d; margin-left: 6px; }
.periods button.on { background: var(--accent); color: var(--accent-ink); }
.periods button.on small { color: inherit; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.plan-card { display: flex; flex-direction: column; align-items: flex-start; }
.plan-card h3 { font-size: 24px; margin: 4px 0 0; }
.plan-note { font-size: 17px; font-weight: 600; color: #555; }
.plan .plan-note { color: #15803d; }
.plan-card .billed { min-height: 26px; font-size: 14px; color: var(--muted); }
.plan-card .credits { margin: 14px 0 18px; }
.plan-card input[type="range"] { margin: 0; }
.plan-card .btn { margin-top: auto; width: 100%; }
.range-ends { display: flex; justify-content: space-between; align-self: stretch; font-size: var(--fs-small); color: var(--muted); margin-bottom: 18px; }
.fine.center { text-align: center; max-width: 560px; margin: 22px auto 0; }
.save { display: inline-block; background: #e6f6ea; color: #0f5a27; font-size: var(--fs-small); font-weight: 700; padding: 3px 10px; border-radius: 999px; }

/* the homepage's pricing: a field of the money green with the heading and the action on the left and the three
   plans as rows on the right, each priced in the big serif */
.price-field { background: var(--money-tint); border-radius: 32px; padding: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "head rows" "cta rows"; gap: 26px 48px; align-items: start; }
@media (max-width: 880px) { .price-field { grid-template-columns: 1fr; grid-template-areas: "head" "rows" "cta"; padding: 32px 22px; gap: 24px; } }
.price-field .sec-head { grid-area: head; margin: 0; align-self: end; }
.price-field .plan-rows { grid-area: rows; align-self: center; }
.price-field .price-cta { grid-area: cta; justify-self: start; align-self: start; }
.plan-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan-rows li { display: grid; grid-template-columns: 112px 1fr; grid-template-areas: "price name" "price info"; align-items: center; column-gap: 18px; background: var(--card); border-radius: 22px; padding: 18px 24px; }
.plan-rows li.pick { box-shadow: inset 0 0 0 3px #15803d; }
.plan-rows b { grid-area: name; font-size: 19px; }
.plan-rows span { grid-area: info; color: #444; font-size: 15px; }
.plan-rows strong { grid-area: price; font-family: var(--serif); font-weight: 900; font-size: 44px; line-height: 1; color: #15803d; }

/* pricing: the app's own approval dialog, as it looks in the workspace, shown under "how credits work" */
.approve-shot { margin: 32px 0 0; }
.approve-ui { display: grid; gap: 4px; max-width: 380px; background: #242528; color: #ededed; border-radius: 18px; padding: 22px; font-size: 14px; rotate: -1.5deg; }
.approve-ui b { font-size: 18px; }
.approve-ui .sub { color: #a3a3a3; margin-bottom: 8px; }
.approve-ui .row { display: flex; justify-content: space-between; color: #a3a3a3; padding: 3px 0; }
.approve-ui .row i { font-style: normal; }
.approve-ui .row i:last-child { color: #ededed; }
.approve-ui .row.strong i { color: #ededed; font-weight: 700; }
.approve-ui .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.approve-ui .acts span { border-radius: 999px; padding: 9px 16px; font-weight: 700; }
.approve-ui .ghost { background: #34353a; }
.approve-ui .go { background: #15803d; color: #fff; }
.approve-shot figcaption { margin-top: 12px; font-size: var(--fs-small); color: #555; }

/* faq: the heading on the left, the questions on the right. Each question is a white row with a plus that turns into
   a minus when it opens */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--card); border-radius: 20px; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 22px; cursor: pointer; font-weight: 700; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%23111' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate var(--t-mid) var(--ease-out); }
.faq details[open] summary::after { rotate: 180deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 7h11' stroke='%23111' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.faq p { margin: 0; padding: 0 22px 20px; color: #333; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* sign-up and log-in forms (they reuse the legal card) */
.legal .field { display: grid; gap: 6px; font-size: 14px; font-weight: 700; margin: 0 0 14px; }
.legal .field input { font: 400 16px Inter, sans-serif; padding: 12px 14px; border: 1px solid #d6d8cc; border-radius: 12px; background: #fff; color: var(--ink); }
.legal .field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.legal .field small { font-weight: 400; color: var(--muted); }
.legal .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #333; margin: 4px 0 10px; }
.legal .check input { margin-top: 3px; accent-color: #15803d; }
.legal .fine { font-size: 13px; color: var(--muted); }
.sso-row { display: grid; gap: 10px; }
.btn.sso { width: 100%; gap: 10px; background: var(--tone); }
@media (hover: hover) and (pointer: fine) { .btn.sso:hover { background: #dfe2d5; } }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 18px 0 14px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--grid); }
.formerr { background: #fdecea; color: #a1281b; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 6px; }
.formerr[hidden] { display: none; }
.msg-ok { background: #e6f6ea; color: #0f5a27; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 12px; }
.msg-ok[hidden] { display: none; }

/* legal pages: one readable card */
.legal { max-width: 780px; margin: 10px auto 40px; background: var(--card); border-radius: 26px; padding: 44px 48px; }
.legal h1 { font-family: var(--serif); font-weight: 900; font-size: clamp(36px, 6vw, 52px); line-height: 1.05; margin: 0 0 6px; letter-spacing: -0.01em; }
.legal .updated { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.legal h2 { font-size: 21px; margin: 32px 0 8px; }
.legal p, .legal li { color: #333; font-size: 16px; }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.legal caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.legal td { border-top: 1px solid var(--grid); padding: 10px 8px; vertical-align: top; }
.legal td:last-child { text-align: right; white-space: nowrap; }
.legal table:not(:has(caption)) td:last-child { text-align: left; white-space: normal; }
.legal tr.total td { font-weight: 800; border-top: 2px solid var(--ink); }
.legal .formula { background: var(--paper); border: 1px solid var(--grid); border-radius: 12px; padding: 12px 16px; font-weight: 600; }
/* details still to fill in before launch */
.legal .fill { background: #fff3c4; border-radius: 4px; padding: 0 4px; }
@media (max-width: 600px) { .legal { padding: 28px 20px; border-radius: 20px; } }

/* closing band + footer */
.band { background: var(--ink); color: #fff; border-radius: 30px; padding: 64px 30px; text-align: center; margin: 40px 0 30px; }
.band h2 { font-family: var(--serif); font-weight: 900; font-size: var(--fs-h2); line-height: 1.05; margin: 0 0 24px; }
.band h2 em { color: #bee32c; }
footer { padding: 26px 0 40px; color: #555; font-size: 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; }
footer a { display: inline-block; padding: 8px 0; text-decoration-color: var(--rule); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { footer a:hover { text-decoration-color: currentColor; } }
footer > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
footer .soc { display: inline-flex; gap: 2px; }
footer .soc a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 0; text-decoration: none; }

/* motion: as a section reaches the screen its parts rise into place a beat apart (heading, then text, then the rest).
   site.js turns this on only with no reduced-motion preference and a working script, so without either everything is
   simply there. Transform and opacity only */
.motion .rise > * { opacity: 0; translate: 0 24px; transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out); }
.motion .rise.in > * { opacity: 1; translate: none; }
.motion .rise.in > :nth-child(2) { transition-delay: 80ms; }
.motion .rise.in > :nth-child(3) { transition-delay: 160ms; }
.motion .rise.in > :nth-child(4) { transition-delay: 240ms; }
.motion .rise.in > :nth-child(5) { transition-delay: 320ms; }
.motion .rise.in > :nth-child(n + 6) { transition-delay: 400ms; }

/* ---------- how it feels in the hand (skills: emil-design-eng, mobile-native) ---------- */
/* no double-tap wait on anything tappable, and a long press never selects a button's label */
a, button, summary, label, [role="button"] { touch-action: manipulation; }
button, summary, .btn, .cat { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* iPhones zoom the page into any field under 16px and don't zoom back */
@media (pointer: coarse) { input:not([type="checkbox"], [type="radio"]), textarea, select { font-size: 16px; } }
/* the dots stay small to look at, with a thumb-sized area to hit */
.flow-dots button { position: relative; }
.flow-dots button::after { content: ""; position: absolute; inset: -14px -4px; }
/* every tile answers a press. These sit after the hover rules, which share their weight */
.cat:active, .style-card:active { transform: scale(0.98); }
/* .picked sets transform: none, which would otherwise swallow the button's own press dip */
.picked > .flow-go:active, .style-card.picked .go .btn:active { transform: scale(0.97); }
/* prices keep their width when the billing period changes */
.amount, .billed, .plan-rows { font-variant-numeric: tabular-nums; }
/* FAQ answers open instead of jumping, where the browser supports it */
@media (prefers-reduced-motion: no-preference) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 220ms var(--ease-out), content-visibility 220ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cat:active, .style-card:active, .picked > .flow-go:active, .style-card.picked .go .btn:active { transform: none; }
}

/* the smallest phones: the nav keeps one row, with the logo, two links and the button all in view */
@media (max-width: 380px) {
  .navlinks { gap: 10px; font-size: 13px; }
  .navlinks a.btn { padding: 8px 12px; font-size: 13px; min-height: 40px; }
}