/* CloudBake marketing pages, on Tutti's tokens (assets/tutti.css).
   Tutti look: grey ground, white pieces, ink text, the system sans at 400/500, capsule buttons,
   colour only for status. Taste structure: equal edges, real product UI. Sections size to their content
   (the user's call over Taste's one-section-per-screen rule); only the hero fills the screen. */

:root {
  --nav: 64px;
  --gut: 80px;
  --padt: 96px;  /* top + bottom = the gap between two sections: 160 / 120 / 96 px */
  --padb: 64px;
  --wrap: 1280px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 1023px) { :root { --gut: 40px; --padt: 72px; --padb: 48px; } }
@media (max-width: 639px) { :root { --nav: 56px; --gut: 20px; --padt: 56px; --padb: 40px; } }

html { scroll-padding-top: var(--nav); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button, a, [role="button"] { touch-action: manipulation; }
button, .btn { user-select: none; -webkit-user-select: none; }
body.site { font-size: 16px; line-height: 24px; }
::selection { background: var(--t-foreground); color: var(--t-background); }
a { text-underline-offset: 3px; }

.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gut))); margin: 0 auto; }
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { clip-path: none; width: auto; height: auto; padding: 8px 12px; background: var(--t-card); border-radius: var(--t-radius-sm); z-index: 20; top: 12px; }

/* ---------- type: the sans at 500 for headlines, 400 for everything else */
.h1 { font-size: clamp(40px, 3.4vw + 14px, 68px); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
.h2 { font-size: clamp(28px, 1.6vw + 16px, 44px); line-height: 1.1; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; max-width: 22ch; }
.h2 .t-muted { color: var(--t-muted-foreground); }
/* Body copy people read stays at 7:1 or more (Taste); Tutti's darkest grey step (#3a3a3c / #c7c7cc) carries it. */
.lead { font-size: 17px; line-height: 26px; color: var(--t-chart-5); max-width: 56ch; text-wrap: pretty; }
.h3 { font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -0.01em; }

/* ---------- buttons: Tutti capsules at marketing size (44 px) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 9999px; font: 400 16px/1 var(--t-font); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color 150ms var(--t-ease), transform 160ms var(--ease-out), filter 150ms var(--t-ease); }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--t-primary); color: var(--t-primary-foreground); }
.btn--secondary { background: var(--t-secondary); color: var(--t-foreground); }
.btn--light { background: #fff; color: #1c1c1e; }
.btn--glass { background: rgb(17 17 19 / 0.42); color: #fff; }
.btn--sm { height: 36px; padding: 0 16px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: color-mix(in srgb, var(--t-primary) 86%, transparent); }
  .btn--secondary:hover { filter: brightness(0.95); }
  .btn--light:hover { background: #f2f2f7; }
  .btn--glass:hover { background: rgb(17 17 19 / 0.58); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link { color: var(--t-foreground); text-decoration: underline; text-decoration-color: var(--t-wire); text-decoration-thickness: 1px; transition: text-decoration-color 150ms var(--t-ease); }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* ---------- nav: fixed, opaque, a hairline from the first paint */
/* Fixed to the top edge: it clears a phone's status bar with the safe-area inset (0 elsewhere). */
.nav { position: fixed; inset: 0 0 auto; z-index: 10; height: calc(var(--nav) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: var(--t-background); box-shadow: 0 1px 0 var(--t-border); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; font-size: 18px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--t-foreground); }
.nav__links { display: flex; gap: 24px; font-size: 15px; }
.nav__links a { color: var(--t-muted-foreground); transition: color 150ms var(--t-ease); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--t-foreground); } }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 15px; }
.nav__end > a:not(.btn) { color: var(--t-foreground); }
.nav__menu { display: none; }
@media (max-width: 1023px) { .nav__links { display: none; } .nav__menu { display: inline-flex; } .nav__signin { display: none; } }
@media (max-width: 639px) { .nav__end > a.btn { display: none; } } /* phones: Start rendering lives in the menu sheet */

.sheet-menu { position: fixed; inset: var(--nav) 0 0; z-index: 9; background: var(--t-background); padding: 8px var(--gut) 24px; display: none; flex-direction: column; }
.sheet-menu { opacity: 0; transform: translateY(-4px); transition: opacity 150ms var(--t-ease), transform 150ms var(--ease-out), display 150ms allow-discrete; }
.sheet-menu[data-open="true"] { display: flex; opacity: 1; transform: none; }
@starting-style { .sheet-menu[data-open="true"] { opacity: 0; transform: translateY(-4px); } }
.sheet-menu a { display: flex; align-items: center; min-height: 56px; font-size: 20px; border-bottom: 1px solid var(--t-border); }
.sheet-menu .btn { margin-top: 24px; }

