@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/PlusJakartaSans-latin.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/Outfit-latin.woff2") format("woff2"); }

/* MacLenz website.
   The app's own palette: the Aslam HQ neutrals with one blue, running into cyan like the logo ring.
   No green, no lime. System fonts only, so the page makes no third-party requests, in line with the product. */

:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --raised: #f3f3f4;
  --ink: #252525;
  --muted: #5e5e66;
  --faint: #8a8a92;
  --line: #e8e8ea;
  --blue: #0a84ff;
  --cyan: #34d4ee;
  --blue-ink: #0a64d6;
  --blue-soft: #e8f2ff;
  --navy: #0b1020;
  --warn: #b25e00;
  --shadow: 0 30px 80px rgba(8, 13, 38, 0.18), 0 6px 18px rgba(8, 13, 38, 0.1);
  --font: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Outfit", "Plus Jakarta Sans", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --c-dev: #0a84ff; --c-work: #14b8c6; --c-com: #ff9500; --c-ent: #ff3b30; --c-soc: #a2845e; --c-learn: #af52de;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 18px;
  color-scheme: light;
}

/* Light is the default. Dark appears only when the visitor chooses it (the toggle in the header remembers it). */
:root[data-theme="dark"] {
  --bg: #0c0c0c;
  --surface: #161616;
  --raised: #1d1d1f;
  --ink: #f5f5f7;
  --muted: #a3a3ab;
  --faint: #75757d;
  --line: #272729;
  --blue: #3d9bff;
  --blue-ink: #6db3ff;
  --blue-soft: #10213b;
  --warn: #f0a54a;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-ink); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [role="tab"]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 8px;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.1; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7.4vw, 5rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 650; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--surface); padding: 10px 14px; border-radius: 8px; }

.kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-ink); }
.lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--muted); max-width: 40em; }
.gradient { background: linear-gradient(100deg, var(--blue), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 0.92em; }
.pro-tag { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); vertical-align: middle; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 22.5%; box-shadow: 0 2px 8px rgba(8, 13, 38, 0.3); }
.top nav { display: flex; gap: 6px; margin-left: auto; }
.top nav a { color: var(--muted); text-decoration: none; font-size: 0.95rem; font-weight: 600; padding: 8px 12px; border-radius: 999px; }
.top nav a:hover { color: var(--ink); background: var(--raised); }
.top nav a.btn-primary, .top nav a.btn-primary:hover { color: #fff; background: var(--blue); }
@media (max-width: 760px) { .top nav a:not(.btn) { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--blue) 40%, transparent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 50%, transparent); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--raised); }
.btn-sm { padding: 8px 18px; font-size: 0.92rem; }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }

/* hero */
.hero { text-align: center; padding-block: clamp(48px, 8vw, 104px) 0; overflow: hidden; }
.hero-icon { width: clamp(76px, 10vw, 100px); margin: 0 auto 24px; border-radius: 22.5%; box-shadow: 0 16px 40px rgba(8, 13, 38, 0.34), 0 2px 6px rgba(8, 13, 38, 0.24); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); font-size: 0.86rem; font-weight: 700; }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.hero h1 { margin: 22px auto 20px; max-width: 12em; }
.hero .lead { margin: 0 auto; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.meta { margin-top: 18px; font-size: 0.9rem; color: var(--faint); }
.hero-note { margin-top: 6px; font-size: 0.92rem; color: var(--muted); }
.window { margin: 56px auto 0; width: min(1080px, 100%); border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); border-bottom: 0; background: #0c0c0c; animation: bob 7s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; list-style: none; margin: 0; padding: 26px 20px; border-block: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 0.96rem; }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust svg { width: 18px; height: 18px; color: var(--blue); flex: none; }

section { padding-block: clamp(64px, 9vw, 120px); }
.alt { background: var(--surface); border-block: 1px solid var(--line); }
.head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; max-width: 46rem; }
.head.center { margin-inline: auto; text-align: center; align-items: center; }
.kid { font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--muted); }

.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.alt .card { background: var(--bg); }
.card p { color: var(--muted); font-size: 0.98rem; }
.num { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue-ink); font-weight: 800; font-size: 0.9rem; }
.icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-ink); }
.icon svg { width: 22px; height: 22px; }

