/* The new Cloud Window home page: the same paper, ink and serif as before, with room for pictures. */
.site-header nav .nav-invite{padding:6px 14px;border:1px solid currentColor;border-radius:999px}
.site-header nav .nav-invite:hover{text-decoration:none;background:#ffffff66}
.hero h1{max-width:1100px;margin:0 auto}
.hero-bottom>p{font-family:var(--serif)}

/* The big picture under the three steps. */
.showcase{margin:72px 0 0}
.showcase img,.feature-grid img,.agents-figures img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#0f1416;box-shadow:0 18px 40px -24px #172c3566}
.showcase figcaption,.agents-figures figcaption{font:13px/1.6 var(--sans);color:var(--muted);margin-top:14px;text-align:center}

/* Feature grid: a picture, a title, two lines. */
.inside{padding-top:76px;padding-bottom:96px;border-top:1px solid var(--line)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px}
.feature-grid article{display:flex;flex-direction:column}
.feature-grid img{aspect-ratio:16/10;object-fit:cover;object-position:top left;margin-bottom:20px}
.feature-grid img.portrait{aspect-ratio:16/10;object-fit:cover;object-position:top center}
.feature-grid h3{font-size:23px;line-height:1.2;letter-spacing:-.5px;margin-bottom:10px}
.feature-grid p{font:14px/1.75 var(--sans);color:var(--muted)}

/* Agents: the argument on the left, two pictures on the right. */
.agents{padding-top:80px;padding-bottom:96px;border-top:1px solid var(--line)}
.agents-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:start}
.agent-points{list-style:none;padding:0;margin:34px 0 0}
.agent-points li{font:15px/1.75 var(--sans);color:var(--muted);padding:18px 0;border-top:1px solid var(--line)}
.agent-points strong{display:block;font:400 21px/1.3 var(--serif);color:var(--ink);letter-spacing:-.4px;margin-bottom:6px}
.agent-points code,.agents-figures code{font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:#ecebe2;padding:2px 6px;border-radius:4px;color:var(--ink)}
.agents-figures{display:flex;flex-direction:column;gap:34px;position:sticky;top:32px}

/* Pricing: two quiet cards. */
.pricing{padding-top:76px;padding-bottom:88px;border-top:1px solid var(--line)}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:900px;margin:0 auto}
.plan{border:1px solid var(--line);border-radius:12px;padding:34px 34px 30px;background:#fffdf7}
.plan .eyebrow{margin-bottom:14px}
.plan h3{font-size:22px;line-height:1.1;margin-bottom:22px;display:flex;align-items:baseline;gap:10px}
.plan .price{font-size:56px;letter-spacing:-2.4px}
.plan .per{font:15px var(--sans);color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:0}
.plan li{font:14px/1.7 var(--sans);color:var(--muted);padding:9px 0;border-top:1px solid var(--line)}
.pricing-note{font:13px/1.7 var(--sans);color:var(--muted);text-align:center;max-width:640px;margin:30px auto 0}

/* Invite: the one form on the page. */
.invite{padding-top:76px;padding-bottom:88px;border-top:1px solid var(--line);scroll-margin-top:38px}
.invite-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.invite .prose{margin-top:18px;max-width:440px}
.invite .waitlist-form{margin-top:0}
.invite .waitlist-status{font:14px/1.7 var(--sans);color:var(--ink);margin-top:18px}
.invite .waitlist-status.is-error{color:#8b392d}
.waitlist-fields{flex-direction:row;align-items:stretch}
.waitlist-fields input{flex:1 1 260px}

.questions{scroll-margin-top:38px}
.footer-links{white-space:nowrap}
.site-footer p{max-width:520px}

@media(max-width:1000px){
 .feature-grid{grid-template-columns:1fr 1fr;gap:40px 28px}
 .agents-grid{grid-template-columns:1fr;gap:40px}
 .agents-figures{position:static}
 .invite-grid{gap:40px}
 .plan-grid{gap:24px}
}
@media(max-width:600px){
 .showcase{margin-top:44px}
 .inside,.agents,.pricing,.invite{padding-top:52px;padding-bottom:58px}
 .feature-grid{grid-template-columns:1fr;gap:36px}
 .feature-grid h3{font-size:22px}
 .agent-points strong{font-size:20px}
 .plan-grid{grid-template-columns:1fr}
 .plan{padding:26px 22px 22px}
 .plan .price{font-size:48px}
 .invite-grid{grid-template-columns:1fr;gap:26px}
 .waitlist-fields{flex-direction:column;align-items:stretch}
 .footer-links{white-space:normal}
 #inside-title .desktop-break,#pricing-title .desktop-break{display:none}
}

/* The header on a phone: the brand, Pricing and the invite pill; narrower still, the pill alone. */
@media(max-width:600px){
 .site-header nav a.nav-wide{display:none}
 .site-header nav .nav-invite{padding:4px 10px;white-space:nowrap}
 .site-header nav{gap:12px}
}
@media(max-width:420px){
 .site-header nav a:not(.nav-invite){display:none}
}

/* The logo mark beside the wordmark. */
a.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{display:block;width:41px;height:22px}
.site-footer a.brand .brand-mark{width:37px;height:20px}
.prose strong{color:var(--ink);font-weight:600}
.hero-bottom>.hero-note .note-break{display:inline}
@media(max-width:600px){.brand-mark{width:34px;height:18px}.hero-bottom>.hero-note{max-width:330px}}

/* The intro heading carries a full sentence, so it sits a size down from the other section titles. */
.intro-title{font-size:clamp(32px,3.3vw,50px);letter-spacing:-1.4px;line-height:1.1}
.intro-lead{font-family:var(--serif);font-size:clamp(20px,1.7vw,26px);line-height:1.35;color:var(--muted);margin-top:20px}
.hero-break{display:inline}
@media(max-width:600px){.intro-title{font-size:32px;letter-spacing:-1.1px}.intro-lead{font-size:19px;margin-top:14px}.hero-bottom>p{max-width:340px}}

/* Mid widths (a narrow window, an iPad, a browser pane): the header must never wrap or run off the edge. */
.site-header nav a{white-space:nowrap}
@media(max-width:1100px){.site-header nav{gap:26px;font-size:16px}}
@media(max-width:900px){.site-header nav a.nav-wide{display:none}.site-header nav{gap:20px}.site-header{padding-left:3.2%;padding-right:3.2%}}
@media(max-width:700px){.brand{font-size:22px}.site-header nav .nav-invite{padding:5px 12px}}

/* Sign in and the invite-code entry: the portal is a separate origin for now. */
.site-header nav .nav-signin{white-space:nowrap}
.invite-code-form{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);font:14px/1.6 var(--sans)}
.invite-code-form label{display:block;margin-bottom:9px;color:var(--ink)}
.waitlist-fields button.secondary-button{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.waitlist-fields button.secondary-button:hover{background:#ecebe2;transform:none}
@media(max-width:600px){.site-header nav a.nav-signin{display:none}}
@media(min-width:601px) and (max-width:900px){.site-header nav a.nav-signin{display:inline-flex}}

/* Responsive audit (2026-09): headline clear of the header, balanced wrapping, comfortable tap targets, form fields that keep their height. */
h1,h2,h3,.hero-bottom>p,.hero-note,.intro-lead,.closing p{text-wrap:balance}
.prose p,.feature-grid p,.agent-points li,.question-list p,.plan li{text-wrap:pretty}
.waitlist-fields button{white-space:nowrap}
.feature-grid img.portrait{object-fit:contain;object-position:center}

/* The hero headline starts a full gap below the header (28px padding + ~34px nav + 30px air), whatever the viewport height. */
@media(min-width:601px){.hero h1{top:max(9%,96px)}}

/* Tablet and narrower: one column for the invite forms so the buttons keep one line. */
@media(max-width:900px){
 .invite-grid{grid-template-columns:1fr;gap:34px}
 .invite .prose,.invite .waitlist-form,.invite .invite-code-form{max-width:560px}
}

/* Touch sizes: header links, hero links and question rows reach 44px. */
@media(max-width:900px){
 .site-header{padding-top:16px;padding-bottom:16px}
 .site-header a.brand{min-height:44px}
 .site-header nav a:not(.nav-invite):not(.nav-wide):not(.nav-signin){display:inline-flex;align-items:center;min-height:44px}
 .site-header nav a.nav-signin{align-items:center;min-height:44px}
 .site-header nav .nav-invite{display:inline-flex;align-items:center;min-height:40px}
 .hero-actions a{padding-top:10px;padding-bottom:6px}
 .question-list summary{min-height:44px;align-items:center}
 .site-footer a:not(.brand){display:inline-block;padding:8px 0}
}
@media(max-width:600px){
 .site-header nav .nav-invite{padding:4px 12px}
 .hero h1{top:84px;font-size:clamp(34px,9.6vw,43px)}
 .hero-actions{gap:0;margin:8px 0 10px}
 /* In a column the fields must not use the 260px flex-basis as a height. */
 .waitlist-fields input{flex:none}
}
@media(max-width:420px){.site-header nav a:not(.nav-invite):not(.nav-wide):not(.nav-signin){display:none}}
/* Phone hero: the headline, then the promise right under it, the art, then the links and a one-line note at the bottom. The header stays absolute above. */
@media(max-width:600px){
  /* The art is anchored to the bottom so it never ends mid-hero; the hero background matches the image's top edge so the sky above it is seamless. */
  .hero{display:flex;flex-direction:column;align-items:center;height:auto;min-height:max(100svh,780px);padding:96px 22px 26px;box-sizing:border-box;background:#95bad4}
  .hero-art{background-size:auto 88%;background-position:center 100%}
  /* The art fills the height, so the cloud top always sits near 28% of the screen; the headline is pushed down to meet it instead of hugging the header. */
  .hero h1{position:static;order:1;margin-top:clamp(0px,3svh,32px);font-size:clamp(29px,8.3vw,38px);letter-spacing:-1px;line-height:1.1;padding:0 4px;left:auto;right:auto;top:auto}
  .hero-bottom{display:contents}
  .hero-bottom>p:not(.hero-note){order:2;margin:14px auto 0;font-size:17px;line-height:1.4;max-width:300px}
  .hero-actions{order:3;margin:auto 0 14px;padding-top:24px}
  .hero-bottom>.hero-note{order:4;margin:0;max-width:320px;font-size:12px;line-height:1.45}
  .hero-note .note-wide,.hero-note .note-break{display:none}
}
/* Phones: the portrait phone capture keeps its own shape instead of being letterboxed into a 16:10 dark box. */
@media(max-width:600px){
  .feature-grid img.portrait{aspect-ratio:auto;height:auto;width:auto;max-width:68%;max-height:540px;display:block;margin:0 auto 20px;object-fit:contain;background:transparent;box-shadow:0 12px 32px rgba(23,44,53,.18)}
}
/* The instant-trial entry is a solid pill so it reads over the artwork; the other hero links stay as text. */
.hero-actions .hero-choice .choice-label{background:var(--ink);color:#f8f6ef;border:0;border-radius:999px;padding:11px 22px 12px;opacity:1;font-size:19px;line-height:1.2;box-shadow:0 10px 28px rgba(23,44,53,.28)}
.hero-actions .hero-choice .choice-label .link-arrow{stroke:#f8f6ef}
.hero-actions .hero-choice:hover .choice-label{background:#0f1f26}
.hero-actions .hero-choice small{color:#1f3640;background:rgba(248,246,239,.72);border-radius:8px;padding:3px 8px}
@media(max-width:600px){.hero-actions .hero-choice .choice-label{font-size:17px;padding:10px 18px 11px}}
/* Wide hero (tablets, laptops, desktops): the headline, the promise right under it, the art below the words, then one centred row of actions with its caption and the note. The art is 89% of the hero's height (or sized by the width on a portrait tablet) and anchored to the bottom, so the cloud starts under the promise and ends above the actions; the hero background matches the image's top edge and the art's top fades into it. */
@media(min-width:601px){
  .hero{--art-h:min(calc(max(660px,100svh)*.87),104vw);display:flex;flex-direction:column;align-items:center;padding:max(9svh,96px) 24px max(2.6svh,18px);box-sizing:border-box}
  .hero-art{top:auto;bottom:0;height:var(--art-h);width:calc(var(--art-h)*1.5988);margin-left:calc(var(--art-h)*-.7994);-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 12%);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 12%);-webkit-mask-composite:source-in;mask-composite:intersect}
  /* Behind and beside the art: a sky made from the picture's own edge colours (assets/cloud-window-sky.webp, 64 px wide), at the art's vertical scale and stretched to the width, so the horizon lines up and no blurred cloud shows at the sides; above it the hero's own gradient continues the sky's top row. */
  .hero{background:linear-gradient(to right,#7eaec9,#b1cde1) center/max(100%,calc(var(--art-h)*1.5988)) 100% no-repeat}
  .hero::before{inset:0;filter:none;background:url('/assets/cloud-window-sky.webp') center bottom/max(100%,calc(var(--art-h)*1.5988)) var(--art-h) no-repeat}
  .hero h1{position:static;order:1;top:auto;left:auto;right:auto}
  .hero-bottom{display:contents}
  .hero-bottom>p:not(.hero-note){order:2;margin:clamp(10px,1.8svh,18px) auto 0}
  .hero-break{display:none}
  .hero-actions{order:3;position:relative;align-items:center;margin:auto 0 0;padding-bottom:32px}
  .hero-actions .hero-choice small{position:absolute;left:0;right:0;bottom:0;max-width:none;background:none;padding:0;font-size:14px;color:#1f3640}
  .hero-bottom>.hero-note{order:4;margin:10px 0 0}
  .hero-actions a{white-space:nowrap}
  /* A tall, large screen gets a larger headline and promise instead of stopping at the laptop size. */
  .hero h1{font-size:clamp(42px,6.35svh,80px)}
  .hero-bottom>p:not(.hero-note){font-size:clamp(18px,2.55svh,28px)}
}
/* A narrow tablet keeps the three actions on one row. */
@media(min-width:601px) and (max-width:720px){
  .hero-actions a{font-size:17px;padding-left:14px;padding-right:14px}
  .hero-actions .hero-choice .choice-label{font-size:17px;padding:10px 18px 11px}
}