/* Highlightr site styles: design tokens from the design system + page helpers. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/instrument-sans.woff2") format("woff2");}
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/caveat.woff2") format("woff2");}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/geist-mono-400.woff2") format("woff2");}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/geist-mono-500.woff2") format("woff2");}

:root{
/* Paper — warm notebook white */
--paper-0:#FFFFFF;--paper-1:#FCFBF6;--paper-2:#F5F2E9;--paper-3:#ECE8DC;--paper-4:#D9D4C6;
/* Ink — soft near-black */
--ink-1:#1D1D24;--ink-2:#34343C;--ink-3:#5F5D68;--ink-4:#8C8A94;
/* Markers — neon highlighter inks. Use as fills behind ink text, never as text. */
--marker-yellow:oklch(0.95 0.21 108);--marker-yellow-end:oklch(0.92 0.22 104);
--marker-pink:oklch(0.8 0.19 352);--marker-pink-end:oklch(0.76 0.22 352);
--marker-green:oklch(0.91 0.22 140);--marker-green-end:oklch(0.88 0.24 140);
--marker-blue:oklch(0.86 0.14 215);--marker-blue-end:oklch(0.82 0.16 220);
/* Marker inks — deep versions for handwritten notes and text on paper */
--pen-pink:oklch(0.58 0.2 352);--pen-green:oklch(0.52 0.15 150);--pen-blue:oklch(0.5 0.13 240);
/* Ghost — the suggestion text. Sits on a yellow marker swipe. */
--ghost:#5F5D68;--ghost-dark:#9A98A4;
/* Ember — legacy name, now the pink marker family */
--ember-50:oklch(0.97 0.03 352);--ember-100:oklch(0.93 0.07 352);--ember-300:var(--marker-pink);--ember-500:var(--pen-pink);--ember-600:oklch(0.52 0.2 352);--ember-700:oklch(0.44 0.17 352);
/* Pops — legacy names mapped to markers */
--pop-yellow:var(--marker-yellow);--pop-blue:var(--marker-blue);--pop-blue-soft:oklch(0.95 0.05 215);
/* Night — ink-dark panels (tray menu, dark sections) */
--night-0:#121217;--night-1:#1D1D24;--night-2:#2A2A33;--night-3:#3A3A45;--night-4:#5A5A66;--night-fg:#FCFBF6;--night-fg-2:#C3C1CB;
/* Semantic */
--moss-100:oklch(0.95 0.09 140);--moss-500:var(--pen-green);--moss-700:oklch(0.42 0.12 150);
--amber-100:oklch(0.97 0.1 105);--amber-500:var(--marker-yellow);
--red-100:oklch(0.94 0.04 25);--red-500:oklch(0.55 0.2 25);
/* Aliases */
--bg-page:var(--paper-1);--bg-sunken:var(--paper-2);--surface-card:var(--paper-0);--surface-raised:#FFFFFF;--surface-dark:var(--night-1);
--border-subtle:#E6E2D6;--border-strong:var(--ink-1);--border-dark:#000000;
--text-strong:var(--ink-1);--text-body:var(--ink-2);--text-muted:var(--ink-3);--text-faint:var(--ink-4);--text-ghost:var(--ghost);--text-on-dark:var(--night-fg);--text-on-dark-muted:var(--night-fg-2);--text-on-accent:#FFFFFF;
--accent:var(--ink-1);--accent-hover:#000000;--accent-press:#000000;--accent-soft:var(--amber-100);--caret:var(--ink-1);--highlight:var(--marker-yellow);
--status-local:var(--pen-green);--status-local-soft:var(--moss-100);--status-warn:#7A6400;--status-warn-soft:var(--amber-100);--status-error:var(--red-500);--status-error-soft:var(--red-100);
--focus-ring:0 0 0 3px var(--marker-yellow),0 0 0 4.5px var(--ink-1);
}