.two { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: start; margin-top: 44px; }
@media (max-width: 800px) { .two { grid-template-columns: 1fr; } }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 4px; }
.panel { background: var(--blue-soft); border-radius: var(--radius); padding: 26px; }
.panel h3 { margin-bottom: 8px; }
details.curious { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: 0.95rem; }
details.curious summary { cursor: pointer; font-weight: 700; color: var(--ink); }
details.curious ul { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

/* screens */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.tabs button { font: inherit; font-weight: 700; font-size: 0.95rem; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.shot { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: #0c0c0c; }
.shot img { width: 100%; }
.shot[hidden] { display: none; }
.caption { text-align: center; color: var(--muted); margin-top: 18px; max-width: 40em; margin-inline: auto; }

/* private vault */
.vault { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; background: var(--navy); color: #eef1ff; border-radius: 28px; padding: clamp(28px, 5vw, 60px); overflow: hidden; position: relative; }
@media (max-width: 860px) { .vault { grid-template-columns: 1fr; } }
.vault .kicker { color: var(--cyan); }
.vault p { color: #b7c0e6; }
.vault ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vault li { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 0.9rem; font-weight: 600; }
.vault-art { display: flex; align-items: center; justify-content: center; gap: 0; }
.node { width: 140px; padding: 20px 10px; border-radius: 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 0.85rem; }
.node svg { width: 38px; height: 38px; }
.node strong { font-size: 0.98rem; }
.node.on { background: rgba(10, 132, 255, 0.18); border: 1.5px solid var(--blue); color: #fff; animation: glow 3.2s ease-in-out infinite; }
.node.off { border: 1.5px dashed rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.5); }
.gap { flex: 1; min-width: 46px; max-width: 90px; height: 2px; position: relative; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 6px, transparent 6px 12px); }
.gap::after { content: "×"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; background: #ff5f57; color: #fff; display: grid; place-items: center; font-weight: 800; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.4); } 50% { box-shadow: 0 0 0 14px rgba(10, 132, 255, 0); } }

/* pricing */
.toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); margin-bottom: 8px; }
.toggle button { font: inherit; font-weight: 700; font-size: 0.92rem; border: 0; background: transparent; color: var(--muted); padding: 8px 20px; border-radius: 999px; cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.toggle .save { font-size: 0.7rem; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); }
.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 880px; margin-inline: auto; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 34px; display: flex; flex-direction: column; gap: 18px; }
.plan.pro { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--blue), var(--cyan)) border-box; box-shadow: 0 24px 60px color-mix(in srgb, var(--blue) 18%, transparent); }
.plan .price { font-family: var(--display); font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.plan .price small { font-size: 1rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan .sub { color: var(--muted); font-size: 0.95rem; min-height: 1.5em; }
.plan .ticks li { font-size: 0.98rem; }
.plan .btn { margin-top: auto; }
.fine { text-align: center; color: var(--muted); font-size: 0.92rem; margin: 22px auto 0; max-width: 46em; }
.scroll-x { overflow-x: auto; margin-top: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 0.97rem; }
th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--raised); }
tr:last-child td { border-bottom: 0; }
td.c, th.c { text-align: center; }
.yes { color: var(--blue); font-weight: 800; }
.no { color: var(--faint); }

/* permissions, compat, faq */
.perm { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.perm .card { gap: 6px; }
.tag { font-size: 0.72rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--blue); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 12px; color: var(--muted); max-width: 44em; }