/* ---------- sections: one or two screens each, the h2 first and top-aligned */
/* A section is as tall as its content plus the shared padding; the hero alone fills the screen. */
#main > section { padding: var(--padt) 0 var(--padb); display: flex; flex-direction: column; }
#main > section > .wrap { flex: 1; display: flex; flex-direction: column; }
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
@media (max-width: 639px) { .sec-head { margin-bottom: 32px; } }

/* ---------- hero: the render, inset 10 px with the large radius, words on its calm top */
#main > section.hero { padding: calc(var(--nav) + 10px) 10px 24px; min-height: 100svh; }
.hero__ground { position: relative; flex: 1; border-radius: var(--t-radius-lg); overflow: hidden; background: #1d2b3c; display: flex; flex-direction: column; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 90% 60%; }
/* Room to breathe: headline, sub-line, buttons and fact each get their own band, and the window
   below never starts closer than 56 px to the fact line (the hero grows rather than crowd it). */
.hero__inner { position: relative; padding: clamp(64px, 9vh, 112px) calc(var(--gut) - 10px) 56px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; color: #fff; }
.hero__inner .h1 { max-width: 16ch; }
.hero__sub { font-size: 18px; line-height: 30px; max-width: 46ch; color: rgb(255 255 255 / 0.92); text-wrap: pretty; }
.hero__inner .btn-row { justify-content: center; margin-top: 12px; }
.hero__fact { font-size: 14px; line-height: 22px; margin-top: 4px; color: rgb(255 255 255 / 0.86); }
.hero__window { position: relative; margin: auto auto 0; width: min(var(--wrap), calc(100% - 2 * (var(--gut) - 10px))); transform: translateY(1px); }

/* The product window: a white app frame with a 1 px line, one radius. */
:root { --window-ring: rgb(0 0 0 / 0.08); --window-bar: var(--t-background); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --window-ring: rgb(255 255 255 / 0.1); --window-bar: var(--t-card); } }
:root[data-theme="dark"] { --window-ring: rgb(255 255 255 / 0.1); --window-bar: var(--t-card); }
.window { background: var(--t-card); border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0; box-shadow: 0 0 0 1px var(--window-ring), 0 24px 64px rgb(0 0 0 / 0.28); overflow: hidden; }
.window--whole { border-radius: var(--t-radius-lg); box-shadow: 0 0 0 1px var(--window-ring); }
.window__bar { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--window-bar); box-shadow: inset 0 -1px 0 var(--t-border); font-size: 12px; color: var(--t-muted-foreground); }
.window__dots { display: flex; gap: 6px; }
.window__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--t-wire); }
.window__title { flex: none; margin: 0 auto; padding-right: 48px; }
.window__body { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); min-height: 300px; }
@media (max-width: 900px) { .window__body { grid-template-columns: minmax(0, 1fr); } .window__body > .term { display: none; } }