:root{
--font-display:"Instrument Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
--font-sans:"Instrument Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
--font-hand:"Caveat","Bradley Hand","Segoe Print",cursive;
--font-mono:"Geist Mono",ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,"DejaVu Sans Mono",monospace;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;
/* Display — Instrument Sans 600, tight */
--fs-display-xl:96px;--lh-display-xl:0.98;--ls-display-xl:-0.03em;
--fs-display-l:68px;--lh-display-l:1.02;--ls-display-l:-0.025em;
--fs-display-m:46px;--lh-display-m:1.08;--ls-display-m:-0.02em;
--fs-display-s:32px;--lh-display-s:1.15;--ls-display-s:-0.015em;
/* Sans */
--fs-title:22px;--lh-title:1.3;--ls-title:-0.01em;
--fs-lead:19px;--lh-lead:1.5;
--fs-body:17px;--lh-body:1.55;
--fs-small:14px;--lh-small:1.5;
--fs-ui:14px;--lh-ui:1.38;
--fs-caption:12px;--lh-caption:1.35;
--fs-eyebrow:11px;--ls-eyebrow:0.08em;
--fs-mono:13px;--lh-mono:1.5;
--fs-note:26px;--lh-note:1.05;
/* Semantic aliases */
--type-hero:var(--fw-semibold) var(--fs-display-xl)/var(--lh-display-xl) var(--font-display);
--type-h1:var(--fw-semibold) var(--fs-display-l)/var(--lh-display-l) var(--font-display);
--type-h2:var(--fw-semibold) var(--fs-display-m)/var(--lh-display-m) var(--font-display);
--type-h3:var(--fw-semibold) var(--fs-title)/var(--lh-title) var(--font-sans);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
--type-ui:var(--fw-regular) var(--fs-ui)/var(--lh-ui) var(--font-sans);
--type-mono:var(--fw-regular) var(--fs-mono)/var(--lh-mono) var(--font-mono);
--type-note:600 var(--fs-note)/var(--lh-note) var(--font-hand);
}

:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:56px;--space-11:80px;--space-12:120px;
--radius-xs:3px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:14px;--radius-2xl:20px;--radius-pill:999px;
--line:1.5px;--line-bold:1.5px;--line-hair:1px;
--content-max:1160px;--prose-max:640px;
}

:root{
/* Soft paper shadows — subtle, outlines do most of the work */
--shadow-xs:0 1px 0 rgba(29,29,36,.06);
--shadow-sm:0 1px 2px rgba(29,29,36,.06),0 2px 6px rgba(29,29,36,.05);
--shadow-md:0 2px 4px rgba(29,29,36,.05),0 8px 20px rgba(29,29,36,.08);
--shadow-lg:0 4px 8px rgba(29,29,36,.05),0 18px 40px rgba(29,29,36,.12);
--shadow-panel:0 12px 32px rgba(0,0,0,.32);
--shadow-window:0 1px 0 rgba(29,29,36,.04),0 18px 48px rgba(29,29,36,.14);
--shadow-key:0 1.5px 0 #1D1D24;
--shadow-press:none;
/* Paper textures (legacy names kept) */
--ruled:repeating-linear-gradient(180deg,transparent 0 31px,rgba(29,29,36,.07) 31px 32px);
--halftone:var(--ruled);
--halftone-red:radial-gradient(rgba(29,29,36,.12) 1px,transparent 1.4px) 0 0/18px 18px;
--blur-panel:none;
--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-in-out:cubic-bezier(.6,0,.3,1);
--dur-fast:120ms;--dur-base:200ms;--dur-slow:360ms;--dur-caret:1.05s;--dur-swipe:420ms;
}