.final { text-align: center; background: var(--navy); color: #fff; border-radius: 32px; padding: clamp(40px, 7vw, 84px) 24px; }
.final h2 { max-width: 14em; margin-inline: auto; }
.final p { color: #b7c0e6; margin: 16px auto 28px; max-width: 34em; }

footer { padding-block: 44px 56px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; }
footer a { color: var(--muted); }
footer .links { display: flex; gap: 20px; flex-wrap: wrap; }

/* legal and thank-you pages */
.doc { padding-block: 56px 96px; }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 8px; }
.doc h2 { font-size: 1.45rem; margin: 40px 0 10px; letter-spacing: -0.02em; }
.doc p, .doc li { color: var(--muted); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.doc .updated { color: var(--faint); font-size: 0.92rem; margin-bottom: 28px; }
.steps-big { display: flex; flex-direction: column; gap: 14px; margin: 32px 0; }
.steps-big .card { flex-direction: row; gap: 18px; align-items: flex-start; }

/* scroll reveal: only when JS is on, and always from a visible state if it never fires */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .window, .node.on { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* theme toggle */
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; flex: none; transition: background 0.15s ease, transform 0.15s ease; }
.theme-toggle:hover { background: var(--raised); transform: rotate(12deg); }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.top .wrap { gap: 14px; }

/* hero glow and the video card */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; inset: -40px 0 auto 0; height: 560px; background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 70%); pointer-events: none; z-index: 0; }
.hero > .wrap { position: relative; z-index: 1; }
.video-card { position: relative; aspect-ratio: 2400 / 1309; cursor: pointer; }
.video-card .poster { width: 100%; height: 100%; object-fit: cover; }
.video-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 13, 38, 0) 40%, rgba(8, 13, 38, 0.45)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.video-card:hover::after, .video-card:focus-within::after { opacity: 1; }
.play { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 2; color: #fff; font: inherit; }
.play-icon { width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--blue); display: grid; place-items: center; box-shadow: 0 14px 40px rgba(8, 13, 38, 0.45); opacity: 0; transform: scale(0.86); transition: opacity 0.22s ease, transform 0.22s ease; }
.play-icon svg { width: 40%; height: 40%; fill: currentColor; }
.play-label { font-weight: 700; font-size: 0.98rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateY(6px); transition: opacity 0.22s ease 0.04s, transform 0.22s ease 0.04s; }
.video-card:hover .play-icon, .video-card:focus-within .play-icon { opacity: 1; transform: scale(1); }
.video-card:hover .play-label, .video-card:focus-within .play-label { opacity: 1; transform: none; }
.video-card:hover .play-icon { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 14px 40px rgba(8, 13, 38, 0.45), 0 0 0 0 rgba(255, 255, 255, 0.55); } 100% { box-shadow: 0 14px 40px rgba(8, 13, 38, 0.45), 0 0 0 22px rgba(255, 255, 255, 0); } }
@media (hover: none) { .play-icon, .play-label { opacity: 1; transform: none; } .video-card::after { opacity: 1; } }
.video-card.playing { animation: none; cursor: default; aspect-ratio: 16 / 9; }
.video-card.playing::after, .video-card.playing .play { display: none; }

