@import url('brand-tokens.css');

*{box-sizing:border-box}html{scroll-padding-top:28px}body{margin:0;background:var(--surface);color:var(--ink);font:400 18px/1.65 var(--text);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}a:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:6px}::selection{background:#dce1ff;color:#091c9c}.page-width{width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}.skip-link{position:absolute;top:12px;left:20px;transform:translateY(-180%);z-index:10;background:var(--surface);padding:10px 16px}.skip-link:focus{transform:none}.site-header{height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:2}.site-header:after{content:'';position:absolute;bottom:0;left:var(--gutter);right:var(--gutter);border-bottom:1px solid var(--ink)}.wordmark{font:400 clamp(25px,2vw,32px)/1 var(--display);letter-spacing:-.035em;text-decoration:none;white-space:nowrap}.site-header nav,.site-footer nav{display:flex;gap:clamp(20px,3vw,48px);align-items:center}nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:clamp(14px,1.3vw,20px)}nav a:hover{text-decoration:underline}
.hero{position:relative;aspect-ratio:1536/950;isolation:isolate}.hero-copy{position:relative;z-index:1;padding-top:clamp(40px,3.6vw,58px);width:53%}h1,h2,p{margin-top:0}h1{font:400 clamp(50px,6.1vw,98px)/.99 var(--display);letter-spacing:-.035em;margin-bottom:25px}h1 br{display:block}.hero-copy>p{font-size:clamp(17px,1.4vw,23px);line-height:1.5;margin-bottom:26px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 24px;background:var(--ink);color:var(--surface);border:1px solid var(--ink);border-radius:2px;text-decoration:none;font-size:16px;line-height:1.5}.button:hover{background:#091ba4}.button--secondary{background:var(--surface);color:var(--ink)}.button--secondary:hover{background:var(--soft-surface)}.hero-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.hero-art img{position:absolute;width:100%;height:auto;left:0;top:calc(-1 * var(--nav-height));display:block}
.section{padding-top:var(--section-space);padding-bottom:var(--section-space);position:relative}.section:before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--rule)}.section-label{display:flex;justify-content:space-between;margin-bottom:40px}.small-label{font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase}.section-number{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}.section-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,112px)}h2{font:400 clamp(36px,4vw,64px)/1.07 var(--display);letter-spacing:-.035em;margin-bottom:28px}.reading-copy{max-width:550px;color:var(--body);font-size:18px}.reading-copy p{margin-bottom:22px}.reading-copy p:last-child{margin-bottom:0}.text-link{display:inline-flex;align-items:center;gap:20px;min-height:44px;color:var(--ink);font-size:16px}.text-link span{font-size:21px}.plan-example{margin:64px 0 0;padding:40px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,112px)}.plan-example p{font:400 clamp(27px,2.6vw,42px)/1.25 var(--display);letter-spacing:-.02em;margin:0}.closing{text-align:center;padding-block:var(--section-space)}.closing h2{margin-block:28px 20px}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:30px;border-top:1px solid var(--rule)}.site-footer nav a{font-size:14px}.site-footer small{font-size:12px;color:var(--muted)}
/* These same classes are used in the component gallery. */
.gallery{padding-block:60px}.gallery>h1{max-width:900px}.gallery-section{padding-block:40px;border-top:1px solid var(--rule)}.gallery-section h2{font-size:36px}.sample-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.swatch{width:160px;min-height:100px;padding:18px;border:1px solid var(--rule);font-size:13px}.swatch--ink{background:var(--ink);color:white}.swatch--soft{background:var(--soft-surface)}.gallery p{max-width:680px}.gallery code{font-size:14px}.gallery-image{max-width:100%;height:auto}
@media(min-width:1601px){.hero-copy{padding-top:58px}}
@media(max-width:900px){.hero-copy{width:56%}h1{font-size:clamp(45px,6.1vw,58px)}.hero-copy>p{font-size:16px}.hero-copy .desktop-break{display:none}.section-body{gap:40px}.reading-copy{font-size:16px}}
@media(max-width:700px){.site-header{gap:12px}.site-header nav{gap:16px}.site-header .wordmark{font-size:25px}.site-header nav a{font-size:13px}.hero{aspect-ratio:auto;padding-top:0;padding-bottom:0}.hero-copy{width:100%;padding-top:42px}.hero h1{font-size:clamp(42px,8.8vw,60px);line-height:1.04;max-width:600px;margin-bottom:22px}.hero-copy>p{max-width:355px;font-size:17px}.hero-art{position:relative;height:clamp(340px,100vw,570px);margin:12px calc(-1 * var(--gutter)) 0;width:calc(100% + 2 * var(--gutter));overflow:hidden}.hero-art img{width:190%;max-width:none;left:-82%;top:auto;bottom:0;height:auto}.section-body{grid-template-columns:1fr;gap:8px}.section-label{margin-bottom:28px}h2{font-size:42px}.reading-copy{font-size:17px;max-width:100%}.plan-example{grid-template-columns:1fr;gap:20px;margin-top:40px;padding-top:30px}.plan-example p{font-size:30px}.site-footer{flex-wrap:wrap;align-items:flex-start;gap:20px}.site-footer small{flex-basis:100%}.site-footer nav{gap:20px}}
@media(max-width:360px){:root{--gutter:20px}.site-header .wordmark{font-size:22px}.site-header nav{gap:10px}.site-header nav a{font-size:12px}.hero h1{font-size:39px}.hero-art{height:330px}.hero-art img{top:auto;bottom:0}h2{font-size:37px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.skip-link,.button,nav{display:none}.hero{break-inside:avoid}.section{padding-block:30px}body{font-size:12pt}.site-footer{margin-top:20px}}

/* Selected revision: separate the copy from the art; one letter follows. */
.hero { aspect-ratio: auto; }
.hero-copy { width: 100%; padding-block: clamp(56px, 6.5vw, 104px) 36px; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.hero h1 { font-size: clamp(50px, 5.5vw, 88px); line-height: 1.05; margin: 0; }
.hero-summary { max-width: 530px; }
.hero-summary p { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.65; margin: 0 0 18px; }
.hero-art { position: relative; inset: auto; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); aspect-ratio: 1536 / 960; height: auto; }
.hero-art img { width: 100%; left: 0; top: 0; bottom: auto; transform: translateY(-6.25%); }
.founder-letter { padding-top: clamp(64px, 8vw, 128px); padding-bottom: 40px; }
.letter-heading, .letter-copy { max-width: 720px; margin-inline: auto; }
.letter-heading { margin-bottom: 44px; }
.letter-heading h2 { font-size: clamp(38px, 4vw, 60px); }
.letter-copy { color: var(--body); font-size: 19px; line-height: 1.85; }
.letter-copy p { margin-bottom: 28px; }
.letter-copy p:last-child { color: var(--ink); margin-top: 44px; }
.hero-caption { text-align: center; font: 400 clamp(24px, 2.4vw, 38px)/1.3 var(--display); margin: 26px 0 0; padding-inline: 12px; }
.letter-heading h2 { font: 400 24px/1.5 var(--text); letter-spacing: 0; margin: 0; }
.letter-copy .signature { color: var(--ink); margin-top: 44px; }
.product-intro { max-width: 950px; padding-block: var(--section-space); }
.product-intro h1 { font-size: clamp(44px, 6vw, 88px); }
.product-intro > p:not(.small-label) { max-width: 600px; color: var(--body); font-size: 20px; }
.product-features { border-top: 1px solid var(--rule); padding-block: var(--section-space); }
.feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 48px; }
.feature-list h3 { font: 400 32px/1.15 var(--display); margin: 24px 0 18px; }
.feature-list p { color: var(--body); font-size: 17px; }
.waitlist { border-top: 1px solid var(--rule); padding-block: var(--section-space); }
.waitlist > p:last-child { color: var(--body); }
@media (max-width: 800px) { .feature-list { grid-template-columns: 1fr; gap: 28px; } .product-intro > p:not(.small-label) { font-size: 18px; } }
.illustrated-footer { padding-top: 64px; }
.footer-drawing { width: 100%; height: auto; display: block; }
.footer-links { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-block: 30px; border-top: 1px solid var(--rule); }
.footer-links > a:not(.wordmark) { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.footer-links small { font-size: 12px; color: var(--muted); }
@media (max-width: 800px) {
  .hero-copy { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; padding-bottom: 12px; }
  .hero h1 { font-size: clamp(43px, 8vw, 64px); }
  .hero-summary { max-width: 580px; }
  .hero-summary p { font-size: 18px; }
  .hero-art { aspect-ratio: 1 / 1; height: auto; margin-top: 12px; }
  .hero-art img { width: 150%; left: -48%; top: auto; bottom: 0; transform: none; }
  .letter-copy { font-size: 18px; line-height: 1.8; }
  .letter-heading { margin-bottom: 30px; }
  .illustrated-footer { padding-top: 32px; }
}

/* Portrait city: headline and support form one block beside the whole scene. */
.hero { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: clamp(32px, 4vw, 64px); align-items: center; padding-top: 24px; }
.hero-copy { display: block; width: auto; padding-block: 40px; }
.hero h1 { font-size: clamp(48px, 5vw, 80px); line-height: 1.06; margin-bottom: 28px; }
.hero-summary { max-width: 480px; }
.hero-summary p { font-size: clamp(17px, 1.35vw, 20px); }
.hero-art { width: 100%; height: min(78svh, 800px); min-height: 520px; aspect-ratio: auto; margin: 0; }
.hero-art img { position: static; width: 100%; height: 100%; object-fit: contain; transform: none; }
.hero-caption { grid-column: 1 / -1; margin-top: 36px; }
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; padding-top: 0; }
  .hero-copy { padding-block: 42px 12px; }
  .hero h1 { font-size: clamp(43px, 8vw, 64px); }
  .hero-summary { max-width: 580px; }
  .hero-summary p { font-size: 18px; }
  .hero-art { height: auto; min-height: 0; aspect-ratio: 1122 / 1402; margin-top: 8px; }
  .hero-art img { width: 100%; height: 100%; }
  .hero-caption { margin-top: 24px; }
}

