/* CineNotch site. One centered column on the app's warm paper; the island inside is strict black.
   Single light look on purpose: the app icon is paper + a black island with lime eyes. */
/* Fonts are served from this site (SIL Open Font License 1.1, see fonts/LICENSE.md), not from Google. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("fonts/caveat-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: "Caveat"; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("fonts/caveat-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: "Nunito"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url("fonts/nunito-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: "Nunito"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url("fonts/nunito-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; }
:root {
  --paper: #F3F1EA;
  --card: #FFFFFF;
  --ink: #0B0B0A;
  --ink-2: #2E2D29;
  --muted: #6B6A62;
  --line: rgba(11, 11, 10, .10);
  --accent: #C6F432;
  --on-accent: #18220A;
  --display: "Nunito", ui-rounded, system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--paper); }
body { color: var(--ink); font: 600 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.page { padding-inline: clamp(16px, 4vw, 48px); padding-top: env(safe-area-inset-top, 0px); }

/* Nav */
.nav { max-width: 1180px; margin: 0 auto; height: 72px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 900 19px/1 var(--display); letter-spacing: -.01em; }
.navlinks { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; }
.navlinks a.t { text-decoration: none; color: var(--ink-2); }
.navlinks a.t:hover { color: var(--ink); }

/* The mascot: black capsule with lime oval eyes (Mascot.swift) */
.mascot { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: calc(var(--m) * 1px); height: calc(var(--m) * .46px); gap: calc(var(--m) * .186px);
  background: var(--ink); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mascot .eyes { display: flex; gap: inherit; transition: transform .12s ease-out; }
.mascot i { display: block; width: calc(var(--m) * .107px); height: calc(var(--m) * .157px); border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 calc(var(--m) * .065px) rgba(198,244,50,.75); position: relative; }
.mascot.big i::after { content: ""; position: absolute; left: 20%; top: 15%; width: 30%; height: 21%; border-radius: 50%; background: rgba(255,255,255,.9); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 999px; text-decoration: none;
  font: 800 16px/1 var(--body); transition: transform .12s ease-out, background .15s, box-shadow .15s; white-space: nowrap; }
.btn:active { transform: scale(.96); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: #24231F; }
.btn.quiet { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.quiet:hover { box-shadow: inset 0 0 0 1px rgba(11,11,10,.22); }
.btn.lime { background: var(--accent); color: var(--on-accent); }
.btn.lime:hover { background: #D3FA55; }
.btn.sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn svg { flex: none; }
.free { margin-left: 2px; padding: 4px 8px 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 900 12px/1 var(--display); letter-spacing: .02em; }
.meta { margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; color: var(--muted); font-size: 14px; font-weight: 700; }

/* Hero */
.hero { max-width: 1180px; margin: 0 auto; padding-top: clamp(20px, 3.5vh, 40px); display: flex; flex-direction: column; align-items: center; text-align: center; }
h1 { margin: 0; font: 900 clamp(40px, 5.2vw, 70px)/1.02 var(--display); letter-spacing: -.035em; text-wrap: balance; }
h1 .l2 { display: block; color: #8A887F; }
.mark { position: relative; white-space: nowrap; isolation: isolate; }
.mark::before { content: ""; position: absolute; z-index: -1; left: -.12em; right: -.12em; top: .5em; bottom: .02em; background: var(--accent);
  border-radius: .14em .22em .18em .12em; transform: rotate(-1.4deg) scaleX(var(--p, 1)); transform-origin: 0 50%;
  transition: transform .55s cubic-bezier(.2,.8,.2,1) .25s; }
.js .mark::before { --p: 0; }
.js.ready .mark::before { --p: 1; }
.sub { margin: 18px 0 0; max-width: 37em; color: var(--ink-2); font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; text-wrap: pretty; }
.ctas { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Laptop + demo */
.demo { position: relative; width: min(100%, 900px); margin-top: clamp(80px, 9vh, 86px); }
.lid { position: relative; z-index: 2; background: #0E0E0F; border-radius: 22px 22px 12px 12px; padding: 12px;
  box-shadow: inset 0 0 0 1.5px #2B2B2E, 0 40px 80px -40px rgba(60, 45, 15, .45); }
.screen { position: relative; aspect-ratio: 1000 / 625; overflow: hidden; border-radius: 9px 9px 3px 3px; background: #000; touch-action: manipulation; }
.base { position: relative; z-index: 2; height: 16px; margin-inline: -6.5%; border-radius: 0 0 20px 20px / 0 0 14px 14px;
  background: linear-gradient(#E7E6E1, #C3C2BC 70%, #A9A8A2); box-shadow: 0 18px 30px -18px rgba(40,30,10,.5); }
.base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 6px; transform: translateX(-50%); border-radius: 0 0 9px 9px; background: #B2B1AB; }
.peek { position: absolute; z-index: 1; left: 10%; top: -26px; cursor: pointer; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.peek:hover { transform: translateY(-4px); }
.peek.hop { transform: translateY(-14px); }
.callout { position: absolute; z-index: 3; left: calc(50% + 128px); top: -70px; margin: 0; text-align: left; font: 700 clamp(21px, 2.5vw, 27px)/1.02 var(--hand); color: var(--ink-2);
  transform: rotate(-3deg); transform-origin: 0 100%; pointer-events: none; white-space: nowrap; }
.arrow { position: absolute; z-index: 3; left: calc(50% + 38px); top: -44px; width: 86px; height: 44px; pointer-events: none; overflow: visible; }
.arrow path { fill: none; stroke: var(--ink-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.steps { list-style: none; padding: 0; margin: 34px auto 0; max-width: 900px; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; }
.steps li { position: relative; padding: 16px 18px 18px; border-radius: 16px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, box-shadow .25s; min-width: 0; }
.steps li[data-on="1"] { background: var(--card); box-shadow: inset 0 0 0 1px rgba(11,11,10,.16), 0 12px 30px -18px rgba(60,45,15,.35); }
.steps .k { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(11,11,10,.07); font: 900 13px/1 var(--display); margin-bottom: 10px; transition: background .25s; }
.steps li[data-on="1"] .k { background: var(--accent); color: var(--on-accent); }
.steps h3 { margin: 0 0 4px; font: 900 18px/1.2 var(--display); letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }

/* The Mac screen (1000 x 625 points, scaled to fit) */
.stage { position: absolute; left: 0; top: 0; width: 1000px; height: 625px; transform-origin: 0 0; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; font-weight: 400;
  user-select: none; -webkit-user-select: none; cursor: default; }
.wall { position: absolute; inset: 0; background: linear-gradient(120deg, #F5CDBC 0%, #EDB9C4 38%, #CDB8EC 70%, #A9BFF1 100%); }
.win { position: absolute; left: 110px; right: 110px; top: 54px; bottom: -24px; background: #fff; border-radius: 11px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(60, 30, 60, .22), 0 0 0 .5px rgba(0,0,0,.18); }
.tabs { height: 38px; background: #EEEEF0; display: flex; align-items: flex-end; gap: 2px; padding: 0 10px 0 84px; position: relative; }
.tl { position: absolute; left: 14px; top: 13px; display: flex; gap: 7px; }
.tl i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.tl i:nth-child(2) { background: #FEBC2E; } .tl i:nth-child(3) { background: #28C840; }
.tab { height: 30px; padding: 0 16px; display: flex; align-items: center; font-size: 12px; color: #5A5A5E; border-radius: 8px 8px 0 0; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab.on { background: #fff; color: #111; }
.tool { height: 40px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #EBEBEB; }
.addr { width: 380px; height: 26px; border-radius: 8px; background: #F1F1F3; font-size: 12px; color: #666; display: flex; align-items: center; justify-content: center; }
.doc { padding: 40px 0 0 96px; width: 640px; text-align: left; }
.doc h4 { font: 700 32px/1.15 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; margin: 0 0 8px; color: #151515; letter-spacing: -.02em; }
.doc p { margin: 0 0 28px; font-size: 16px; color: #6A6A6E; }
.ln { height: 11px; border-radius: 6px; background: #E6E6EA; margin: 0 0 14px; }
.menubar { position: absolute; left: 0; right: 0; top: 0; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px;
  font-size: 13px; color: #111; background: rgba(255,255,255,.42); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 2; }
.mbl, .mbr { display: flex; gap: 18px; align-items: center; }
.mbl b { font-weight: 700; }
#glow { position: absolute; z-index: 1; filter: blur(44px) saturate(1.5); pointer-events: none; opacity: 0; }
.iw { position: absolute; left: 0; top: 0; width: 1000px; height: 625px; z-index: 3; pointer-events: none; }
#shapeSvg { position: absolute; left: 0; top: 0; overflow: visible; }
.clip { position: absolute; left: 0; top: 0; width: 1000px; height: 625px; }
.clip > * { position: absolute; }
#title { color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
#video { display: block; background: #000; cursor: pointer; }
#ring { overflow: visible; }
#pbar { border-radius: 99px; background: rgba(255,255,255,.2); overflow: hidden; transform-origin: 0 50%; }
#pfill { height: 100%; background: rgba(255,255,255,.9); border-radius: 99px; }
#ctrls { display: flex; align-items: center; padding: 0 4px; }
.mid { display: flex; gap: 26px; margin: 0 auto; }
.ib { width: 30px; height: 28px; border: 0; background: transparent; color: rgba(255,255,255,.8); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; padding: 0; }
.ib:hover { color: #fff; }
.ib::before { content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: rgba(255,255,255,0); transition: background .15s; }
.ib:hover::before { background: rgba(255,255,255,.13); }
.ib svg { position: relative; transition: transform .09s; }
.ib:active svg { transform: scale(.84); }
#eyes { position: absolute; display: flex; gap: 13px; transform-origin: 50% 50%; }
#eyes i { display: block; width: 7px; height: 10px; border-radius: 50%; background: #C6F432; box-shadow: 0 0 4px rgba(198,244,50,.85); }
.notch { position: absolute; top: 0; left: 50%; width: 185px; height: 32px; margin-left: -92.5px; background: #000; border-radius: 0 0 11px 11px; z-index: 4; pointer-events: none; }
.lens { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3B4466, #0B0D14 70%); }
#cursor { position: absolute; z-index: 6; pointer-events: none; opacity: 0; margin: -3px 0 0 -5px; }

/* Sections */
.sec { max-width: 1080px; margin: 0 auto; padding-top: clamp(80px, 11vw, 140px); }
.sec-head { text-align: center; max-width: 40em; margin: 0 auto 40px; }
h2 { margin: 0; font: 900 clamp(32px, 4.2vw, 50px)/1.05 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.sec-head p { margin: 14px auto 0; max-width: 34em; color: var(--muted); font-size: 18px; text-wrap: pretty; }
h3 { margin: 0; font: 900 19px/1.2 var(--display); letter-spacing: -.01em; }

/* Island states */
.states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.state { margin: 0; background: var(--card); border-radius: 22px; padding: 10px 10px 22px; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.state figcaption { padding: 0 12px; display: grid; gap: 6px; }
.state figcaption p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.strip { position: relative; height: 236px; border-radius: 14px; overflow: hidden; background: linear-gradient(120deg, #F5CDBC 0%, #EDB9C4 40%, #CDB8EC 75%, #A9BFF1 100%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-weight: 400; }
/* A Safari window behind the island, for scale */
.strip::after { content: ""; position: absolute; left: 9%; right: 9%; top: 46px; height: 160px; border-radius: 8px; z-index: 0;
  background: linear-gradient(#EEEEF0, #EEEEF0) top / 100% 18px no-repeat, linear-gradient(#E6E6EA, #E6E6EA) 14% 44px / 52% 7px no-repeat,
    linear-gradient(#E6E6EA, #E6E6EA) 14% 60px / 64% 7px no-repeat, linear-gradient(#E6E6EA, #E6E6EA) 14% 76px / 40% 7px no-repeat, #fff;
  box-shadow: 0 10px 30px rgba(60,30,60,.18), 0 0 0 .5px rgba(0,0,0,.12); }
.strip.tall { background: linear-gradient(160deg, #EDB9C4, #CDB8EC 55%, #A9BFF1); }
.strip.nonotch { background: linear-gradient(120deg, #BFD8F2, #CBC5F0 55%, #E9C5D9); }
.mini-bar { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 24px; display: flex; align-items: center; gap: 12px; padding: 0 12px; font-size: 10.5px; color: #111; background: rgba(255,255,255,.45); }
.mini-bar b { font-weight: 700; }
.pill { position: absolute; z-index: 2; left: 50%; display: flex; align-items: center; gap: 6px; color: #fff; background: #000; transform: translateX(-50%); }
.pill .pt { font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-align: left; }
.pill .thumb { width: 36px; height: 20px; border-radius: 3px; flex: none; background: #222; }
.pill .mring { width: 13px; height: 13px; flex: none; overflow: visible; }
.notch-pill { top: 0; width: 76%; height: 32px; border-radius: 0 0 12px 12px; padding: 0 10px 0 12px; }
.notch-pill .pt { flex: 1; }
.notch-pill .cam { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3B4466, #0B0D14 70%); flex: none; margin-right: 22%; }
.drawn-pill { top: 2px; width: 58%; height: 20px; border-radius: 10px; padding: 0 5px 0 3px; }
.drawn-pill .thumb { width: 25px; height: 14px; border-radius: 3px; }
.drawn-pill .pt { flex: 1; font-size: 10px; }
.drawn-pill .mring { width: 11px; height: 11px; }
.strip.tall { display: flex; justify-content: center; align-items: flex-start; }
.mini-open { position: relative; z-index: 2; width: 84%; background: #000; border-radius: 0 0 20px 20px; padding: 26px 9px 8px; display: grid; gap: 7px; z-index: 1; }
.mvid { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; display: block; background: #222; }
.mbar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.mbar span { display: block; height: 100%; width: 34%; background: rgba(255,255,255,.9); border-radius: 3px; }
.mctl { width: 100%; height: 12px; display: block; opacity: .85; }
.mglow { position: absolute; z-index: 1; left: 12%; top: 22%; width: 76%; height: 74%; filter: blur(22px) saturate(1.5); opacity: .6; }

/* Features */
.feats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; text-align: center; }
.feats li { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.feats svg { width: 38px; height: 38px; margin-bottom: 8px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feats svg .f { fill: var(--accent); }
.feats p { margin: 0; max-width: 24em; color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.num { display: inline-flex; align-items: baseline; gap: 3px; height: 38px; margin-bottom: 8px; font: 900 34px/38px var(--display); letter-spacing: -.03em; }
.num small { font-size: 15px; letter-spacing: 0; color: var(--muted); }

/* Privacy */
.priv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; background: var(--ink); color: #EDEDE6;
  border-radius: 30px; padding: clamp(32px, 5vw, 64px); position: relative; overflow: hidden; }
.priv::before { content: ""; position: absolute; width: 380px; height: 380px; left: 8%; top: 50%; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(198,244,50,.16), transparent 65%); pointer-events: none; }
.priv-face { display: grid; place-items: center; position: relative; }
.priv-face .mascot { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), 0 30px 60px -20px rgba(0,0,0,.6); }
.priv h2 { color: #fff; }
.priv ul { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 14px; }
.priv li { position: relative; padding-left: 24px; color: #CFCFC7; font-size: 17px; line-height: 1.45; }
.priv li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(198,244,50,.7); }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; font: 800 18px/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background:
  linear-gradient(var(--ink), var(--ink)) center / 14px 2.4px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2.4px 14px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: -4px 4px 22px; max-width: 42em; color: var(--muted); font-size: 16px; }

/* Final call */
.final { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding-bottom: clamp(80px, 10vw, 120px); }
.final-icon { width: 128px; height: 128px; filter: drop-shadow(0 18px 24px rgba(60,45,15,.22)); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.final .meta { margin: 0; }

/* Footer */
.foot { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 28px 0 calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot .brand { color: var(--ink); font-size: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.foot p { margin: 0 0 0 auto; }
.author { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 800; text-decoration: none; }
.author:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .states { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .strip { height: 150px; }
  .strip.tall { height: auto; padding-bottom: 26px; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .priv { grid-template-columns: 1fr; text-align: left; }
  .priv-face { padding-top: 8px; }
}
@media (max-width: 760px) {
  .navlinks a.t { display: none; }
  .steps { grid-template-columns: 1fr; }
  .callout { left: 50%; top: -60px; width: 92%; transform: translateX(-50%) rotate(-2deg); text-align: center; font-size: 22px; white-space: normal; }
  .callout br { display: none; }
  .arrow { display: none; }
  .peek { --m: 46; top: -18px; left: 7%; }
  .demo { margin-top: 70px; }
  .foot p { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  .feats { grid-template-columns: 1fr; }
  .priv-face .mascot { --m: 110 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mark::before, .peek, .steps li, .faq summary::after { transition: none !important; }
  .final-icon { animation: none; }
}