/* Finy's marketing site. Ivory by day, Night by night, in the family's look:
   warm paper, quiet ink, serif figures, Manrope for everything else. */

@font-face{font-family:'Manrope';font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/Manrope_400Regular.ttf) format('truetype')}
@font-face{font-family:'Manrope Medium';font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/Manrope_500Medium.ttf) format('truetype')}
@font-face{font-family:'Manrope SemiBold';font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/Manrope_600SemiBold.ttf) format('truetype')}
@font-face{font-family:'Plex Light';font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/IBMPlexSerif_300Light.ttf) format('truetype')}
@font-face{font-family:'Plex Light';font-weight:400;font-style:italic;font-display:swap;src:url(assets/fonts/IBMPlexSerif_300Light_Italic.ttf) format('truetype')}
@font-face{font-family:'Plex';font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/IBMPlexSerif_400Regular.ttf) format('truetype')}
@font-face{font-family:'Plex';font-weight:400;font-style:italic;font-display:swap;src:url(assets/fonts/IBMPlexSerif_400Regular_Italic.ttf) format('truetype')}

:root{
  --canvas:#f4f1ea;--card:#fdfcf8;--ink:#1a1713;--muted:#6b655b;--faint:#9a9488;
  --line:rgba(26,23,19,.1);--line-strong:rgba(26,23,19,.16);--accent:#d9480a;--alert:#bf4009;
  --brand:#1c6b6c;--income:#3f6b2f;
  --food:#a83a16;--shopping:#7a4a9a;--housing:#875808;--transport:#4a5c70;--vehicle:#3d4c9a;--life:#a8445f;--communication:#2b6a92;--financial:#5a6e2a;
  --shadow:0 1px 2px rgba(26,23,19,.04),0 12px 32px -16px rgba(26,23,19,.16);
  --phone-shadow:0 30px 60px -30px rgba(26,23,19,.35);
  --serif:'Plex Light','IBM Plex Serif',Georgia,serif;--serif-regular:'Plex','IBM Plex Serif',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;--sans-medium:'Manrope Medium','Manrope',system-ui,sans-serif;--sans-semibold:'Manrope SemiBold','Manrope',system-ui,sans-serif;
  --settle:cubic-bezier(.16,1,.3,1);--drift:cubic-bezier(.37,0,.63,1);
  --tide:linear-gradient(165deg,#0d3540 0%,#1c6b6c 55%,#3f8f84 100%);
  --radius:18px;--footer-bg:#1a1713;--footer-ink:#f4f1ea;--footer-line:rgba(244,241,234,.18);
  color-scheme:light;
}
:root[data-theme=dark]{
  --canvas:#0d0d0d;--card:#161616;--ink:#fafafa;--muted:rgba(255,255,255,.55);--faint:rgba(255,255,255,.36);
  --line:rgba(255,255,255,.1);--line-strong:rgba(255,255,255,.16);--accent:#ff6b35;--alert:#ff6b35;
  --brand:#5db3a5;--income:#9cbc88;
  --food:#ff9a6b;--shopping:#c9a3e0;--housing:#e6b457;--transport:#a3b7cb;--vehicle:#aab5ee;--life:#e8a3b0;--communication:#8cc5e5;--financial:#c3cd7a;
  --shadow:0 18px 40px -24px rgba(0,0,0,.8);--phone-shadow:0 30px 60px -30px rgba(0,0,0,.9);--footer-bg:#161616;--footer-ink:#fafafa;--footer-line:rgba(255,255,255,.12);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --canvas:#0d0d0d;--card:#161616;--ink:#fafafa;--muted:rgba(255,255,255,.55);--faint:rgba(255,255,255,.36);
    --line:rgba(255,255,255,.1);--line-strong:rgba(255,255,255,.16);--accent:#ff6b35;--alert:#ff6b35;
    --brand:#5db3a5;--income:#9cbc88;
    --food:#ff9a6b;--shopping:#c9a3e0;--housing:#e6b457;--transport:#a3b7cb;--vehicle:#aab5ee;--life:#e8a3b0;--communication:#8cc5e5;--financial:#c3cd7a;
    --shadow:0 18px 40px -24px rgba(0,0,0,.8);--phone-shadow:0 30px 60px -30px rgba(0,0,0,.9);--footer-bg:#161616;--footer-ink:#fafafa;--footer-line:rgba(255,255,255,.12);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.6 var(--sans);overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
h1,h2,h3,h4{font-weight:400}
ul,ol{padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%}
em{font-style:italic;font-family:inherit}
strong,b{font-family:var(--sans-semibold);font-weight:400}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
::selection{background:rgba(28,107,108,.22)}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--card);padding:12px 16px;border:1px solid var(--line-strong);border-radius:24px}
.skip:focus{top:16px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Type. Figures and dates in the serif, light. */
.serif{font-family:var(--serif)}
.figure{font-family:var(--serif);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.eyebrow{font-family:var(--sans-medium);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
h2{font:300 clamp(34px,4.4vw,62px)/1.12 var(--serif);letter-spacing:-.03em}
h2 em,h1 em,h3 em{color:var(--brand);font-style:italic}
.lede{font-size:16px;color:var(--muted);max-width:520px}

/* Frame: the page sits inside a 12px gutter, sections rounded, as the parent site's does. */
.page{padding:12px;max-width:1720px;margin:auto}
.wrap{padding:100px 5%;max-width:1480px;margin:0 auto}
section[id]{scroll-margin-top:12px}

/* The brand: the lit dot, the name beside it. */
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans-medium);font-size:16px}
.brand-dot{width:14px;height:14px;border-radius:50%;background:
  radial-gradient(circle at 62% 70%,rgba(150,222,200,.6),transparent 45%),
  radial-gradient(circle at 25% 20%,rgba(4,26,34,.85),transparent 50%),
  var(--tide);flex:none}

/* Header */
header.site{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 4%;position:relative;z-index:3}
.nav{display:flex;gap:30px;font-size:13px;font-family:var(--sans-medium)}
.nav a{opacity:.85;transition:opacity .2s var(--drift);padding-bottom:3px;border-bottom:1px solid transparent}
.nav a:hover{opacity:1}
.nav a[aria-current=page]{border-bottom-color:currentColor}
.head-actions{display:flex;align-items:center;gap:14px}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;background:transparent;transition:background .2s var(--drift)}
.theme-toggle:hover{background:var(--card)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
:root[data-theme=dark] .theme-toggle .sun{display:none}
:root[data-theme=dark] .theme-toggle .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .theme-toggle .sun{display:none}
  :root:not([data-theme=light]) .theme-toggle .moon{display:block}
}
.text-link{font-size:13px;font-family:var(--sans-medium);border-bottom:1px solid currentColor;padding-bottom:3px;white-space:nowrap}
.text-link span{margin-left:10px}
.menu-toggle{display:none}

