/* Fullframe marketing site, 1 Nov 2026.
   Direction: "the frame mark". The app icon's two teal corner brackets are the signature: every product picture sits
   inside them, and they close on the picture once as it arrives, the way the brackets snap when a session connects.
   Ground and teal come from the icon itself (#F5F8F7, #087C77, #149B8B); the app's own blue stays inside its screenshots.
   Type: Instrument Sans for its engineered, slightly squared forms; IBM Plex Mono only for measured things (routes,
   versions, step numbers). */
:root {
  --ground: #f5f8f7; --surface: #fcfdfd; --ink: #0f1a19; --muted: #44524f; --line: #d6dfdc; --line-strong: #b9c7c3;
  --teal: #087c77; --teal-ink: #066660; --teal-bright: #149b8b; --teal-wash: #e3efec; --on-teal: #fcfdfd;
  --night: #0d1514; --night-2: #16211f; --night-ink: #e6efed; --night-muted: #a3b5b1; --night-line: #2a3735;
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-18: 18px; --t-20: 20px; --t-24: 24px; --t-30: 30px; --t-36: 36px;
  --r-s: 8px; --r-m: 14px; --r-l: 28px; --r-pill: 999px;
  --wrap: 1180px; --dur: 240ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 2px rgb(15 26 25 / .06), 0 18px 48px rgb(15 26 25 / .14);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-18)/1.55 var(--font); text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--teal-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--teal-bright); color: var(--on-teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--s4)); margin-inline: auto; }
@media (min-width: 720px) { .wrap { width: min(var(--wrap), 100% - 2 * var(--s6)); } }
.skip { position: absolute; left: var(--s4); top: -60px; padding: var(--s2) var(--s4); background: var(--ink); color: var(--surface); border-radius: var(--r-s); z-index: 10; }
.skip:focus { top: var(--s4); }

/* Header */
.site-head { position: sticky; top: 0; z-index: 5; background: color-mix(in oklab, var(--ground) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; }
.site-head.scrolled { border-bottom-color: var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--t-20); letter-spacing: -0.01em; }
.brand img { width: 30px; height: 26px; }
.nav { display: none; gap: var(--s5); margin-left: auto; font-size: var(--t-16); }
.nav a { color: var(--muted); text-decoration: none; padding: var(--s2) 0; }
.nav a:hover { color: var(--ink); }
@media (min-width: 900px) { .nav { display: flex; } }
.site-head .btn { margin-left: auto; }
@media (min-width: 900px) { .site-head .btn { margin-left: var(--s2); } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5);
  border-radius: var(--r-pill); font: 600 var(--t-16)/1 var(--font); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn--primary { background: var(--teal); color: var(--on-teal); box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset, 0 6px 18px rgb(8 124 119 / .28); }
.btn--primary:hover { background: var(--teal-ink); text-decoration: none; }
.btn--primary:active { transform: translateY(1px); box-shadow: 0 2px 8px rgb(8 124 119 / .3); }
.btn--small { min-height: 40px; padding: 0 var(--s4); font-size: var(--t-14); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--light { background: var(--surface); color: var(--teal-ink); }
.btn--light:hover { background: var(--teal-wash); }

/* Small mono labels */
.tag { font: 500 var(--t-12)/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-ink); }
.status { display: inline-flex; align-items: center; gap: var(--s2); font: 500 var(--t-14)/1.3 var(--mono); color: var(--muted); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 0 3px rgb(20 155 139 / .18); }

/* Hero */
.hero { padding: var(--s6) 0 var(--s8); }
.hero .wrap { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 1000px) { .hero { padding: var(--s8) 0 var(--s9); } .hero .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); } }
.hero h1 { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; margin: var(--s3) 0 var(--s5); }
.hero .lede { font-size: var(--t-20); color: var(--muted); max-width: 36ch; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); margin-top: var(--s6); }
.hero .fine { margin-top: var(--s5); font-size: var(--t-14); color: var(--muted); max-width: 46ch; }

/* The frame: corner brackets around a picture, closing once */
.framed { position: relative; padding: 22px; }
.framed > .shot { border-radius: var(--r-l); overflow: hidden; background: var(--night); box-shadow: var(--shadow); border: 8px solid var(--night); }
.framed > .shot img { width: 100%; }
.bracket { position: absolute; width: clamp(56px, 9vw, 104px); height: clamp(56px, 9vw, 104px); color: var(--teal-bright); pointer-events: none; }
.bracket svg { width: 100%; height: 100%; }
.bracket--tr { top: 0; right: 0; }
.bracket--bl { bottom: 0; left: 0; color: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .framed .bracket--tr { animation: snap-tr 700ms var(--ease) 250ms both; }
  .framed .bracket--bl { animation: snap-bl 700ms var(--ease) 250ms both; }
  @keyframes snap-tr { from { transform: translate(18px, -18px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes snap-bl { from { transform: translate(-18px, 18px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.readouts { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 22px 0; }
.readouts span { font: 500 var(--t-12)/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); }

/* Facts strip: ruled, numbered */
.facts { border-block: 1px solid var(--line); background: var(--surface); }
.facts ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.facts li { display: flex; gap: var(--s3); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--line); font-weight: 500; font-size: var(--t-16); }
.facts li:last-child { border-bottom: 0; }
.facts li span { font: 500 var(--t-12)/1 var(--mono); color: var(--teal-ink); }
@media (min-width: 900px) {
  .facts ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .facts li { flex-direction: column; gap: var(--s2); padding: var(--s5) var(--s4); border-bottom: 0; border-left: 1px solid var(--line); }
  .facts li:first-child { border-left: 0; padding-left: 0; }
}

/* Feature rows: the picture is the proof beside the claim */
.features { padding: var(--s9) 0 var(--s8); display: grid; gap: var(--s9); }
.feature { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); }
  .feature--flip .feature__media { order: 2; }
}
.feature h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; margin: var(--s3) 0 var(--s4); }
.feature p { color: var(--muted); max-width: 52ch; }
.feature ul { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s2); max-width: 52ch; }
.feature li { position: relative; padding-left: 26px; font-size: var(--t-16); }
.feature li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 12px; border-top: 2px solid var(--teal-bright); border-right: 2px solid var(--teal-bright); border-radius: 0 4px 0 0; }
.feature__media .framed { width: 100%; max-width: 560px; margin-inline: auto; }
.feature__media--phone .framed { max-width: 380px; }

