@import url("/fonts/fonts.css");
/* Client Letter Works. Direction: "The printed annual" (tasteskill draw, seed 1504963191).
   Type Imbue / Albert Sans. Palette grey, mint, orange. Motion: masked headline (Emil Kowalski easing rules). */
:root{
  --bg:#ffffff;--surface:#f5f5f5;--ink:#000000;--muted:#4d4d4d;
  --accent:#a7ff9c;--accent-ink:#000000;
  --field-1:#c5c5c5;--field-2:#a7ff9c;--field-3:#ff6831;--field-4:#000000;--field-4-ink:#ffffff;
  --font-display:"Imbue",Georgia,serif;--font-text:"Albert Sans",system-ui,sans-serif;
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2.25rem,1.3rem + 3.6vw,4.5rem);
  --step-display:clamp(4.75rem,13vw,15rem);
  --margin:clamp(1.25rem,2.6vw,2.5rem);--axis:42%;--section:clamp(5.5rem,11vw,12rem);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-expo:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms;--t-hover:180ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:var(--step-body);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:var(--margin);top:-4rem;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{top:1rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nums{font-variant-numeric:tabular-nums}
p{max-width:64ch;text-wrap:pretty}
h1,h2,h3{font-family:var(--font-display);font-weight:400;text-wrap:balance}
.head{font-size:var(--step-head);line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
.display{font-size:var(--step-display);line-height:.86;letter-spacing:-.01em;text-transform:uppercase}

/* controls */
a,button{touch-action:manipulation}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:0 1.6rem;background:var(--accent);color:var(--accent-ink);font-weight:500;text-decoration:none;border-radius:0;user-select:none;-webkit-user-select:none;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.button:active{transform:scale(.97)}
.button-ink{background:var(--ink);color:#fff}
.link{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.22em;text-decoration-thickness:.07em;transition:text-decoration-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){
  .button:hover{background:#8af27d}
  .button-ink:hover{background:#222}
  .link:hover{text-decoration-color:currentColor}
}

/* hero: narrow talk, wide headline */
.hero{display:grid;grid-template-columns:34% 1fr;min-height:100svh;padding:var(--margin) var(--margin) 0;column-gap:0;background:var(--surface);overflow:clip}
.hero-talk{display:flex;flex-direction:column;padding-right:2rem}
.wordmark{font-family:var(--font-display);font-size:var(--step-lead);line-height:1;text-transform:uppercase;text-decoration:none}
.hero-pitch{margin-top:24svh;display:grid;gap:1.25rem;justify-items:start}
.pitch{font-size:var(--step-lead);line-height:1.35;max-width:24ch}
.ai-line{font-size:var(--step-small);max-width:30ch}
.hero-stage{display:flex;flex-direction:column;min-width:0}
.nav{display:flex;gap:1.75rem;font-size:var(--step-small)}
.nav a{text-decoration-color:transparent}
.hero h1{margin-top:clamp(2rem,9svh,6rem)}
.lines .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.lines [data-line]{display:block}
.hero-picture{position:relative;margin-top:auto;padding-top:3rem}
.hero-picture img{width:100%;height:clamp(14rem,32svh,24rem);object-fit:cover;object-position:50% 60%}
.hero-figure{position:absolute;left:0;top:0;z-index:1;width:16.25rem;background:var(--field-3);color:#000;padding:1.1rem 1.25rem;display:grid;gap:.2rem}
.hero-figure strong{font-family:var(--font-display);font-size:var(--step-head);font-weight:400;line-height:1}
.hero-figure span{font-size:var(--step-small);line-height:1.4}

/* sections */
section{padding:calc(var(--section)/2) var(--margin)}
.axis{display:grid;grid-template-columns:var(--axis) 1fr;column-gap:0}
.axis>.head{grid-column:2}
.axis-body{grid-column:2;margin-top:2.5rem;display:grid;gap:1.75rem}

.showcase .head{margin-left:16.66%;margin-bottom:4rem}
.band{display:flex;height:68svh;margin-inline:calc(var(--margin)*-1)}
.panel{position:relative;flex:2 1 0;min-width:0;overflow:hidden;text-decoration:none;transition:flex-grow 500ms var(--ease-in-out)}
.panel.p1{flex-grow:5}.panel.p3{flex-grow:3}
.panel img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.panel-title{position:absolute;left:0;top:0;padding:1.5rem;font-family:var(--font-display);font-size:var(--step-lead);line-height:1;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55)}
@media (hover:hover) and (pointer:fine){.band:hover .panel:hover{flex-grow:6}}
.caption{margin-top:1.25rem}

.calendar{background:var(--field-2)}
.months{display:flex;flex-wrap:wrap;gap:.375rem}
.months button{font:inherit;min-width:3.5rem;min-height:2.75rem;padding:0 .75rem;background:rgba(0,0,0,.08);color:#000;border:0;border-radius:0;cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.months button:active{transform:scale(.96)}
.months button[aria-checked="true"]{background:#000;color:var(--accent)}
@media (hover:hover) and (pointer:fine){.months button:hover{background:rgba(0,0,0,.16)}.months button[aria-checked="true"]:hover{background:#000}}
.issue{background:#fff;padding:clamp(1.25rem,3vw,2.5rem);display:grid;gap:1rem;max-width:44rem}
.issue-title{font-size:var(--step-head);line-height:.92;text-transform:uppercase}
.issue-topics{display:grid;gap:.5rem}
.issue-topics li{padding-left:1.25rem;position:relative}
.issue-topics li::before{content:"";position:absolute;left:0;top:.7em;width:.5rem;height:.5rem;background:var(--field-3)}
.issue.swap{animation:swap 360ms var(--ease-out)}
@keyframes swap{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}

.stair{display:grid;gap:3.5rem;counter-reset:none}
.stair li{display:grid;gap:.75rem}
.stair li:nth-child(1){margin-left:0}
.stair li:nth-child(2){margin-left:16.66%}
.stair li:nth-child(3){margin-left:33.33%}
.stair li:nth-child(4){margin-left:50%}
.stair-line{font-family:var(--font-display);font-size:var(--step-head);line-height:1;text-transform:uppercase;max-width:none}
.stair li:nth-child(4) .stair-line{color:#000;background:var(--accent);display:inline;justify-self:start;padding:0 .15em}
.stair-note{max-width:34ch}

.pricing{background:var(--bg)}
.price-table{padding-top:.5rem}
table{width:100%;border-collapse:collapse;font-size:var(--step-lead);line-height:1.3}
th,td{text-align:left;vertical-align:top;padding:1.25rem 1rem;font-weight:400}
thead th{vertical-align:bottom;padding-top:1.25rem}
th.corner{width:34%;padding-left:0}
tbody th{padding-left:0}
tbody tr:nth-child(odd) th,tbody tr:nth-child(odd) td{background:var(--surface)}
.rec,tbody tr:nth-child(odd) td.rec{background:var(--accent)}
.plan{display:block;font-weight:500;font-size:var(--step-lead);line-height:1.1}
.amount{display:block;font-family:var(--font-display);font-size:var(--step-head);line-height:1}
.per{display:block;font-size:var(--step-small)}
.actions td{font-size:var(--step-small)}
.price-note{margin-top:1.5rem}

.limits{background:var(--field-3)}
.limit-list{grid-column:2;margin-top:2.5rem;display:grid;gap:1.25rem;font-size:var(--step-lead);line-height:1.35;max-width:40ch}

.faq{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem}
.faq-head{grid-column:1 / span 3;font-size:var(--step-head);line-height:.92;text-transform:uppercase}
.faq-text{grid-column:5 / span 8;columns:2;column-gap:3.5rem}
.faq-text p{break-inside:avoid;margin-bottom:1.25rem}
.faq-text strong{font-weight:500}

.footer{background:var(--field-4);color:var(--field-4-ink);padding:clamp(3rem,8vw,6rem) var(--margin) 2rem;overflow:hidden;min-height:80svh;display:flex;flex-direction:column}
.footer-name{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(3rem,14.2vw,17rem);line-height:.85;white-space:nowrap;letter-spacing:-.02em;max-width:none}
.footer-row{display:grid;grid-template-columns:5fr 1fr 6fr;margin-top:4.5rem}
.places{display:grid;gap:.5rem;font-size:var(--step-lead);line-height:1.2;color:var(--accent);overflow-wrap:anywhere}
.small-links{grid-column:3;columns:3;font-size:var(--step-small)}
.small-links li{margin-bottom:.4rem}
.footer-legal{margin-top:auto;padding-top:5rem;display:grid;grid-template-columns:1fr auto;gap:.75rem 2rem;font-size:var(--step-small)}
.footer-legal .credits{grid-column:1;color:#cfcfcf}
.footer-legal>a{grid-column:2;grid-row:1}

/* inner pages */
.doc-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:var(--margin);background:var(--surface)}
.doc{padding:clamp(2.5rem,7vw,6rem) var(--margin) var(--section);display:grid;grid-template-columns:var(--axis) 1fr}
.doc>*{grid-column:2;max-width:40rem}
.doc h1{font-size:clamp(2.5rem,1.4rem + 3.6vw,4.5rem);line-height:.92;text-transform:uppercase;margin-bottom:1.5rem}
.doc h2{font-family:var(--font-text);font-weight:500;font-size:1.375rem;line-height:1.25;margin:2.25rem 0 .5rem;text-transform:none}
.doc h3{font-family:var(--font-text);font-weight:500;font-size:1.125rem;margin:1.5rem 0 .4rem}
.doc p,.doc li{margin-bottom:.75rem}
.doc ul{padding-left:1.25rem}
.doc .note{background:var(--accent);padding:1rem 1.25rem;margin-bottom:2rem}
.doc .letter{background:var(--surface);padding:clamp(1.25rem,4vw,3rem);margin-bottom:2rem}
.doc .letter h1{font-size:clamp(2rem,1.2rem + 3vw,3.5rem)}
.doc form{display:grid;gap:.75rem;max-width:28rem;margin:1.5rem 0}
.doc label{font-weight:500}
.doc input[type=email]{font:inherit;font-size:max(16px,1rem);min-height:3.25rem;padding:.75rem 1rem;background:var(--surface);border:0;border-bottom:2px solid #000;border-radius:0;width:100%}
.doc button{font:inherit;min-height:3.25rem;background:#000;color:#fff;border:0;border-radius:0;cursor:pointer;transition:transform var(--t-press) var(--ease-out)}
.doc button:active{transform:scale(.97)}
.doc-foot{background:var(--field-4);color:#fff;padding:2rem var(--margin);font-size:.875rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}

/* motion: content stays visible without JS; hidden states only under html.js + no-preference */
@media (prefers-reduced-motion:no-preference){
  .js .lines [data-line]{transform:translateY(105%);animation:line-up 900ms var(--ease-expo) forwards;animation-delay:calc(var(--i)*110ms + 150ms)}
  .js [data-rise]{opacity:0;transform:translateY(18px);animation:rise 800ms var(--ease-out) forwards;animation-delay:620ms}
  .js .hero-picture img{animation:drift 14s var(--ease-soft) both}
  .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-expo)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js .stair li:nth-child(2){transition-delay:70ms}.js .stair li:nth-child(3){transition-delay:140ms}.js .stair li:nth-child(4){transition-delay:210ms}
  .js .axis-body,.js .limit-list,.js .faq-text,.js .band{transition-delay:90ms}
}
@media (prefers-reduced-motion:reduce){.panel{transition:none}.issue.swap{animation:none}}
@keyframes line-up{to{transform:none}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes drift{from{transform:scale(1.08)}to{transform:scale(1)}}

/* tablet: the axis collapses before it can leave half the screen empty */
@media (max-width:1024px){
  .axis{grid-template-columns:1fr}
  .axis>.head,.axis-body,.limit-list{grid-column:1}
  .faq{grid-template-columns:1fr}
  .faq-head,.faq-text{grid-column:1}
  .faq-head{margin-bottom:2rem}
  .footer-row{grid-template-columns:1fr 1fr;gap:2.5rem}
  .small-links{grid-column:2;columns:2}
}
/* phone composition */
@media (max-width:760px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-bottom:0}
  .hero-talk{display:contents}
  .wordmark{grid-row:1}
  .hero-stage{display:contents}
  .nav{grid-row:2;margin-top:1rem;gap:1.1rem;flex-wrap:wrap}
  .hero h1{grid-row:3;margin-top:2.5rem;font-size:15vw;line-height:.85}
  .hero-pitch{grid-row:4;margin-top:1.5rem}
  .hero-pitch .button{width:100%}
  .hero-picture{grid-row:5;margin:2.5rem calc(var(--margin)*-1) 0;padding-top:0}
  .hero-picture img{height:auto;aspect-ratio:4/3}
  .hero-figure{width:60%;top:-1.5rem;left:var(--margin)}
  .axis,.doc{grid-template-columns:1fr}
  .axis>.head,.axis-body,.limit-list,.doc>*{grid-column:1}
  .showcase .head{margin-left:0;margin-bottom:2rem}
  .band{display:grid;grid-template-columns:64fr 36fr;grid-template-rows:1fr 1fr;height:84svh}
  .panel.p3{grid-column:1/2}.panel.p4{grid-column:2}
  .band .panel:nth-child(3){order:4}.band .panel:nth-child(4){order:3}
  .panel-title{padding:1rem}
  .stair{gap:2.5rem}
  .stair li:nth-child(2){margin-left:6vw}.stair li:nth-child(3){margin-left:12vw}.stair li:nth-child(4){margin-left:18vw}
  .stair-line{font-size:8.4vw}
  .faq{grid-template-columns:1fr}
  .faq-head,.faq-text{grid-column:1}
  .faq-text{columns:1}
  .footer-row{grid-template-columns:1fr;gap:2.5rem}
  .small-links{grid-column:1;columns:2}
  .footer-legal{grid-template-columns:1fr}
  .footer-legal>a{grid-column:1;grid-row:auto}
}
.mobile-plans{display:none}
@media (max-width:760px){
  .price-table{display:none}
  .mobile-plans{display:grid;gap:2rem}
  .mplan{background:var(--surface);padding:1.5rem;display:grid;gap:.85rem}
  .mplan.rec{background:var(--accent)}
  .mplan h3{font-family:var(--font-display);font-size:var(--step-head);line-height:.95;text-transform:uppercase}
  .mplan dl{margin:0;display:grid;gap:.6rem}
  .mplan dt{color:var(--muted)}
  .mplan dd{margin:0}
  .mplan .button{width:100%}
  .mobile-plans .head{margin-bottom:.5rem}
}
.link-plain{text-underline-offset:.2em}