/* Pill: the one action, in ink. */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 24px;border-radius:24px;background:var(--ink);color:var(--canvas);font-family:var(--sans-medium);font-size:15px;transition:transform .42s var(--settle),opacity .22s var(--drift);white-space:nowrap}
.pill:hover{transform:translateY(-2px)}
.pill.quiet{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.pill svg{width:16px;height:16px}

/* Hero */
.hero{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;min-height:min(92svh,980px);display:flex;flex-direction:column}
.hero-body{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:30px 5% 50px;flex:1}
.hero h1{font:300 clamp(44px,6.2vw,96px)/1.05 var(--serif);letter-spacing:-.035em;margin:26px 0 28px}
.hero h1 span{display:block}
.hero p{font-size:16px;color:var(--muted);max-width:460px}
.hero-actions{display:flex;gap:14px;align-items:center;margin-top:34px;flex-wrap:wrap}
.hero-phones{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,3vw,40px);min-height:560px}
.hero-phones .phone:first-child{transform:translateY(40px) rotate(-3deg)}
.hero-phones .phone:last-child{transform:translateY(-10px) rotate(3deg)}
.hero-notes{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 5% 26px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--sans-medium)}
.hero-notes a{font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink)}

/* Section heads */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:60px}
.section-head h2{margin-top:20px;max-width:720px}
.section-head>p{font-size:14px;color:var(--muted);max-width:300px;padding-bottom:8px}