/* Spec sheet: three short columns, dotted rows */
.sheet { padding: var(--s8) 0 var(--s9); border-top: 1px solid var(--line); }
.sheet__grid { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .sheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.sheet h2 { font-size: var(--t-30); letter-spacing: -0.02em; line-height: 1.15; margin: var(--s3) 0 var(--s3); }
.sheet p { color: var(--muted); font-size: var(--t-16); }
.sheet ul { list-style: none; padding: 0; margin: var(--s4) 0 0; }
.sheet li { padding: var(--s3) 0; border-top: 1px dotted var(--line-strong); font-size: var(--t-16); }

/* Duo: the night band */
.duo { background: var(--night); color: var(--night-ink); padding: var(--s9) 0; }
.duo .wrap { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 1000px) { .duo .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); } }
.duo .tag { color: var(--teal-bright); }
.duo h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.03em; margin: var(--s3) 0 var(--s4); }
.duo p { color: var(--night-muted); max-width: 52ch; }
.poses { list-style: none; padding: 0; margin: var(--s6) 0 0; border-top: 1px solid var(--night-line); }
.poses li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--night-line); font-size: var(--t-16); color: var(--night-muted); }
.poses b { font: 500 var(--t-14)/1.5 var(--mono); color: var(--night-ink); }
.duo .framed > .shot { border-color: #050a09; background: #050a09; }
.duo .framed { width: 100%; max-width: 420px; margin-inline: auto; }

/* Mac app: the drenched teal band */
.mac { background: var(--teal); color: var(--on-teal); padding: var(--s9) 0; }
.mac .wrap { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .mac .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: start; } }
.mac .tag { color: var(--on-teal); opacity: .85; }
.mac h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem); line-height: 1.06; letter-spacing: -0.03em; margin: var(--s3) 0 var(--s4); }
.mac p { color: rgb(252 253 253 / .9); }
.mac ul { list-style: none; padding: 0; margin: 0; }
.mac li { padding: var(--s4) 0; border-top: 1px solid rgb(252 253 253 / .3); font-size: var(--t-18); }
.mac .soon { margin-top: var(--s5); font: 500 var(--t-14)/1.4 var(--mono); color: var(--on-teal); }

/* Privacy and setup */
.trust { padding: var(--s9) 0; }
.trust .wrap { display: grid; gap: var(--s8); }
@media (min-width: 900px) { .trust .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.trust h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); line-height: 1.1; letter-spacing: -0.025em; margin: var(--s3) 0 var(--s4); }
.trust p { color: var(--muted); }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: var(--s3); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.steps li::before { content: counter(step, decimal-leading-zero); font: 500 var(--t-14)/1.6 var(--mono); color: var(--teal-ink); }
.steps h3 { font-size: var(--t-18); margin-bottom: var(--s1); }
.steps p { font-size: var(--t-16); }

/* FAQ */
.faq { padding: var(--s8) 0 var(--s9); border-top: 1px solid var(--line); }
.faq .wrap { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .faq .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s8); } }
.faq h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); letter-spacing: -0.025em; line-height: 1.1; margin-top: var(--s3); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s5) 0; font-weight: 600; font-size: var(--t-18); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 var(--t-24)/1 var(--mono); color: var(--teal-ink); transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--teal-ink); }
.faq details p { padding: 0 0 var(--s5); color: var(--muted); max-width: 62ch; font-size: var(--t-16); }

/* Closing call */
.closing { padding: var(--s9) 0; }
.closing .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s8) var(--s5); text-align: center; overflow: hidden; }
@media (min-width: 720px) { .closing .card { padding: var(--s9) var(--s8); } }
.closing h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); letter-spacing: -0.035em; line-height: 1.02; }
.closing p { color: var(--muted); margin: var(--s4) auto var(--s6); max-width: 46ch; }
.closing .bracket--tr { top: var(--s5); right: var(--s5); }
.closing .bracket--bl { bottom: var(--s5); left: var(--s5); }

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding: var(--s7) 0 var(--s8); font-size: var(--t-14); color: var(--muted); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; justify-content: space-between; }
.site-foot nav { display: flex; gap: var(--s5); }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--ink); }

/* Plain pages: support, privacy */
.page { padding: var(--s8) 0 var(--s9); }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.05; margin: var(--s3) 0 var(--s5); }
.page .lede { font-size: var(--t-20); color: var(--muted); margin-bottom: var(--s7); }
.page h2 { font-size: var(--t-24); letter-spacing: -0.015em; margin: var(--s7) 0 var(--s3); }
.page p { color: var(--muted); margin-bottom: var(--s4); }
.page .updated { font: 500 var(--t-14)/1.4 var(--mono); color: var(--muted); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; } }