/* Terminal pane (code view: the only mono). */
.term { background: #1c1c1e; color: #e5e5ea; padding: 16px 18px; font: 13px/20px var(--t-mono); white-space: pre-wrap; overflow: hidden; }
.term .dim { color: #aeaeb2; }
.term .ok { color: #f2f2f7; }
.term .tool { color: #f2f2f7; }
.term__caret { display: inline-block; width: 7px; height: 15px; background: #e5e5ea; vertical-align: -3px; animation: caret 1.1s steps(1) 6; }
@keyframes caret { 50% { opacity: 0; } }

/* App pane: Tutti rows inside the frame. */
.pane { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--t-background); min-width: 0; }
.pane__head { display: flex; align-items: center; gap: 12px; }
.pane__head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thumb { flex: none; width: 50px; height: 28px; border-radius: var(--t-radius-xs); object-fit: cover; background: var(--t-muted); }
.req-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.req-row .t-status, .req-row .t-row__value { justify-self: end; text-align: right; }
.req-row .t-row__text > .t-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phones: the status moves under the name, as in the app. */
@media (max-width: 639px) {
  .req-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
  .req-row .t-status, .req-row .t-row__value { grid-column: 2; justify-self: start; text-align: left; }
}

/* ---------- works-with strip */
.works { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 0 0; }
.works__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
.works__logos span { display: inline-flex; align-items: center; gap: 10px; color: var(--t-foreground); font-size: 15px; }
.works__logos svg { width: 22px; height: 22px; }

/* ---------- statement and the four jobs */
.statement .h2 { max-width: 26ch; }
.jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jobs article { background: var(--t-card); border-radius: var(--t-radius-md); padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.jobs h3, .jobs p { padding: 0 4px; }
.jobs p { color: var(--t-muted-foreground); font-size: 15px; line-height: 22px; }
.job__visual { height: 120px; margin-bottom: 10px; border-radius: var(--t-radius-sm); background: var(--t-muted); overflow: hidden; position: relative; }
.job__frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 10px; height: 100%; align-content: center; }
.job__frames img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--t-radius-xs); display: block; }
.job__maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 10px; height: 100%; }
.job__maps img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--t-radius-xs); display: block; filter: grayscale(1) contrast(1.15); }
.job__maps img:nth-child(2) { filter: grayscale(1) invert(1) contrast(1.1); }
.job__code { margin: 0; height: 100%; padding: 12px; background: #1c1c1e; color: #e5e5ea; font: 12px/18px var(--t-mono); white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; }
.job__code .dim { color: #aeaeb2; }
.job__files { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; height: 100%; padding: 10px; }
.job__files span { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 9999px; background: var(--t-card); font: 13px/1 var(--t-mono); }
.job__files svg { width: 14px; height: 14px; color: var(--t-muted-foreground); }
.job__files .from { background: var(--t-foreground); color: var(--t-background); }
.statement .works { margin-top: 48px; }
@media (max-width: 1023px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 639px) { .jobs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- split sections: words left, the visual right */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; flex: 1; }
.split .sec-head { margin-bottom: 0; }
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 1023px) { .split, .split--flip { grid-template-columns: minmax(0, 1fr); gap: 40px; } .split--flip > :first-child { order: 2; } }
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; counter-increment: s; font-size: 16px; line-height: 24px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--t-card); font-size: 13px; }

/* Chat mock (a neutral chat, not a copy of any app's interface). */
.chat { background: var(--t-card); border-radius: var(--t-radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.chat__msg { align-self: flex-end; max-width: 78%; background: var(--t-background); border-radius: var(--t-radius-lg); padding: 10px 14px; font-size: 15px; line-height: 22px; }
.chat__app { display: flex; flex-direction: column; gap: 12px; }
.chat__from { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t-muted-foreground); }
.chat__card { border-radius: var(--t-radius-md); background: var(--t-background); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.frames img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--t-radius-xs); display: block; }