/* The tour: two phones held in place while the steps pass. */
.tour{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.tour-stage{position:sticky;top:12px;height:calc(100svh - 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.tour-phones{display:flex;gap:clamp(14px,2.5vw,36px);align-items:center;justify-content:center}
.tour-phones .phone:first-child{transform:translateY(24px)}
.tour-phones .phone:last-child{transform:translateY(-24px)}
.tour-dots{display:flex;gap:8px;margin-top:30px}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:background .42s var(--drift),transform .42s var(--settle)}
.tour-dots i.on{background:var(--ink);transform:scale(1.3)}
.tour-steps{display:flex;flex-direction:column}
.step{min-height:78svh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step-label{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.step-label span{font-size:11px;color:var(--muted);font-family:var(--sans-medium);letter-spacing:.1em}
.step-label h3{font-family:var(--sans-medium);font-size:14px}
.step h4{font:300 clamp(30px,3.2vw,46px)/1.15 var(--serif);letter-spacing:-.025em;margin-bottom:20px}
.step p{font-size:15px;color:var(--muted);max-width:440px}
.step ul{list-style:none;margin-top:22px;font-size:14px;color:var(--muted)}
.step li{padding:9px 0;border-top:1px solid var(--line);display:flex;gap:12px}
.step li:last-child{border-bottom:1px solid var(--line)}
.step li b{color:var(--ink);min-width:88px}
.step .both{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:18px;font-family:var(--sans-medium)}
.step .both svg{width:14px;height:14px}

/* Phones. Every size inside is in cqw of the frame's width (1pt of a 402pt iPhone is 0.25cqw), so a frame
   shrinks with its width and the screen keeps the app's proportions: 24pt gutters, 36pt round buttons, 32pt
   discs, 44pt chips, 48pt pills and keys. */
.phone{position:relative;width:var(--phone-w,250px);aspect-ratio:9/19.2;container-type:inline-size;border-radius:calc(var(--phone-w,250px) * .145);background:#101211;box-shadow:var(--phone-shadow);flex:none;transition:transform .76s var(--settle)}
.phone.android{border-radius:calc(var(--phone-w,250px) * .1);background:#1d1f1e}
.phone .screen-wrap{position:absolute;inset:2.2cqw;border-radius:12.5cqw;overflow:hidden;background:var(--canvas);isolation:isolate}
.phone.android .screen-wrap{border-radius:8cqw}
.phone .island{position:absolute;top:5.4cqw;left:50%;transform:translateX(-50%);width:28cqw;height:8cqw;border-radius:5cqw;background:#101211;z-index:5}
.phone.android .hole{position:absolute;top:4.6cqw;left:50%;transform:translateX(-50%);width:4.5cqw;height:4.5cqw;border-radius:50%;background:#101211;z-index:5}
.phone .home-bar{position:absolute;bottom:2.4cqw;left:50%;transform:translateX(-50%);width:36cqw;height:1.4cqw;border-radius:2cqw;background:var(--ink);opacity:.6;z-index:5}
.phone.android .home-bar{width:26cqw}
.phone-caption{display:block;text-align:center;font-size:11px;color:var(--muted);margin-top:14px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans-medium)}
.phone .status{display:flex;justify-content:space-between;align-items:center;padding:3.6cqw 8cqw 0;font-size:4cqw;font-family:var(--sans-semibold);height:14cqw;color:var(--ink)}
.phone .status .sig{display:flex;gap:1.2cqw;align-items:flex-end;height:3.6cqw;margin-left:auto;margin-right:2cqw}
.phone .status .sig i{width:1.1cqw;background:var(--ink);border-radius:.4cqw}
.phone .status .batt{width:7cqw;height:3.4cqw;border:.5cqw solid var(--ink);border-radius:1.2cqw;padding:.5cqw}
.phone .status .batt i{display:block;height:100%;width:80%;background:var(--ink);border-radius:.4cqw}

/* The screens inside: stacked, the active one shown. */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--canvas);color:var(--ink);opacity:0;transform:translateY(3cqw);transition:opacity .42s var(--drift),transform .76s var(--settle);pointer-events:none;overflow:hidden;font-size:3.75cqw;line-height:1.35}
.screen.on{opacity:1;transform:none}
.screen.static{opacity:1;transform:none;position:relative;flex:1}
.s-body{padding:0 6cqw;display:flex;flex-direction:column;flex:1;min-height:0}
/* The screen bar: a 36pt round button at left, the brand beside it on Home, one action at right. */
.s-bar{display:flex;align-items:center;justify-content:space-between;padding:1cqw 6cqw 0;height:14cqw}
.s-bar .left{display:flex;align-items:center;gap:3.5cqw}
.s-bar .brand{gap:3cqw;font-size:4.6cqw}
.s-bar .brand-dot{width:4.6cqw;height:4.6cqw}
.round{width:9cqw;height:9cqw;border:.35cqw solid var(--line-strong);border-radius:50%;display:grid;place-items:center;flex:none;background:transparent}
.round svg{width:4.6cqw;height:4.6cqw}
.round.fill{background:var(--card)}
.s-bar .eyebrow-word{font-family:var(--sans-medium);font-size:2.9cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.s-bar .pill{height:11cqw;padding:0 5.5cqw;font-size:3.75cqw;border-radius:6cqw;gap:0}
.s-bar .pill.dim{opacity:.25}
/* Eyebrow and serif title, every screen's head. */
.s-eyebrow{font-family:var(--sans-medium);font-size:2.9cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.s-head{display:flex;justify-content:space-between;align-items:center;min-height:11cqw}
.s-head .s-eyebrow{margin:0}
.s-head a,.s-head .act{font-size:3.75cqw;color:var(--muted);font-family:var(--sans)}
.s-title{font-family:var(--serif);font-size:8.5cqw;line-height:1.15;letter-spacing:-.015em;margin-top:1.5cqw}
.s-title-row{display:flex;justify-content:space-between;align-items:center;margin-top:1.5cqw}
.s-title-row .s-title{margin:0}
.s-title-row .arrows{display:flex;gap:2cqw}
.s-fig{font-family:var(--serif);font-size:10cqw;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:1.4cqw}
.s-fig.mid{font-size:7.5cqw}
.s-fig.in{color:var(--income)}
.s-fig-row{display:flex;justify-content:space-between;align-items:center}
.s-sub{font-size:3.75cqw;color:var(--muted);line-height:1.4}
.s-cap{font-size:3.25cqw;color:var(--muted);line-height:1.4;margin-top:1cqw}
.s-cap.ink{color:var(--ink)}
.s-cap.al{color:var(--alert)}
.s-gap{height:3cqw}
.s-gap.big{height:6cqw}
/* A list row: the mark on its disc, the words, the figure in Manrope at right. */
.s-row{display:flex;align-items:center;gap:4cqw;padding:3.2cqw 0;border-top:.35cqw solid var(--line);min-height:14cqw}
.s-row.first{border-top:.35cqw solid var(--line)}
.s-row.top{align-items:flex-start}
.mark{width:8cqw;height:8cqw;border-radius:50%;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--mk) 10%,transparent);color:var(--mk)}
.mark svg{width:4.6cqw;height:4.6cqw}
.s-row .words{flex:1;min-width:0}
.s-row .t{display:block;font-size:3.75cqw;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-row .d{display:block;font-size:3.25cqw;color:var(--muted);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-row .amt{font-size:3.75cqw;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;flex:none}
.amt.in{color:var(--income)}
.amt.mu{color:var(--muted)}
.amt.al{color:var(--alert)}
.s-row .chev{color:var(--muted);font-size:4.5cqw;flex:none;margin-left:-1cqw}
.s-row .chev svg{width:4cqw;height:4cqw}
.s-row .vals{color:var(--muted);font-size:3.75cqw;white-space:nowrap}
.s-row .vals.ink{color:var(--ink)}
/* A day's head in Records: the eyebrow and the day's figure. */
.s-day{display:flex;justify-content:space-between;align-items:center;height:10cqw;margin-top:1cqw}
.s-day .amt{font-size:3.75cqw;color:var(--muted);font-variant-numeric:tabular-nums}
.s-day.plain{height:9cqw}
.s-day.plain span:first-child{font-size:3.75cqw;color:var(--muted);font-family:var(--sans)}
/* Hairline bars under a budget, a goal or a report row. */
.s-bar-line{height:1cqw;background:var(--line);border-radius:1cqw;margin-top:2.2cqw;overflow:visible;position:relative}
.s-bar-line i{display:block;height:100%;background:var(--ink);width:var(--w,50%);border-radius:1cqw}
.s-bar-line i.in{background:var(--income)}
.s-bar-line i.al{background:var(--alert)}
.s-bar-line b{position:absolute;top:-1.2cqw;left:var(--t,60%);width:.5cqw;height:3.4cqw;background:var(--accent)}
/* Chips: equal pills in a row, the chosen one on the card with a hairline. */
.s-choice{display:flex;gap:0}
.s-choice span{flex:1;text-align:center;font-size:3.75cqw;height:11cqw;line-height:11cqw;color:var(--muted);border-radius:6cqw;white-space:nowrap}
.s-choice span.on{background:var(--card);border:.35cqw solid var(--line);color:var(--ink);line-height:10.3cqw}
.s-chips{display:flex;gap:2cqw;overflow:hidden}
.s-chip{flex:none;height:9.5cqw;padding:0 4.2cqw;border-radius:5cqw;display:flex;align-items:center;font-size:3.5cqw;color:var(--muted);white-space:nowrap}
.s-chip.on{background:var(--card);border:.35cqw solid var(--line);color:var(--ink)}
/* Text actions with their icons, in a row. */
.s-actions{display:flex;justify-content:space-between;align-items:center;height:11cqw}
.s-actions span{display:inline-flex;align-items:center;gap:2cqw;font-size:3.75cqw;color:var(--muted)}
.s-actions .r{display:flex;gap:5cqw}
.s-actions svg{width:4cqw;height:4cqw}
.s-text-action{font-size:3.75cqw;color:var(--muted);padding:2cqw 0}
/* Pills and outlined buttons. */
.s-pill{height:12cqw;border-radius:6cqw;background:var(--ink);color:var(--canvas);display:inline-flex;align-items:center;justify-content:center;gap:2cqw;font-size:3.75cqw;font-family:var(--sans-medium);padding:0 7cqw;white-space:nowrap}
.s-pill.dim{opacity:.25}
.s-pill.wide{display:flex;width:100%}
.s-pill svg{width:4.6cqw;height:4.6cqw}
.s-outline{height:12cqw;border-radius:6cqw;border:.35cqw solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:3.75cqw;padding:0 7cqw;white-space:nowrap;align-self:flex-start}
.s-outline.wide{display:flex;width:100%;align-self:auto}
.s-outline.mu{color:var(--muted)}
/* The foot: Say it beside Add, at the right. */
.s-foot{margin-top:auto;display:flex;gap:3cqw;align-items:center;justify-content:flex-end;padding:3cqw 6cqw 9cqw}
.s-foot .round{width:12cqw;height:12cqw;background:transparent}
.s-foot .round svg{width:5cqw;height:5cqw}
.s-foot .s-pill{padding:0 6cqw}
.s-foot.one{justify-content:flex-end}
/* Plain field rows on Add. */
.s-field{display:flex;justify-content:space-between;align-items:center;gap:3cqw;padding:0;height:14cqw;border-top:.35cqw solid var(--line);font-size:3.75cqw}
.s-field .lab{display:flex;align-items:center;gap:4cqw;min-width:0}
.s-field .val{color:var(--muted);display:inline-flex;align-items:center;gap:2.5cqw;white-space:nowrap}
.s-field .val.ink{color:var(--ink)}
.s-field .val svg{width:4cqw;height:4cqw}
.s-field.last{border-bottom:.35cqw solid var(--line)}
/* Home's tiles: the inks with white words and the lit card's grain, three to a row, wider than tall. */
.s-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-top:1cqw}
.s-tile{aspect-ratio:1.42;border-radius:3.5cqw;padding:2.6cqw 2.8cqw;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:
  linear-gradient(160deg,rgba(255,255,255,.08),transparent 55%,rgba(0,0,0,.12)),var(--tf);position:relative;overflow:hidden}
.s-tile:after{content:'';position:absolute;inset:0;opacity:.22;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.s-tile svg{width:4cqw;height:4cqw;position:relative}
.s-tile .n{font-size:3cqw;opacity:.92;position:relative;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-tile .b{font-size:3.3cqw;font-family:var(--sans-semibold);font-variant-numeric:tabular-nums;position:relative;white-space:nowrap;display:block}
/* The keypad, on its sheet: card colour, rounded top, Done at the right, outlined keys. */
.s-sheet{margin:auto -6cqw 0;background:var(--card);border-top:.35cqw solid var(--line);border-radius:6cqw 6cqw 0 0;padding:2cqw 6cqw 8cqw}
.s-done{display:flex;justify-content:flex-end;align-items:center;height:9cqw;font-size:3.75cqw;font-family:var(--sans-medium)}
.s-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:1cqw 0}
.s-key{height:12cqw;border:.35cqw solid var(--line-strong);border-radius:3cqw;display:grid;place-items:center;font-family:var(--serif);font-size:6.5cqw;background:var(--canvas)}
.s-key svg{width:5cqw;height:5cqw}
/* Capture: a reading waiting on its card. */
.s-card{border:.35cqw solid var(--line);border-radius:4.5cqw;background:var(--card);padding:3.5cqw 4cqw;display:flex;flex-direction:column;gap:2cqw;margin-top:2.5cqw}
.s-card .s-row{border:0;padding:0;min-height:0}
.s-card .ask{display:flex;gap:2cqw;flex-wrap:wrap}
.s-card .ask span{font-size:3.25cqw;border:.35cqw solid var(--line-strong);border-radius:4cqw;padding:1.2cqw 3cqw;color:var(--muted);height:7.5cqw;display:inline-flex;align-items:center}
.s-card .save{align-self:flex-end;font-size:3.75cqw;font-family:var(--sans-medium)}
.s-said{font-family:var(--serif-regular);font-size:4.8cqw;line-height:1.4;margin-top:1cqw}
.s-waveline{height:10cqw;display:flex;align-items:center;margin-top:5cqw;margin-bottom:2cqw}.s-waveline svg{width:100%;height:6cqw;overflow:visible}
.s-wave{display:flex;align-items:center;justify-content:center;gap:1.6cqw;height:22cqw}
.s-wave i{width:1.4cqw;border-radius:1cqw;background:var(--brand);height:var(--h)}
.s-notice{display:flex;gap:3cqw;align-items:flex-start;padding:3cqw;border:.35cqw solid var(--line);border-radius:4cqw;background:var(--card);margin-top:2.5cqw}
.s-notice .app{width:8cqw;height:8cqw;border-radius:2.2cqw;background:var(--ink);color:var(--canvas);display:grid;place-items:center;font-size:3cqw;font-family:var(--sans-semibold);flex:none}
.s-notice .t{font-size:3.5cqw;font-family:var(--sans-medium);display:block}
.s-notice .d{font-size:3.25cqw;color:var(--muted);line-height:1.35;display:block}
.s-tapcard{aspect-ratio:1.58;border-radius:4.5cqw;background:linear-gradient(150deg,#1c6b6c,#0d3540);color:#fff;padding:4cqw;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;margin-top:3cqw}
.s-tapcard:before{content:'';position:absolute;right:-20%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.08)}
.s-tapcard .n{font-size:3cqw;letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-family:var(--sans-medium);display:block}
.s-tapcard .b{font-family:var(--serif);font-size:8cqw;display:block}
.s-arcs{display:flex;justify-content:center;padding:2cqw 0}
.s-arcs svg{width:20cqw;height:20cqw}
/* Charts */
.s-cols{display:flex;align-items:flex-end;gap:2.6cqw;height:36cqw;padding-top:3cqw;border-bottom:.35cqw solid var(--line-strong)}
.s-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.5cqw;height:100%}
.s-col i{display:block;border-radius:.8cqw .8cqw 0 0;opacity:.75}
.s-col.now i{opacity:1}
.s-col-labels{display:flex;gap:2.6cqw;font-size:3cqw;color:var(--muted);padding-top:1.5cqw}
.s-col-labels span{flex:1;text-align:center}
.s-col-labels span.now{color:var(--ink)}
.s-line{position:relative;height:36cqw;margin-top:3cqw}
.s-line svg{width:100%;height:100%;overflow:visible}
.s-reading{display:flex;justify-content:space-between;font-size:3.75cqw;padding:2.5cqw 0;border-top:.35cqw solid var(--line);margin-top:2cqw}
.s-legend{display:flex;flex-wrap:wrap;gap:1.6cqw 4cqw;font-size:3.25cqw;color:var(--muted);margin-top:2cqw}
.s-legend i{display:inline-block;width:2.2cqw;height:2.2cqw;border-radius:50%;margin-right:1.4cqw;vertical-align:middle}
/* Settings and the lock */
.s-section{margin-top:4cqw}
.s-section .s-eyebrow{margin-bottom:2.5cqw}
.s-two{display:flex}
.s-two span{flex:1;text-align:center;font-size:3.75cqw;height:11cqw;line-height:11cqw;color:var(--muted);border-radius:6cqw}
.s-two span.on{background:var(--card);border:.35cqw solid var(--line);color:var(--ink);line-height:10.3cqw}
.s-counts{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;margin-top:3cqw}
.s-count{padding:3cqw;border:.35cqw solid var(--line);border-radius:3.5cqw;background:var(--card)}
.s-count b{display:block;font-family:var(--serif);font-size:7cqw;font-variant-numeric:tabular-nums;line-height:1.1}
.s-count span{font-size:3.25cqw;color:var(--muted)}
.s-lock{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5cqw;text-align:center;padding:0 10cqw 10cqw}
.s-lock .brand{gap:3cqw;font-size:4.6cqw;margin-bottom:4cqw}
.s-lock .brand-dot{width:4.6cqw;height:4.6cqw}
.s-lock .s-pill{margin-top:6cqw}
.s-hidden{letter-spacing:.08em}
.s-para{font-size:3.75cqw;color:var(--muted);line-height:1.45;margin-top:2cqw}
.s-search{display:flex;align-items:center;gap:3cqw;height:12cqw;border-bottom:.35cqw solid var(--line-strong);color:var(--faint);font-size:4cqw}

/* Plans */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.plan{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:18px 18px 28px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow)}
.plan .summit{aspect-ratio:5/3;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--canvas)}
.plan .summit svg{width:100%;height:100%}
.plan h3{font:300 30px/1.15 var(--serif);letter-spacing:-.02em;padding:0 6px}
.plan .for{font-size:14px;color:var(--muted);padding:0 6px;margin-top:-8px}
.plan .price{padding:0 6px}
.plan .price b{font:300 38px/1.1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan .price span{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.plan .state{padding:0 6px;font-size:13px;color:var(--muted);font-family:var(--sans-medium);display:flex;align-items:center;gap:8px}
.plan .state i{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.plan ul{list-style:none;padding:0 6px;font-size:14px}
.plan li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);color:var(--muted)}
.plan li svg{width:16px;height:16px;flex:none;color:var(--brand);margin-top:3px}
.plan .note{padding:0 6px;font-size:13px;line-height:1.5;color:var(--muted)}
.plans-foot{font-size:13px;color:var(--muted);max-width:620px;margin-top:28px}
.intro{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--sans-medium);color:var(--brand);border:1px solid var(--line-strong);border-radius:12px;padding:3px 10px;margin-left:10px;vertical-align:middle}

/* Trust */
.trust{border-top:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:50px;align-items:start}
.trust-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:22px 40px}
.trust-list li{border-top:1px solid var(--line);padding-top:18px}
.trust-list h3{font-family:var(--sans-medium);font-size:15px;margin-bottom:8px}
.trust-list p{font-size:14px;color:var(--muted)}
.trust .text-link{margin-top:30px;display:inline-block}

/* Get: the badges and the waitlist. */
.get{border-radius:var(--radius);background:var(--card);border:1px solid var(--line);padding:70px 6%;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-top:20px}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.badge{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 20px 0 16px;border:1px solid var(--line-strong);border-radius:12px;color:var(--muted);opacity:.85;cursor:default}
.badge svg{width:24px;height:24px}
.badge span{display:flex;flex-direction:column;line-height:1.15}
.badge small{font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.badge b{font-size:15px;font-family:var(--sans-medium)}
.soon{font-size:12px;color:var(--muted);margin-top:12px}
.waitlist h3{font:300 30px/1.15 var(--serif);letter-spacing:-.02em;margin-bottom:10px}
.waitlist p{font-size:14px;color:var(--muted)}
.waitlist form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.waitlist input{flex:1;min-width:200px;height:48px;border:1px solid var(--line-strong);border-radius:24px;padding:0 20px;font:inherit;background:var(--canvas);color:var(--ink)}
.waitlist input::placeholder{color:var(--faint)}
.waitlist .note{font-size:12px;color:var(--muted);margin-top:12px}
.waitlist .thanks{display:none;padding:18px 0 0;font-family:var(--serif-regular);font-size:19px}
.waitlist .failed{display:none;color:var(--alert);font-size:13px;margin-top:10px}
.waitlist.done form,.waitlist.done .note{display:none}
.waitlist.done .thanks{display:block}
.waitlist.failed .failed{display:block}

/* Footer: the company line, as the parent site has it. */
footer.site{margin-top:12px;border-radius:var(--radius);background:var(--footer-bg);color:var(--footer-ink);border:1px solid var(--footer-line);padding:60px 5% 28px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding-bottom:50px;border-bottom:1px solid var(--footer-line)}
.footer-top h2{margin-top:20px;font-size:clamp(34px,4vw,56px)}
.footer-top .eyebrow{color:inherit;opacity:.7}
.footer-top .text-link{font-size:15px}
.made-by{display:flex;align-items:center;gap:16px}
.lettermark{display:inline-block;width:92px;height:28px;background:currentColor;-webkit-mask:url(assets/brand/hylw-lettermark.svg) no-repeat left center/contain;mask:url(assets/brand/hylw-lettermark.svg) no-repeat left center/contain}
.made-by span{font-size:13px;opacity:.85}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:26px;font-size:12px;opacity:.85;flex-wrap:wrap}
.footer-bottom nav{display:flex;gap:22px}

/* Policy page */
.policy{max-width:760px;margin:0 auto;padding:40px 5% 100px}
.policy h1{font:300 clamp(38px,5vw,64px)/1.1 var(--serif);letter-spacing:-.03em;margin:20px 0 16px}
.policy .dated{font-size:13px;color:var(--muted)}
.policy h2{font-size:28px;margin:48px 0 14px}
.policy p,.policy li{font-size:16px;line-height:1.7;color:var(--ink)}
.policy p+p{margin-top:14px}
.policy ul{list-style:none;margin:14px 0}
.policy li{padding:10px 0;border-top:1px solid var(--line)}
.policy li:last-child{border-bottom:1px solid var(--line)}
.policy li b{display:block}
.policy a{border-bottom:1px solid var(--line-strong)}
.draft{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-strong);border-radius:14px;padding:16px 18px;margin:28px 0 40px;font-size:14px;color:var(--muted);background:var(--card)}
.draft i{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:7px}
.topbar{border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}

/* Reveal: content fades in and rises a few points, once. */
.reveal{transition:opacity .76s var(--drift),transform .76s var(--settle)}
.motion-ready .reveal:not(.visible){opacity:0;transform:translateY(10px)}

/* Mobile menu */
dialog{border:0;color:var(--ink);padding:0;background:var(--canvas);border-radius:var(--radius);box-shadow:0 25px 100px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(13,13,13,.6);backdrop-filter:blur(6px)}
.menu-dialog{padding:70px 32px 50px;width:calc(100% - 24px);max-width:none}
.menu-dialog nav{display:flex;flex-direction:column;gap:22px;font:300 30px/1.1 var(--serif);margin-top:40px}
.close{position:absolute;right:14px;top:10px;font-size:30px;width:44px;height:44px;line-height:1}
body.modal-open{overflow:hidden}

@media (max-width:1100px){
  .hero h1{font-size:clamp(40px,6vw,72px)}
  .hero-phones{min-height:480px;--phone-w:210px}
  .tour{gap:30px}
  .tour-phones{--phone-w:200px}
  .trust-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .page{padding:8px}
  .wrap{padding:70px 6%}
  header.site{padding:20px 5%}
  .nav,.head-actions .text-link{display:none}
  .menu-toggle{display:flex;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;flex-direction:column;gap:5px;align-items:center;justify-content:center}
  .menu-toggle span{width:16px;height:1px;background:currentColor}
  .hero{min-height:0}
  .hero-body{grid-template-columns:1fr;padding:30px 6% 40px;gap:50px}
  .hero-phones{min-height:0;--phone-w:min(44vw,190px);gap:16px;padding:20px 0 30px}
  .hero-phones .phone:first-child{transform:translateY(24px) rotate(-3deg)}
  .hero-notes{flex-direction:column;align-items:flex-start;gap:8px}
  .section-head{display:block;margin-bottom:30px}
  .section-head>p{margin-top:18px;max-width:none}
  .tour{display:block}
  .tour-stage{height:auto;position:sticky;top:8px;padding:14px 0 12px;background:var(--canvas);z-index:2;gap:12px}
  .tour-phones{--phone-w:min(40vw,168px);gap:14px}
  .tour-phones .phone:first-child,.tour-phones .phone:last-child{transform:none}
  .tour-dots{margin-top:0}
  .phone-caption{margin-top:8px;font-size:10px}
  .tour-steps{padding-top:10px}
  .step{min-height:0;padding:40px 0}
  .step h4{font-size:30px}
  .plans-grid{grid-template-columns:1fr}
  .trust-list{grid-template-columns:1fr}
  .get{grid-template-columns:1fr;padding:50px 7%;gap:40px}
  .footer-top{display:block;padding-bottom:36px}
  .footer-top .text-link{display:inline-block;margin-top:26px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}
  footer.site{padding:46px 7% 26px}
}
@media (max-width:400px){
  .hero-phones{--phone-w:min(42vw,150px)}
  .tour-phones{--phone-w:min(39vw,150px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pill:hover,.phone{transform:none}
  .screen{transform:none;transition:opacity .42s var(--drift)}
  .motion-ready .reveal:not(.visible){transform:none}
  .tour-dots i{transition:none}
}
code{font-family:var(--sans-medium);font-size:.95em;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 6px}

/* The summit pictures: the app's own drawings, one per theme. */
.plan .summit svg{display:none;width:100%;height:100%}
.plan .summit .summit-ivory{display:block}
:root[data-theme=dark] .plan .summit .summit-ivory{display:none}
:root[data-theme=dark] .plan .summit .summit-night{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .plan .summit .summit-ivory{display:none}
  :root:not([data-theme=light]) .plan .summit .summit-night{display:block}
}
/* The comparison, line by line. */
.compare-wrap{padding-top:40px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.compare th,.compare td{padding:14px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.compare thead th{font-family:var(--sans-medium);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-top:0;padding-bottom:10px}
.compare thead th:not(:first-child),.compare td{width:21%}
.compare tbody th{font-family:var(--sans);font-weight:400;color:var(--ink)}
.compare tbody th small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.compare td{color:var(--muted)}
.compare tr.group th{font:300 22px/1.2 var(--serif);letter-spacing:-.01em;padding-top:36px;padding-bottom:8px;border-top:0;color:var(--ink)}
.compare tr.group th small{font:400 13px/1.5 var(--sans);letter-spacing:0;max-width:min(620px,calc(100vw - 72px));margin-top:6px}
.compare tbody tr:first-child th{padding-top:0}
.compare .yes,.compare .no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%}
.compare .yes{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.compare .no{color:var(--faint);background:color-mix(in srgb,var(--faint) 12%,transparent)}
.compare .yes svg,.compare .no svg{width:14px;height:14px}
@media (max-width:860px){.compare{font-size:13px}.compare th,.compare td{padding:12px 10px}}

/* Monthly or yearly: two chips above the plans. */
.billing{display:inline-flex;border:1px solid var(--line-strong);border-radius:24px;padding:3px;margin:0 auto 28px;position:relative;left:50%;transform:translateX(-50%)}
.motion-ready .billing:not(.visible){transform:translateX(-50%) translateY(10px)}
.billing button{height:40px;padding:0 20px;border-radius:20px;font-family:var(--sans-medium);font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;transition:background .22s var(--drift),color .22s var(--drift)}
.billing button[aria-checked=true]{background:var(--ink);color:var(--canvas)}
.billing button small{font-size:11px;font-family:var(--sans);opacity:.8}