@keyframes mt-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes mt-ghost-in{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes mt-pop{0%{transform:scale(.96) translateY(4px);opacity:0}100%{transform:none;opacity:1}}
@keyframes mt-swipe{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
a{color:var(--ink-1);font-weight:600;text-decoration:underline;text-decoration-color:var(--marker-pink);text-decoration-thickness:3px;text-underline-offset:3px}
a:hover{color:var(--ink-1);background:var(--marker-yellow)}
::selection{background:var(--marker-yellow);color:var(--ink-1)}
.mt-halftone,.mt-ruled{background-image:var(--ruled)}
/* Marker — realistic highlighter swipe. Two overlapping strokes, rough edges (needs #mt-marker-rough, injected by the Marker component), chisel ends. */
.mt-marker{position:relative;isolation:isolate;padding:0 .12em;white-space:nowrap}
.mt-marker::before,.mt-marker::after{content:"";position:absolute;z-index:-1;mix-blend-mode:multiply;filter:url(#mt-marker-rough);pointer-events:none;opacity:.9;background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px),linear-gradient(90deg,var(--marker-yellow-end) 0,var(--marker-yellow) 4%,var(--marker-yellow) 92%,var(--marker-yellow-end) 100%)}
.mt-marker--pink::before,.mt-marker--pink::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px),linear-gradient(90deg,var(--marker-pink-end) 0,var(--marker-pink) 4%,var(--marker-pink) 92%,var(--marker-pink-end) 100%)}
.mt-marker--green::before,.mt-marker--green::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px),linear-gradient(90deg,var(--marker-green-end) 0,var(--marker-green) 4%,var(--marker-green) 92%,var(--marker-green-end) 100%)}
.mt-marker--blue::before,.mt-marker--blue::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px),linear-gradient(90deg,var(--marker-blue-end) 0,var(--marker-blue) 4%,var(--marker-blue) 92%,var(--marker-blue-end) 100%)}
.mt-marker--wrap{white-space:normal;padding:.02em .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(90deg,var(--marker-yellow-end),var(--marker-yellow) 5%,var(--marker-yellow) 95%,var(--marker-yellow-end));border-radius:.1em .4em .15em .45em}.mt-marker--wrap::before,.mt-marker--wrap::after{display:none}
.mt-marker--wrap.mt-marker--pink{background:linear-gradient(90deg,var(--marker-pink-end),var(--marker-pink) 5%,var(--marker-pink) 95%,var(--marker-pink-end))}.mt-marker--wrap.mt-marker--green{background:linear-gradient(90deg,var(--marker-green-end),var(--marker-green) 5%,var(--marker-green) 95%,var(--marker-green-end))}.mt-marker--wrap.mt-marker--blue{background:linear-gradient(90deg,var(--marker-blue-end),var(--marker-blue) 5%,var(--marker-blue) 95%,var(--marker-blue-end))}
.mt-marker::before{left:-.22em;right:-.05em;top:.1em;bottom:.12em;transform:rotate(-.7deg);clip-path:polygon(1.5% 6%,99% 0,100% 94%,0 100%)}
.mt-marker::after{left:.15em;right:-.3em;top:.42em;bottom:-.1em;transform:rotate(.5deg);clip-path:polygon(0 0,98% 8%,100% 100%,2% 92%);opacity:.45}
.mt-marker--one::after{display:none}.mt-marker--one::before{top:.05em;bottom:-.02em}
.mt-marker--swipe::before,.mt-marker--swipe::after{-webkit-mask-image:linear-gradient(90deg,#000 50%,transparent 50%);mask-image:linear-gradient(90deg,#000 50%,transparent 50%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:mt-swipe var(--dur-swipe) var(--ease-out) both}


html{scroll-behavior:smooth}body{margin:0;background:var(--bg-page);font-family:var(--font-sans);color:var(--ink-1);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}
a{color:var(--ink-1)}a:hover{color:var(--ink-1);background:var(--marker-yellow)}
.hl-plain{text-decoration:none!important}
.hl-logo,.hl-logo:hover{background:none!important;text-decoration:none!important}
.hl-nolink,.hl-nolink:hover{background:none!important;text-decoration:none!important}
.hl-foot a{color:var(--ink-2);font-weight:500;text-decoration:none}.hl-foot a:hover{color:var(--ink-1);background:var(--marker-yellow)}
.hl-q:hover{background:var(--paper-2)}
@keyframes hl-bar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes hl-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes hl-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes hl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}
@keyframes hl-fill{from{width:0}to{width:100%}}
@keyframes hl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hl-marquee-track{animation:hl-marquee 60s linear infinite}.hl-marquee:hover .hl-marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hl-marquee{overflow-x:auto}.hl-marquee-track{animation:none!important}}
/* Contact form fields, matching the design system Input */
.hl-field{width:100%;min-height:44px;padding:10px 12px;border-radius:8px;background:var(--surface-raised);border:var(--line) solid var(--border-strong);box-shadow:var(--shadow-xs);font:400 16px/1.4 var(--font-sans);color:var(--ink-1);transition:box-shadow var(--dur-fast)}
.hl-field::placeholder{color:var(--ink-4)}
.hl-field:focus{outline:0;box-shadow:var(--focus-ring)}
.hl-field[aria-invalid="true"]{border-color:var(--red-500)}
textarea.hl-field{min-height:160px;resize:vertical}
select.hl-field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-1) 50%),linear-gradient(135deg,var(--ink-1) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
/* Dark link styled as a button (e.g. the email buttons) */
.hl-btn,.hl-btn:hover{text-decoration:none!important;background:var(--ink-1)!important;color:var(--paper-0)!important}.hl-btn:hover{background:#000!important}
/* 2026 refresh: white page, soft surfaces, pill buttons, colour-coded feature chips */
:root{--bg-page:#FFFFFF;--border-soft:rgba(29,29,36,.1);--glass:rgba(255,255,255,.72);--radius-window:16px;
--shadow-soft:0 30px 80px -20px rgba(29,29,36,.18),0 8px 24px -8px rgba(29,29,36,.08)}
.hl-pill{border-radius:999px!important;transition:transform var(--dur-base) var(--ease-out),background var(--dur-fast) var(--ease-out)!important}
.hl-pill:hover{transform:scale(1.03)!important}.hl-pill:active{transform:scale(.98)!important}
.hl-pill--light{background:var(--paper-0)!important;border-color:rgba(29,29,36,.18)!important}.hl-pill--light:hover{background:var(--paper-2)!important}
.hl-pill:focus-visible,.hl-chip:focus-visible,.hl-beta:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.hl-beta{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(29,29,36,.045);font:500 14px/1 var(--font-sans);color:var(--ink-1);text-decoration:none!important;transition:background var(--dur-base) var(--ease-out)}
.hl-beta:hover{background:rgba(29,29,36,.08)}
.hl-chip{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:0;border-radius:999px;background:var(--paper-0);box-shadow:0 0 0 1px var(--border-soft);font:600 15px/1 var(--font-sans);color:var(--ink-1);cursor:pointer;transition:background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.hl-chip i{width:11px;height:11px;border-radius:3px;background:var(--c);transform:rotate(-8deg);transition:background var(--dur-base)}
.hl-chip:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(29,29,36,.18),0 6px 16px -6px rgba(29,29,36,.18)}
.hl-chip[aria-selected="true"]{background:var(--c);box-shadow:none}.hl-chip[aria-selected="true"] i{background:var(--ink-1)}
.hl-beta{white-space:nowrap}@media (max-width:480px){.hl-beta-more{display:none}}
/* Feature cards: white card, colour-coded stage that holds the demo */
.hl-card{display:flex;flex-direction:column;background:var(--paper-0);border-radius:28px;box-shadow:0 0 0 1px var(--border-soft);transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out)}
.hl-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--border-soft),0 28px 56px -28px rgba(29,29,36,.3)}
.hl-card-stage{flex:1;display:flex;flex-direction:column;justify-content:center;margin:0 10px 10px;padding:clamp(16px,3vw,32px);border-radius:20px;background:var(--c)}
.hl-tag{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--font-sans);color:var(--ink-2)}
.hl-tag i{width:10px;height:10px;border-radius:3px;background:var(--c);transform:rotate(-8deg)}
.hl-more{display:inline-block;margin-bottom:8px;font:600 28px/1 var(--font-hand);color:var(--pen-pink);text-decoration:none!important;transform:rotate(-3deg);transition:transform var(--dur-base) var(--ease-out)}
.hl-more:hover{background:none;color:var(--pen-pink);transform:rotate(-3deg) translateX(4px)}
/* Price comparison: soft grey section, subscriptions get struck through when scrolled into view */
:root{--surface-soft:#F5F5F7}
.hl-cost-row{display:flex;align-items:center;gap:14px;padding:20px 0;border-bottom:1px solid var(--border-soft)}
.hl-cost-icon{flex:none;width:40px;height:40px;border-radius:12px;background:var(--c);display:flex;align-items:center;justify-content:center}
.hl-cost-price{position:relative;font:500 24px/1 var(--font-mono);letter-spacing:-.04em;white-space:nowrap;transition:color var(--dur-slow) calc(var(--i) * 180ms + 300ms)}
.hl-cost-price::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:3px;border-radius:2px;background:var(--pen-pink);transform:scaleX(0) rotate(-4deg);transform-origin:left;transition:transform 420ms var(--ease-out) calc(var(--i) * 180ms + 300ms)}
.hl-cost.is-seen .hl-cost-price{color:var(--ink-4)}
.hl-cost.is-seen .hl-cost-price::after{transform:scaleX(1) rotate(-4deg)}
/* How it works: three soft grey tiles */
.hl-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;counter-reset:none}
.hl-step{position:relative;padding:28px;border-radius:24px;background:var(--surface-soft);transition:transform var(--dur-slow) var(--ease-out),background var(--dur-slow)}
.hl-step:hover{transform:translateY(-3px);background:#EFEFF2}
.hl-step-num{width:36px;height:36px;border-radius:50%;background:var(--ink-1);color:var(--paper-0);display:flex;align-items:center;justify-content:center;font:600 16px/1 var(--font-display)}
.hl-foot a:hover{background:none;color:var(--ink-1);text-decoration:underline;text-decoration-color:var(--marker-pink);text-decoration-thickness:2px}
/* Final CTA headline: the design system Suggestion uses body line-height, tighten it for display size */
.hl-final>span{line-height:1.08!important;letter-spacing:-.035em!important}
/* Works where you write: quiet app pills */
.hl-app{font:500 16px/1 var(--font-sans);padding:12px 20px;border-radius:999px;background:var(--surface-soft);color:var(--ink-1);transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.hl-app:hover{background:#EBEBEF;transform:translateY(-1px)}
/* Features page: colour stage behind each demo, soft keycaps, compare marks */
.hl-stage{padding:clamp(18px,3.5vw,40px);border-radius:28px;background:var(--c)}
a.hl-chip:hover{background:var(--c);box-shadow:none}
.hl-keycap{display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 16px;background:var(--paper-0);border-radius:14px;box-shadow:0 0 0 1px var(--border-soft),0 3px 0 rgba(29,29,36,.12),0 8px 20px -10px rgba(29,29,36,.25);font:500 22px/1 var(--font-mono);color:var(--ink-1)}
.hl-mark{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center}
.hl-mark--yes{background:var(--marker-green)}.hl-mark--no{background:var(--surface-soft)}
/* FAQ search field */
.hl-search{display:flex;align-items:center;gap:10px;max-width:520px;margin:36px auto 0;padding:0 18px;height:52px;border-radius:999px;background:var(--surface-soft);transition:box-shadow var(--dur-base),background var(--dur-base)}
.hl-search:focus-within{background:var(--paper-0);box-shadow:0 0 0 1px var(--border-soft),0 8px 24px -10px rgba(29,29,36,.25)}
.hl-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;font:400 16px/1 var(--font-sans);color:var(--ink-1)}
.hl-search input::placeholder{color:var(--ink-4)}
.hl-q:hover{background:var(--surface-soft)}