/* pricing: the yearly saving */
.price-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan .billed { color: var(--muted); font-size: 0.95rem; min-height: 1.5em; }
.plan .billed s { color: var(--faint); text-decoration-thickness: 1.5px; margin-right: 4px; }
.plan .billed strong { color: var(--ink); }
.savebadge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 14px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-ink); font-weight: 750; font-size: 0.95rem; }
.savebadge svg { width: 18px; height: 18px; flex: none; }
.savebadge[hidden], .nudge[hidden], .ribbon[hidden] { display: none; }
.nudge { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--blue-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.plan { position: relative; }
.ribbon { position: absolute; top: -13px; right: 28px; background: linear-gradient(100deg, var(--blue), var(--cyan)); color: #fff; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; }

/* footer */
.site-footer { padding-block: 64px 36px; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.95rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; }
@media (max-width: 1060px) { .foot-grid { grid-template-columns: repeat(4, 1fr); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-brand p { margin: 14px 0 18px; max-width: 30em; }
.site-footer .fh { margin: 0 0 14px; font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.site-footer nav { display: flex; flex-direction: column; gap: 10px; }
.site-footer nav a { color: var(--muted); text-decoration: none; width: fit-content; overflow-wrap: anywhere; }
.site-footer nav a:hover { color: var(--blue-ink); text-decoration: underline; }
.foot-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 0.86rem; color: var(--faint); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.legal-nav a { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); text-decoration: none; font-weight: 650; font-size: 0.92rem; }
.legal-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }


/* screenshots: the light picture on the light theme, the dark one on the dark theme */
.only-dark { display: none !important; }
:root[data-theme="dark"] .only-dark { display: block !important; }
:root[data-theme="dark"] .only-light { display: none !important; }
.shot-frame { position: relative; margin: 0; }
.shot-frame img { width: 100%; height: auto; filter: drop-shadow(0 28px 60px rgba(8, 13, 38, 0.2)) drop-shadow(0 4px 12px rgba(8, 13, 38, 0.12)); }
:root[data-theme="dark"] .shot-frame img { filter: drop-shadow(0 28px 60px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 0 rgba(255,255,255,0.04)); }
.shot-frame.narrow { max-width: 680px; margin-inline: auto; }
.window.video-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; aspect-ratio: 2480 / 1488; }
.window.video-card .poster { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 70px rgba(8, 13, 38, 0.22)) drop-shadow(0 4px 12px rgba(8, 13, 38, 0.12)); }
.video-card.playing { aspect-ratio: 16 / 9; }
.video-card video { border-radius: 16px; box-shadow: var(--shadow); }
.video-card::after { border-radius: 16px; }

/* hero: drifting activity bars, the same bars the film opens with */
.hero-bars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-bars i { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 10px; border-radius: 99px; background: var(--c); opacity: 0.3; animation: drift var(--t, 12s) ease-in-out infinite alternate; }
@keyframes drift { to { transform: translateX(var(--dx, 36px)); opacity: 0.55; } }
@media (max-width: 760px) { .hero-bars { display: none; } }

/* feature rows: words on one side, a small moving drawing on the other */
.feature { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.feature.flip .feature-text { order: 2; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature.flip .feature-text { order: 0; } }
.feature-text { display: flex; flex-direction: column; gap: 16px; }
.feature-text .ticks { margin-top: 6px; }
.feature-shot { margin-top: clamp(36px, 5vw, 64px); }
.pro-note { display: inline-flex; gap: 8px; align-items: center; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); font-weight: 700; font-size: 0.86rem; }

.anim { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(18px, 3vw, 28px); box-shadow: 0 20px 50px color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; }
.alt .anim { background: var(--bg); }
.anim .cap { margin-top: 16px; font-size: 0.86rem; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 0.78rem; padding: 4px 11px; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* 1. the day band */
.day-apps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.day-band { position: relative; height: 64px; border-radius: 14px; background: var(--raised); overflow: hidden; }
.day-band i { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); background: var(--c); transform-origin: left center; animation: seg 11s calc(var(--k) * 0.5s) infinite both; }
@keyframes seg { 0% { transform: scaleX(0); opacity: 0; } 4% { opacity: 1; } 12% { transform: scaleX(1); } 86% { transform: scaleX(1); opacity: 1; } 95% { opacity: 0; transform: scaleX(1); } 100% { transform: scaleX(0); opacity: 0; } }
.day-cursor { position: absolute; top: -6px; bottom: -6px; width: 3px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 80%, transparent); animation: sweep 11s linear infinite; }
@keyframes sweep { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 80% { left: 100%; opacity: 1; } 84%, 100% { left: 100%; opacity: 0; } }
.day-hours { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.78rem; color: var(--faint); }
.day-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; font-size: 0.9rem; color: var(--muted); }
.day-stats strong { color: var(--ink); font-family: var(--display); font-size: 1.3rem; margin-left: 4px; }