/* The dashboard section: a request's frames beside its settings. */
a.window { display: block; color: inherit; }
.dash-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; padding: 16px; background: var(--t-background); }
.dash-detail__frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; }
.dash-detail__frames img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--t-radius-sm); display: block; }
.dash-detail__side { display: flex; flex-direction: column; gap: 12px; }
.dash-detail__side .t-btn { align-self: flex-start; }
@media (max-width: 900px) { .dash-detail { grid-template-columns: minmax(0, 1fr); } .dash-detail__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Code block: the command and its copy button side by side, never on top of each other. */
.code { display: flex; align-items: center; gap: 8px; max-width: 100%; background: #1c1c1e; color: #e5e5ea; border-radius: var(--t-radius-md); padding: 8px 8px 8px 16px; font: 13px/20px var(--t-mono); }
.code__text { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; padding: 4px 0; }

/* The AI apps: two white cards side by side, each with its working example on the ground colour inside. */
.ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1023px) { .ai-grid { grid-template-columns: minmax(0, 1fr); } }
.ai-card { background: var(--t-card); border-radius: var(--t-radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ai-card__head { display: flex; align-items: center; gap: 12px; }
.ai-card__head > div { display: flex; flex-direction: column; min-width: 0; }
.ai-card .chat { background: none; padding: 0; flex: 1; }
.ai-card .term { border-radius: var(--t-radius-md); flex: 1; min-height: 200px; }
.ai-card > .btn { align-self: flex-start; }
.code .t-btn { flex: none; background: #38383b; color: #f2f2f7; }

/* Photo frame; only a linked photo zooms inside its frame on hover. */
.photo { border-radius: var(--t-radius-lg); overflow: hidden; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
a.photo img { transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.photo:hover img { transform: scale(1.025); } }

/* ---------- close and footer */
/* The close and the footer share the last section (Taste: footer.closing is the page's last section). */
#main > section.closing { padding-bottom: 0; }
.close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: start; }
.close > :first-child { grid-column: 1 / span 5; }
.close > :last-child { grid-column: 7 / span 6; }
.close .photo { aspect-ratio: 16 / 9; }
@media (max-width: 1023px) { .close > :first-child, .close > :last-child { grid-column: 1 / -1; } }
.footer { margin-top: auto; padding: 32px 0 40px; box-shadow: inset 0 1px 0 var(--t-border); font-size: 14px; line-height: 20px; color: var(--t-muted-foreground); }
.closing > .wrap { flex: 0 0 auto; margin-bottom: var(--padt); }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.footer .brand { font-size: 16px; }
.footer__links { display: flex; gap: 20px; margin-left: auto; }
.footer__links a, .footer a.made { color: var(--t-foreground); }
.footer__legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.credits summary { cursor: pointer; list-style: none; text-decoration: underline; text-decoration-color: var(--t-wire); text-underline-offset: 3px; }
.credits summary::-webkit-details-marker { display: none; }
.credits ul { margin: 8px 0 0; padding-left: 18px; }

/* Hover lift for linked cards (Taste house rule 5), 2 px, pointer devices only. */
@media (hover: hover) and (pointer: fine) {
  .lift { transition: transform 200ms var(--ease-out); }
  .lift:hover { transform: translateY(-2px); }
}

@media (max-width: 639px) {
  body.site { font-size: 16px; }
  .hero__sub { font-size: 16px; line-height: 26px; }
  .hero__inner { gap: 20px; padding-bottom: 40px; }
  .btn-row .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .term__caret { animation: none; }
}

/* Browser surfaces in the palette (Impeccable craft floor): caret, scrollbars, native controls. */
html { caret-color: var(--t-foreground); scrollbar-color: var(--t-wire) transparent; accent-color: var(--t-foreground); }

/* ---------- request access: one email field and its button. The hero's sits on the render,
   the close's on the ground colour. After sending, the fields give way to the confirmation. */
[hidden] { display: none !important; }
.access { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.access__fields { display: flex; flex-direction: column; gap: 12px; }
.access__row { display: flex; gap: 8px; }
.access__row .btn { flex: none; }
.access__input { flex: 1; min-width: 0; height: 44px; padding: 0 18px; border: 0; border-radius: 9999px; background: var(--t-card); color: var(--t-foreground); font: 400 16px/1 var(--t-font); text-align: left; }
.access__input::placeholder { color: var(--t-muted-foreground); }
.access__input:focus-visible { outline: 2px solid var(--t-ring); outline-offset: 2px; }
.access__input[aria-invalid="true"] { outline: 2px solid var(--t-failed); outline-offset: 2px; }
.access__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.access__msg { font-size: 14px; line-height: 20px; color: var(--t-failed); }
.access__msg:empty { display: none; }
.access__note { font-size: 13px; line-height: 18px; color: var(--t-muted-foreground); }
.access__done { display: flex; flex-direction: column; gap: 16px; outline: 0; }
.access__thanks { font-size: 17px; line-height: 26px; overflow-wrap: anywhere; }
.access__ask { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 22px; color: var(--t-muted-foreground); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--t-secondary); color: var(--t-foreground); }
.btn[disabled] { opacity: 0.6; cursor: default; }
@media (hover: hover) and (pointer: fine) { .chip:hover { filter: brightness(1.15); } }

.access--card { max-width: 460px; margin-top: 8px; }
.access--hero { max-width: 580px; margin-top: 12px; }
.access--hero .access__fields { width: 100%; max-width: 460px; margin: 0 auto; }
.access--hero .access__input { background: rgb(17 17 19 / 0.5); color: #fff; }
.access--hero .access__input::placeholder { color: rgb(255 255 255 / 0.76); }
.access--hero .access__input:focus-visible { outline-color: #fff; }
/* On the render, words need their own ground to stay readable. */
.access--hero .access__msg, .access--hero .access__done { padding: 10px 16px; border-radius: var(--t-radius-lg); background: rgb(17 17 19 / 0.62); color: #fff; }
.access--hero .access__done { padding: 16px; max-width: none; align-items: center; }
.access--hero .access__ask { align-items: center; color: rgb(255 255 255 / 0.86); }
.access--hero .chips { justify-content: center; }
.access--hero .chip { background: rgb(255 255 255 / 0.16); color: #fff; }
.ai-card .access__note { margin-top: -4px; }

@media (max-width: 639px) {
  .access__row { flex-direction: column; }
  .access__row .access__input { flex: none; width: 100%; }
  .access__row .btn { width: 100%; }
}