/* FLOW landing: the extension's own look. Near-black canvas, grey cards, silver
   for the one main action on dark and black on light. The one loud thing is the
   wordmark, cast in the same silver as the Create button, with a light passing over it. */
:root {
  color-scheme: dark;
  --canvas: #000;
  --panel: #0e0e0f;
  --card: #1e1f20;
  --track: #2a2b2d;
  --raised: #333537;
  --line: #2e2f31;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --subtle: #6f7378;
  --chip: #e8eaed;
  --on-chip: #1b1c1d;
  --ok: #81c995;
  --err: #f28b82;
  --focus: #e8eaed;
  --silver: linear-gradient(180deg, #fbfbfc 0%, #e3e5e9 48%, #c6cad1 100%);
  --silver-hover: linear-gradient(180deg, #fff 0%, #eceef1 48%, #d2d6dc 100%);
  --metal: linear-gradient(180deg, #ffffff 0%, #e6e8ec 38%, #9ea3ab 52%, #d9dce1 70%, #f4f5f7 100%);
  --on-silver: #141518;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --font: "Google Sans Text", "Google Sans", "Product Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Google Sans Display", "Google Sans", "Product Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Google Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1120px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --canvas: #f8f9fa; --panel: #fff; --card: #f1f3f4; --track: #e8eaed; --raised: #fff; --line: #dadce0;
    --text: #1f1f1f; --muted: #5f6368; --subtle: #80868b; --chip: #1f1f1f; --on-chip: #fff;
    --ok: #188038; --err: #d93025; --focus: #1f1f1f;
    --silver: #1f1f1f; --silver-hover: #000; --on-silver: #fff;
    --metal: linear-gradient(180deg, #4a4d52 0%, #1f1f1f 45%, #000 55%, #3c3f44 100%);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #f8f9fa; --panel: #fff; --card: #f1f3f4; --track: #e8eaed; --raised: #fff; --line: #dadce0;
  --text: #1f1f1f; --muted: #5f6368; --subtle: #80868b; --chip: #1f1f1f; --on-chip: #fff;
  --ok: #188038; --err: #d93025; --focus: #1f1f1f;
  --silver: #1f1f1f; --silver-hover: #000; --on-silver: #fff;
  --metal: linear-gradient(180deg, #4a4d52 0%, #1f1f1f 45%, #000 55%, #3c3f44 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
html, body { margin: 0; background: var(--canvas); color: var(--text); }
body { font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── buttons: silver on dark, black on light, an outline for the second action ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 18px; border: 0; border-radius: 12px; cursor: pointer;
  font: 500 15px/1 var(--display); text-decoration: none; white-space: nowrap;
  transition: background .15s var(--ease), filter .15s var(--ease), transform .1s var(--ease);
}
.btn.sm { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.btn.lg { height: 52px; padding: 0 22px; border-radius: 14px; font-size: 16px; }
.btn.silver { color: var(--on-silver); background: var(--silver); box-shadow: 0 6px 18px #0006, inset 0 1px 0 #fff, inset 0 -1px 0 #9ea3ab; }
.btn.silver:hover { background: var(--silver-hover); }
.btn:active { transform: scale(.985); }
.btn.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.btn.outline:hover { background: var(--track); }
:root[data-theme="light"] .btn.silver { box-shadow: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .btn.silver { box-shadow: none; } }
.btn:disabled { opacity: .5; cursor: progress; }

/* ── header ── */
/* a floating bar: rounded, with a hairline, so its blur never ends in a hard-edged box */
.top {
  position: sticky; top: 12px; z-index: 20; display: flex; align-items: center; gap: 24px;
  max-width: calc(var(--wrap) - 24px); margin: 12px auto 0; padding: 10px 10px 10px 20px;
  border: 1px solid var(--line); border-radius: 20px;
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
[dir="rtl"] .top { padding: 10px 20px 10px 10px; }
.brand { display: inline-flex; }
.brand-mark {
  display: block; width: 92px; height: 24px; background: var(--text);
  -webkit-mask: url(/wordmark.svg) left center / contain no-repeat; mask: url(/wordmark.svg) left center / contain no-repeat;
}
.brand-mark.small { width: 64px; height: 17px; background: var(--muted); }
.nav { display: flex; gap: 4px; margin-inline-start: auto; }
.nav a { padding: 8px 12px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 14px; }
.nav a:hover { color: var(--text); background: var(--track); }

/* ── hero ── */
main { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.hero { padding: 56px 0 24px; display: grid; justify-items: start; }
/* The signature: the wordmark in the Create button's silver; a light crosses it once on load. */
.sheen {
  --sheen-x: -60%;
  width: min(100%, 880px); aspect-ratio: 1273 / 328;
  background:
    linear-gradient(105deg, transparent calc(var(--sheen-x) + 0%), rgba(255, 255, 255, .95) calc(var(--sheen-x) + 8%), transparent calc(var(--sheen-x) + 16%)),
    var(--metal);
  background-blend-mode: soft-light, normal;
  -webkit-mask: url(/wordmark.svg) left center / contain no-repeat; mask: url(/wordmark.svg) left center / contain no-repeat;
  filter: drop-shadow(0 18px 40px #0009);
  animation: sweep 2.4s var(--ease) .25s both;
}
[dir="rtl"] .sheen { -webkit-mask-position: right center; mask-position: right center; justify-self: end; }
@property --sheen-x { syntax: "<percentage>"; inherits: false; initial-value: -60%; }
@keyframes sweep { from { --sheen-x: -60%; } to { --sheen-x: 130%; } }
.sheen:hover { animation: sweep 1.6s var(--ease) both; }

.thesis {
  margin-top: 28px; max-width: 20ch;
  font: 500 clamp(30px, 4.6vw, 56px)/1.06 var(--display); letter-spacing: -.035em; text-wrap: balance;
}
.lede { margin-top: 18px; max-width: 62ch; color: var(--muted); font-size: 17px; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.note { margin-top: 14px; color: var(--subtle); font-size: 14px; }
.note-zip { margin-top: 6px; font-size: 13px; }
.note-zip a { color: var(--muted); text-underline-offset: 3px; }
.note-zip a:hover { color: var(--text); }

/* real screenshots, framed like a window on the canvas */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 30px 80px #000c; background: #0e0e0f; }
:root[data-theme="light"] .shot img { box-shadow: 0 30px 80px rgba(60, 64, 67, .22); }
.shot figcaption { margin-top: 14px; color: var(--subtle); font-size: 14px; }
.shot-wide { width: 100%; margin-top: 64px; }
.feature-split { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.shot-panel { position: sticky; top: 96px; }
.feature-split .features { grid-template-columns: minmax(0, 1fr); }

.code { border-radius: 18px; background: #0a0a0b; border: 1px solid #2e2f31; color: #e8eaed; overflow: hidden; text-align: left; }
.code pre { margin: 0; padding: 16px 20px 20px; overflow-x: auto; font: 12.5px/1.65 var(--mono); }
.c-p { color: #6f7378; user-select: none; }
.c-m { color: #9aa0a6; }

/* ── sections ── */
.section { padding: 96px 0 0; }
.section h2 { font: 500 clamp(26px, 3.2vw, 38px)/1.12 var(--display); letter-spacing: -.03em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.section > h2 { margin-bottom: 32px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feature { display: grid; align-content: start; gap: 10px; padding: 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.feature h3 { font: 500 20px/1.2 var(--display); }
.feature p { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 0; list-style: none; }
.tags li { padding: 5px 10px; border-radius: 999px; background: var(--track); font: 12.5px/1.3 var(--mono); color: var(--text); }

.checks { display: grid; gap: 12px; margin-top: 24px; padding: 0; list-style: none; }
.checks li { position: relative; padding-inline-start: 30px; }
/* a silver disc with the tick drawn as an SVG mask on top, both centred on the first line */
.checks li::before, .checks li::after {
  content: ""; position: absolute; inset-inline-start: 0; top: .3em; top: calc(.5lh - 9px); width: 18px; height: 18px;
}
.checks li::before { border-radius: 50%; background: var(--silver); box-shadow: inset 0 0 0 1px #9ea3ab; }
.checks li::after {
  background: var(--on-silver);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.3l2.4 2.4 4.6-5'/%3E%3C/svg%3E") center / 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.3l2.4 2.4 4.6-5'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.code-tabs { display: flex; gap: 4px; padding: 10px 10px 0; }
.code-tabs button { padding: 6px 12px; border: 0; border-radius: 9px; background: none; color: #9aa0a6; cursor: pointer; font: 13px/1 var(--mono); }
.code-tabs button[aria-selected="true"] { background: #2a2b2d; color: #e8eaed; }


.price {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: start;
  padding: 40px; border-radius: 28px; background: var(--card); border: 1px solid var(--line);
}
/* left: the price with its points under it; right: the buy form */
.price-head, .price .checks { grid-column: 1; }
.price .checks { margin-top: 12px; }

/* the buy form: email, the consent tick, PayPal (its own yellow and wordmark) and crypto */
.buy { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; gap: 14px; }
.buy-title { font: 500 24px/1.2 var(--display); margin-bottom: 4px; }
.buy-email { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--canvas); font-size: 16px; }
.buy-email:focus { outline: 2px solid var(--text); outline-offset: 1px; }
.buy-terms { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 15px; cursor: pointer; }
.buy-terms input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--text); }
.buy-terms a { color: var(--text); }
.buy-terms.invalid input { outline: 2px solid var(--err); outline-offset: 1px; }
.buy-row { display: grid; gap: 12px; }
.buy-row .btn { width: 100%; }
.btn.pay-paypal { gap: 8px; color: #2c2e2f; background: #ffc439; box-shadow: none; }
.btn.pay-paypal:hover:not(:disabled) { background: #f2ba36; }
.paypal-mark { font: italic 800 20px/1 Verdana, "DejaVu Sans", sans-serif; letter-spacing: -.02em; }
.paypal-mark b { color: #003087; font-weight: inherit; }
.paypal-mark i { color: #009cde; font-style: inherit; }
.buy .btn:disabled { opacity: .6; cursor: progress; }
.buy-note { color: var(--subtle); font-size: 14px; }
.buy-error { color: var(--err); font-size: 15px; }
.buy-error.working { color: var(--muted); }
.amount { margin-top: 18px; color: var(--muted); }
.amount b {
  display: inline-block; margin-inline-end: 6px; font: 500 clamp(56px, 7vw, 84px)/1 var(--display); letter-spacing: -.04em; vertical-align: -4px;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── footer: language and theme, as in the panel ── */
.foot { margin-top: 112px; border-top: 1px solid var(--line); }
/* Mark and copyright | links | language and theme: long link names wrap inside their own column. */
.foot-bar {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "mark note links end";
  align-items: center; gap: 12px 20px; max-width: var(--wrap); margin: 0 auto; padding: 20px 24px 28px;
}
.foot-bar > :first-child { grid-area: mark; display: flex; }
.foot-note { grid-area: note; color: var(--subtle); font-size: 13px; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.foot-links { grid-area: links; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-links a { color: var(--muted); font-size: 13px; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.foot-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.foot-end { grid-area: end; display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--track); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }
:root[data-theme="light"] .i-sun, :root:not([data-theme="light"]) .i-moon { display: none; }
.lang { position: relative; }
.lang-button {
  height: 32px; padding: 0 10px 0 12px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: none;
}
.lang-button:hover, .lang-button[aria-expanded="true"] { background: var(--track); border-color: var(--muted); }
.lang-button b { font: 600 12px/1 var(--mono); letter-spacing: .08em; }
.lang-button svg { width: 12px; height: 12px; color: var(--muted); transition: transform .15s var(--ease); }
.lang-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute; inset-inline-end: 0; bottom: calc(100% + 8px); z-index: 30; width: 210px; max-height: min(380px, 70vh);
  margin: 0; padding: 6px; overflow: auto; list-style: none; background: var(--raised); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--line);
}
.lang-menu [role="option"] {
  min-height: 34px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-radius: 8px; color: var(--muted); font-size: 14px; cursor: pointer; outline: none;
}
.lang-menu [role="option"]:hover, .lang-menu [role="option"]:focus-visible, .lang-menu [aria-selected="true"] { background: var(--track); color: var(--text); }
.lang-code { color: var(--subtle); font: 600 11px/1 var(--mono); letter-spacing: .06em; }

/* ── narrow screens ── */
@media (max-width: 900px) {
  .shot-wide { margin-top: 44px; }
  .feature-split { grid-template-columns: minmax(0, 1fr); }
  .shot-panel { position: static; max-width: 360px; width: 100%; justify-self: center; }
  .split, .price { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .buy { grid-column: 1; grid-row: auto; padding-top: 24px; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .top { margin: 8px 8px 0; top: 8px; padding: 8px 8px 8px 16px; justify-content: space-between; border-radius: 18px; }
  [dir="rtl"] .top { padding: 8px 16px 8px 8px; }
  main { padding: 0 16px; }
  .hero { padding-top: 32px; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .feature { padding: 22px; }
  .price { padding: 24px; }
  .section { padding-top: 72px; }
  .foot-bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark note end" "links links links"; padding: 18px 16px 24px; }
  .btn.lg { height: auto; min-height: 52px; padding: 12px 20px; white-space: normal; line-height: 1.25; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sheen, .sheen:hover { animation: none; }
}

/* ── legal pages: one readable column, a way home at the top and the bottom ── */
.legal-page .top { justify-content: space-between; }
.home-link span { font-size: 16px; line-height: 1; }
.legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 0; }
.legal h1 { font: 500 clamp(32px, 4.4vw, 48px)/1.08 var(--display); letter-spacing: -.035em; }
.legal-date { margin-top: 10px; color: var(--subtle); font-size: 14px; }
.legal > p:not(.legal-date):not(.legal-back) { margin-top: 18px; color: var(--muted); }
.legal h2 { margin-top: 40px; font: 500 22px/1.25 var(--display); letter-spacing: -.015em; }
.legal h2 + p, .legal h2 + ul { margin-top: 12px; }
.legal ul { display: grid; gap: 10px; padding-inline-start: 20px; color: var(--muted); }
.legal li::marker { color: var(--subtle); }
.legal b { color: var(--text); font-weight: 500; }
.legal a:not(.btn) { color: var(--text); text-underline-offset: 3px; }
.legal-back { margin-top: 48px; }
.foot-links a[aria-current="page"] { color: var(--text); }
@media (max-width: 720px) { .legal { padding: 36px 16px 0; } }