/* 2. timeline rows */
.rows-search { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--raised); color: var(--faint); font-size: 0.9rem; margin-bottom: 14px; }
.rows-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rows li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); animation: rowin 9s calc(var(--k) * 0.55s) infinite both; }
.rows li:last-child { border-bottom: 0; }
.rows .ico { width: 34px; height: 34px; border-radius: 9px; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; }
.rows b { display: block; font-size: 0.92rem; }
.rows span { color: var(--muted); font-size: 0.82rem; }
.rows em { font-style: normal; font-weight: 700; font-size: 0.9rem; text-align: right; }
.rows small { display: block; color: var(--faint); font-weight: 500; font-size: 0.74rem; }
@keyframes rowin { 0% { opacity: 0; transform: translateY(16px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 92%, 100% { opacity: 0; transform: translateY(-6px); } }

/* 3. app bars */
.bars-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.bars-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; }
.bars-list .ico { width: 34px; height: 34px; border-radius: 9px; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; }
.bars-list .top { display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: 650; }
.bars-list .top span { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.bars-list .track { margin-top: 6px; height: 8px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.bars-list .track i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--c); transform-origin: left; animation: grow 9s calc(var(--k) * 0.4s) infinite both; }
@keyframes grow { 0% { transform: scaleX(0); } 16% { transform: scaleX(1); } 86% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* 4. memory: the desk and the storage room */
.mem-row { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 8px; align-items: center; }
.mem-box { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--bg); }
.alt .mem-box { background: var(--surface); }
.mem-box .mb-title { display: block; margin: 0 0 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mem-box .sub { display: block; margin-top: 10px; font-size: 0.74rem; color: var(--faint); }
.cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cells i { aspect-ratio: 1.35; border-radius: 6px; background: var(--raised); }
.ram .cells i { animation: ramfill 12s calc(var(--k) * 0.45s) infinite both; }
.ram .cells i.over { animation-name: ramover; }
.ssd .cells i.on { animation: ssdfill 12s calc(var(--k) * 0.3s) infinite both; }
@keyframes ramfill { 0% { background: var(--raised); } 4%, 90% { background: var(--c-dev); } 97%, 100% { background: var(--raised); } }
@keyframes ramover { 0% { background: var(--raised); } 4%, 36% { background: var(--c-dev); } 40%, 48% { background: var(--c-com); } 52%, 66% { background: var(--raised); } 72%, 90% { background: var(--c-dev); } 97%, 100% { background: var(--raised); } }
@keyframes ssdfill { 0%, 44% { background: var(--raised); } 52%, 88% { background: var(--c-com); } 96%, 100% { background: var(--raised); } }
.mem-wire { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.pkt { position: absolute; top: -6px; left: 0; width: 14px; height: 14px; border-radius: 5px; background: var(--c-com); opacity: 0; }
.pkt.out { animation: pktout 12s calc(var(--k) * 0.3s) infinite both; }
.pkt.back { background: var(--c-ent); animation: pktback 12s infinite both; }
@keyframes pktout { 0%, 39% { left: 0; opacity: 0; } 41% { opacity: 1; } 50% { left: calc(100% - 14px); opacity: 1; } 53%, 100% { left: calc(100% - 14px); opacity: 0; } }
@keyframes pktback { 0%, 70% { left: calc(100% - 14px); opacity: 0; } 72% { opacity: 1; } 84% { left: 0; opacity: 1; } 87%, 100% { left: 0; opacity: 0; } }
.mem-note { position: relative; height: 3.2em; margin-top: 18px; }
.mem-note span { position: absolute; inset: 0; font-size: 0.92rem; font-weight: 650; opacity: 0; }
.mem-note .fast { color: var(--ink); animation: showfast 12s infinite both; }
.mem-note .slow { color: var(--c-ent); animation: showslow 12s infinite both; }
@keyframes showfast { 0%, 3% { opacity: 0; } 7%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes showslow { 0%, 46% { opacity: 0; } 50%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.beat { width: 100%; height: 44px; margin-top: 6px; }
.beat path { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: beat 2.6s linear infinite; }
@keyframes beat { to { stroke-dashoffset: 0; } }

/* 5. optimization: they nap, you open one, it wakes */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; }
.tile { position: relative; border: 1px solid var(--line); background: var(--bg); border-radius: 16px; padding: 18px 6px 12px; text-align: center; font-weight: 650; font-size: 0.8rem; }
.alt .tile { background: var(--surface); }
.tile .ico { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 8px; display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--c); }
.tile small { display: block; font-weight: 500; color: var(--faint); font-size: 0.7rem; margin-top: 2px; }
.tile .zz { position: absolute; top: 8px; right: 10px; font-size: 0.78rem; font-weight: 800; color: var(--blue-ink); opacity: 0; }
.tile.front { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 20%, transparent); }
.tile.nap { animation: nap 10s infinite both; }
.tile.nap .zz { animation: zznap 10s infinite both; }
.tile.wake { animation: wake 10s infinite both; }
.tile.wake .zz { animation: zzwake 10s infinite both; }
@keyframes nap { 0%, 24% { opacity: 1; filter: none; } 32%, 92% { opacity: 0.5; filter: grayscale(1); } 98%, 100% { opacity: 1; filter: none; } }
@keyframes zznap { 0%, 26% { opacity: 0; } 34%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes wake { 0%, 24% { opacity: 1; filter: none; transform: none; } 32%, 70% { opacity: 0.5; filter: grayscale(1); } 75% { opacity: 1; filter: none; transform: scale(1.07); } 80%, 92% { opacity: 1; filter: none; transform: none; } 98%, 100% { opacity: 1; } }
@keyframes zzwake { 0%, 26% { opacity: 0; } 34%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
.cursor { position: absolute; width: 22px; height: 22px; left: 80%; top: 74px; opacity: 0; fill: var(--ink); stroke: var(--bg); stroke-width: 1.5; animation: cursor 10s infinite both; pointer-events: none; }
@keyframes cursor { 0%, 52% { left: 82%; top: 80px; opacity: 0; transform: scale(1); } 56% { opacity: 1; } 68% { left: 33%; top: 70px; opacity: 1; transform: scale(1); } 71% { transform: scale(0.82); } 74% { transform: scale(1); } 90% { left: 33%; top: 70px; opacity: 1; } 96%, 100% { opacity: 0; } }
.nap-cap { position: relative; height: 3.2em; margin-top: 18px; }
.nap-cap span { position: absolute; inset: 0; font-size: 0.92rem; font-weight: 650; opacity: 0; }
.nap-cap .a { animation: capA 10s infinite both; }
.nap-cap .b { animation: capB 10s infinite both; }
.nap-cap .c { animation: capC 10s infinite both; }
@keyframes capA { 0%, 2% { opacity: 0; } 6%, 24% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes capB { 0%, 30% { opacity: 0; } 34%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes capC { 0%, 72% { opacity: 0; } 76%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* 6. export and import */
.flow { position: relative; display: flex; align-items: center; }
.fnode { flex: none; width: 108px; border: 1px solid var(--line); border-radius: 16px; padding: 14px 8px 12px; text-align: center; background: var(--bg); font-weight: 650; font-size: 0.74rem; line-height: 1.3; }
.alt .fnode { background: var(--surface); }
.fnode small { display: block; font-weight: 500; color: var(--faint); font-size: 0.68rem; margin-top: 2px; }
.mini { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 38px; margin-bottom: 8px; }
.mini i { width: 9px; height: var(--h); background: var(--c); border-radius: 3px 3px 0 0; }
.target .mini i { animation: restore 10s calc(var(--k) * 0.1s) infinite both; }
@keyframes restore { 0%, 52% { height: 6%; opacity: 0.4; } 68% { height: var(--h); opacity: 1; } 92% { height: var(--h); } 100% { height: 6%; opacity: 0.4; } }
.fileicon { width: 34px; height: 42px; margin: 0 auto 8px; border-radius: 6px; background: var(--blue-soft); border: 1.5px solid var(--blue); display: grid; place-items: center; color: var(--blue-ink); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; }
.wire { flex: 1; min-width: 24px; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 8px, transparent 8px 16px); background-size: 16px 2px; animation: flowx 1s linear infinite; }
@keyframes flowx { to { background-position: 16px 0; } }
.csv { position: absolute; top: 50%; left: 15%; transform: translateY(-50%); padding: 3px 9px; border-radius: 7px; background: var(--blue); color: #fff; font-size: 0.68rem; font-weight: 800; box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 40%, transparent); opacity: 0; animation: csv 10s infinite both; }
@keyframes csv { 0%, 8% { left: 16%; opacity: 0; } 12% { opacity: 1; } 30% { left: 44%; opacity: 1; } 40% { left: 44%; opacity: 1; } 62% { left: 76%; opacity: 1; } 68%, 100% { left: 76%; opacity: 0; } }
.steps-mini { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 0.8rem; color: var(--faint); font-weight: 650; }
.steps-mini span { animation: stepglow 10s infinite both; }
.steps-mini span:nth-child(2) { animation-delay: 3.4s; }
.steps-mini span:nth-child(3) { animation-delay: 6.2s; }
@keyframes stepglow { 0%, 6% { color: var(--faint); } 12%, 30% { color: var(--blue-ink); } 38%, 100% { color: var(--faint); } }

/* 7. privacy: packets turn back at the gap */
.vault .gap::before { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); opacity: 0; animation: bounce 3.2s ease-in infinite; }
.vault .gap::after { z-index: 1; }
@keyframes bounce { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 42% { left: calc(50% - 22px); opacity: 1; } 52% { left: calc(50% - 30px); opacity: 0.6; } 75% { left: 0; opacity: 0.25; } 100% { left: 0; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-bars i, .day-band i, .day-cursor, .rows li, .bars-list .track i, .tile.nap, .tile.wake, .tile .zz, .cursor, .csv, .wire, .steps-mini span, .beat path, .vault .gap::before { animation: none !important; }
  .day-cursor, .cursor, .csv { display: none; }
  .ram .cells i { background: var(--c-dev); animation: none; }
  .ram .cells i.over { background: var(--c-com); }
  .ssd .cells i.on { background: var(--c-com); animation: none; }
  .pkt { display: none; }
  .mem-note .fast, .nap-cap .a, .nap-cap .c { display: none; }
  .mem-note .slow, .nap-cap .b { opacity: 1; animation: none; }
  .tile.nap, .tile.wake { opacity: 0.5; filter: grayscale(1); }
  .tile .zz { opacity: 1; }
  .beat path { stroke-dashoffset: 0; }
  .target .mini i { animation: none; }
}

/* narrow screens: the drawings shrink instead of running off the card */
@media (max-width: 560px) {
  .fnode { width: 29%; padding: 12px 4px 10px; font-size: 0.68rem; }
  .fnode small { font-size: 0.62rem; }
  .mini { gap: 3px; height: 30px; }
  .mini i { width: 7px; }
  .wire { min-width: 8px; }
  .steps-mini { font-size: 0.7rem; }
  .vault-art .node { width: auto; flex: 1; min-width: 0; max-width: 140px; }
  .vault-art .gap { min-width: 30px; }
  .mem-row { grid-template-columns: 1fr 34px 1fr; }
  .tile { padding: 14px 2px 10px; font-size: 0.72rem; }
  .tile .ico { width: 38px; height: 38px; }
}

/* ── Phones: a shorter page that shows more and says less ───────────────────────────────────────────
   Only at 760px and under. The desktop page is untouched. .m-hide leaves the phone page, .m-only is only on it. */
.m-only { display: none; }
.sub-h { margin: 56px 0 16px; }

@media (max-width: 760px) {
  .m-hide { display: none !important; }
  .m-only { display: inline; }
  body { font-size: 16px; }
  h2 { font-size: 1.65rem; }
  section { padding-block: 40px; }
  .head { margin-bottom: 22px; gap: 10px; }
  .head .kid { display: none; }

  /* header: logo on the left, Download and the theme switch on the right */
  .top .wrap { height: 56px; gap: 10px; }
  .top nav { gap: 8px; }

  /* hero */
  .hero { padding-block: 28px 0; }
  .hero-icon { width: 60px; margin-bottom: 14px; }
  .eyebrow { padding: 4px 11px; gap: 6px; font-size: min(0.74rem, 3.1vw); white-space: nowrap; }
  .eyebrow i { width: 6px; height: 6px; }
  .hero h1 { font-size: 2.15rem; margin: 14px auto 12px; }
  .hero .lead { font-size: 1rem; }
  .cta-row { margin-top: 20px; gap: 10px; }
  .cta-row .btn { padding: 11px 20px; font-size: 0.96rem; }
  .meta { margin-top: 12px; font-size: 0.8rem; }
  .window { margin-top: 22px; }
  .play-label { font-size: 0.82rem; }

  .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 16px 20px; font-size: 0.78rem; line-height: 1.35; }
  .trust li { gap: 6px; align-items: flex-start; }
  .trust svg { width: 15px; height: 15px; margin-top: 1px; }

  /* cards sit in a row you swipe, not a tall stack */
  .cards, .perm { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -20px; padding: 2px 20px 10px; scroll-padding-inline: 20px; scrollbar-width: none; }
  .cards::-webkit-scrollbar, .perm::-webkit-scrollbar { display: none; }
  .cards > .card, .perm > .card { flex: 0 0 78%; scroll-snap-align: start; padding: 18px; }
  .js .cards .reveal, .js .perm .reveal { opacity: 1; transform: none; }
  .card p { font-size: 0.92rem; }
  .sub-h { margin: 26px 0 10px; font-size: 1.05rem; }

  /* the feature sections: title, the picture, then the three short points */
  .feature { gap: 14px; }
  .feature-text { display: contents; }
  .feature-text .kicker { order: 1; }
  .feature-text h2 { order: 2; }
  .feature > .anim { order: 3; }
  .feature-text .ticks { order: 4; font-size: 0.94rem; }
  .feature-text .pro-note { order: 5; }
  .feature-text .kid, .feature-shot, .panel, details.curious { display: none; }
  .ticks { gap: 8px; }
  .ticks li { gap: 10px; }
  .ticks svg { width: 18px; height: 18px; margin-top: 3px; }
  .anim { border-radius: 18px; padding: 14px; }
  .two { margin-top: 20px; gap: 0; }
  .two h3 { font-size: 1.05rem; }
  .anim-day { margin-bottom: 20px !important; }

  /* privacy */
  .vault { padding: 22px; gap: 22px; border-radius: 22px; }
  .vault > div:first-child > p { display: none; }
  .vault ul { margin-top: 14px; gap: 8px; }
  .vault li { padding: 5px 11px; font-size: 0.82rem; }
  #privacy .cards { margin-top: 14px !important; }

  /* pricing */
  .plans { gap: 14px; }
  .plan { padding: 22px; gap: 12px; border-radius: 20px; }
  .plan .price { font-size: 2.3rem; }
  .plan .ticks li { font-size: 0.9rem; }
  .plan .sub, .plan .billed { font-size: 0.88rem; }
  #pricing .scroll-x { display: none; }
  .fine { font-size: 0.8rem; margin-top: 14px; }

  /* questions, the closing card and the footer */
  .faq details { padding: 14px 0; }
  .faq summary { font-size: 0.98rem; }
  .faq p { font-size: 0.94rem; }
  .final { padding: 30px 20px; border-radius: 24px; }
  .final p { margin: 12px auto 20px; font-size: 0.96rem; }
  .site-footer { padding-block: 32px 22px; }
  .foot-grid { gap: 20px; }
  .foot-brand p, .foot-brand .btn { display: none; }
  .site-footer nav { gap: 6px; }
  .foot-base { margin-top: 22px; padding-top: 16px; font-size: 0.76rem; }
}

/* ── Coming-soon dialog (assets/notify.js) ───────────────────────────────────────────────────────── */
.notify { border: 1px solid var(--line); border-radius: 24px; padding: 34px 30px 26px; width: min(460px, calc(100% - 32px)); background: var(--bg); color: var(--ink); box-shadow: var(--shadow); text-align: center; }
.notify::backdrop { background: rgba(5, 9, 24, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.notify[open] { animation: notify-in 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes notify-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.notify-x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--raised); color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.notify-x:hover { color: var(--ink); }
.notify-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.notify-badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: notify-pulse 1.6s ease-in-out infinite; }
@keyframes notify-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
.notify h2 { font-size: 1.7rem; margin: 16px 0 10px; }
.notify-lead { color: var(--muted); font-size: 1rem; }
.notify-form { margin-top: 22px; text-align: left; }
.notify-label { display: block; font-size: 0.86rem; font-weight: 700; margin-bottom: 6px; }
.notify-row { display: flex; gap: 10px; }
.notify-row input { flex: 1; min-width: 0; font: inherit; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.notify-row input:focus { outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); border-color: var(--blue); }
.notify-row .btn { padding: 12px 22px; white-space: nowrap; }
.notify-row .btn:disabled { opacity: 0.6; cursor: wait; }
.notify [hidden] { display: none !important; }
.notify-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.notify-msg { min-height: 1.4em; margin-top: 10px; font-size: 0.92rem; color: var(--muted); }
.notify-msg.ok { color: var(--blue-ink); font-weight: 650; text-align: center; font-size: 1rem; }
.notify-msg.bad { color: var(--warn); }
.notify-fine { margin-top: 14px; font-size: 0.8rem; color: var(--faint); }
@media (max-width: 460px) { .notify { padding: 30px 20px 22px; } .notify-row { flex-direction: column; } }
.foot-base a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot-base a:hover { color: var(--blue-ink); }

/* Links to the maker's site turn the neon of aslamsarfraz.dev on hover. The dark chip keeps it readable on the light theme. */
a[href^="https://aslamsarfraz.dev"]:hover, a[href^="https://aslamsarfraz.dev"]:focus-visible { color: #b8f01a !important; background: #0b1020; border-radius: 6px; box-shadow: 0 0 0 4px #0b1020; text-shadow: 0 0 14px rgba(184, 240, 26, 0.55); text-decoration-color: #b8f01a; transition: color 0.15s ease; }

/* links from the home page into the feature pages, and the maker block */
.more-link { margin-top: 2px; font-weight: 700; }
.more-link a { color: var(--blue-ink); text-decoration: none; }
.more-link a:hover { text-decoration: underline; }
.maker { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
@media (max-width: 760px) { .feature-text .more-link { order: 6; } .maker { gap: 16px; } .maker .btn { width: 100%; } }