/* Wider city and a quiet margin for the long letter. */
@media (min-width: 801px) {
  .hero { grid-template-columns: 1fr 1.25fr; }
  .hero-art { height: auto; min-height: 0; aspect-ratio: 1; }
}
@media (max-width: 800px) { .hero-art { aspect-ratio: 1; } }
/* Neutral paper tones map to white; blue strokes retain their color difference. */
.ink-filter { position: absolute; pointer-events: none; }
.hero-art img { filter: url(#blue-ink-on-white); }
.letter-margin { display: none; }
.company-paths { display: block; width: 100%; position: sticky; top: 120px; overflow: visible; }
.company-trails { stroke: var(--ink); stroke-width: 1; opacity: .15; stroke-linecap: round; }
.company-mark { stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1200px) {
  .founder-letter { position: relative; }
  .letter-margin { display: block; position: absolute; top: 128px; bottom: 40px; left: var(--gutter); width: clamp(120px, 12vw, 180px); }
}
@media print { .letter-margin { display: none; } }

/* On compact screens, give the final gathering its own readable composition. */
.footer-mobile { display: none; }
@media (max-width: 700px) {
  .illustrated-footer > .footer-drawing { display: none; }
  .footer-mobile { display: block; position: relative; overflow: hidden; width: 100%; aspect-ratio: 1.3; }
  .footer-mobile img { filter: url(#blue-ink-on-white); position: absolute; width: 290%; max-width: none; height: auto; right: 0; bottom: 0; }
}

/* Public-site density follows the app's clearer hierarchy, with editorial fonts. */
.company-site { font-size:16px; line-height:1.6; }
.company-site nav a { font-size:15px; }
.company-site .hero { aspect-ratio:auto; }
.company-site .hero h1 { font-size:clamp(42px,4.5vw,72px); line-height:1.08; letter-spacing:-.02em; }
.company-site .hero-summary p { font-size:17px; line-height:1.6; margin-bottom:0; }
.company-site .hero-caption { font-size:clamp(24px,2.1vw,32px); }
.company-site .letter-heading,.company-site .letter-copy { max-width:660px; }
.company-site .letter-heading { margin-bottom:24px; }
.company-site .letter-heading h2 { font-size:18px; line-height:1.5; }
.company-site .letter-copy { font-size:17px; line-height:1.75; }
.company-site .letter-copy p { margin-bottom:24px; }
.company-site .letter-copy> .text-link { margin-top:8px; }
.company-site .product-intro h1 { font-size:clamp(40px,5vw,68px); line-height:1.1; letter-spacing:-.02em; }
.company-site .product-intro>p:not(.small-label) { font-size:17px; line-height:1.6; }
.company-site .product-features h2,.company-site .waitlist h2 { font-size:clamp(28px,3vw,42px); line-height:1.2; letter-spacing:-.02em; }
.company-site .feature-list { gap:32px; margin-top:32px; }
.company-site .feature-list h3 { font-size:26px; line-height:1.25; margin:16px 0 12px; }
.company-site .feature-list p { font-size:16px; line-height:1.6; }
@media(max-width:800px) {
  .company-site .hero-copy { padding-top:32px; }
  .company-site .hero-summary p { font-size:16px; }
  .company-site .letter-copy { font-size:16px; line-height:1.75; }
}

.company-site .hero-actions { display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:20px; }
.company-site .site-header nav a { gap:8px; }
@media(min-width:1200px) { .company-site .letter-margin { top:clamp(64px,8vw,128px); } }

.company-site .hero-actions .text-link { gap:6px; }
.meet-encie-page .product-intro { max-width:960px; margin-inline:auto; padding-block:clamp(48px,7vw,104px); }
.meet-encie-page .product-intro h1 { max-width:900px; margin-bottom:32px; }
.meet-encie-page .product-summary { max-width:660px; font-size:17px; line-height:1.7; color:var(--body); }
.meet-encie-page .product-summary p { margin-bottom:20px; }
.meet-encie-page .waitlist-placeholder { margin-top:32px; }
.meet-encie-page .waitlist-placeholder .button { font-family:var(--text); border-radius:12px; max-width:100%; }
.meet-encie-page .waitlist-placeholder .button:disabled { background:var(--soft-surface); color:var(--muted); border-color:var(--rule); cursor:default; }
.meet-encie-page .site-footer { flex-wrap:wrap; font-size:14px; }
@media(max-width:800px) { .meet-encie-page .product-summary { font-size:16px; } }

.meet-encie-page .product-intro { max-width:1120px; }
.meet-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(40px,6vw,88px); align-items:start; }
.meet-companion { color:var(--body); }
.meet-encie-page .product-intro > .encie-pigeon { display:block; width:160px; height:auto; margin:0 0 16px; mix-blend-mode:multiply; }
.meet-encie-page .meet-companion h2 { font:500 16px/1.5 var(--text); letter-spacing:normal; color:var(--ink); margin:0 0 16px; }
.meet-companion ul { margin:0; padding-left:18px; font-size:15px; line-height:1.6; }
.meet-companion li { padding-left:4px; margin-bottom:12px; }
@media(max-width:800px) { .meet-layout { grid-template-columns:1fr; gap:40px; }.meet-encie-page .product-intro > .encie-pigeon { width:120px; }.meet-companion { max-width:520px; } }

/* One inline label keeps the underline continuous through the arrow spacing. */
.company-site .arrow-link { text-decoration:none; }
.company-site .arrow-link .link-label,.company-site .arrow-link .link-label span { font-size:inherit; }
.company-site .arrow-link .link-label { white-space:nowrap; text-decoration-skip-ink:none; }
.company-site .text-link.arrow-link .link-label,
.company-site nav .arrow-link:hover .link-label { text-decoration:underline; }