/* BrewNight home. The product is the picture: each screenshot is a plain framed view on a quiet felt ground, so the paper
   screens never melt into the paper page. Colours come from the theme tokens, so every palette and dark mode follow. */
html { scroll-behavior: smooth; }
:root { --ground: var(--felt); }
body { background: var(--bg); }
a { text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
.wrap { --wrap-pad: 96px; width: min(1240px, calc(100% - max(var(--wrap-pad), 2 * max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) + var(--sp-4)))); margin-inline: auto; }   /* the page reaches the screen edge: a notch is cleared on both sides */
.skip-link { position: absolute; left: 20px; top: -100px; padding: 16px; background: var(--action-bg); color: var(--ink); z-index: var(--z-tip); }
.skip-link:focus { top: 16px; }

/* Type: Archivo for short headings, DM Sans for everything that is read */
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-heavy); }
h1 em, h2 em { font-style: normal; color: var(--gold); }
h2 { font-size: clamp(var(--fs-32), 4.4vw, var(--fs-56)); line-height: 1.05; letter-spacing: var(--ls-display); }
.note { width: fit-content; font: var(--fw-bold) var(--fs-12)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: var(--sp-2h); min-height: var(--tap); color: var(--text); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.text-link > span { color: var(--gold); transition: transform var(--t-2); }
.text-link:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover > span { transform: translateX(3px); }
.btn.large { min-height: var(--tap); padding: var(--sp-3) var(--sp-6); gap: var(--sp-5); font-size: var(--fs-16); }
.btn span { font-size: var(--fs-20); font-weight: var(--fw-regular); }

/* Product views: a hairline frame, nothing imitating a device */
.shot { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-3); box-shadow: var(--sh-2); }
.shot img { width: 100%; }
.shot.phone { border-radius: var(--r-4); }

/* Latest precons, straight from the catalogue */
.precons { padding-block: 96px; background: var(--felt); border-block: 1px solid var(--line); }
.precons-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-5) var(--sp-8); margin-bottom: var(--sp-8); }
.format-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.format-links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-4); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-pill); color: var(--text); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.format-links a:hover { background: var(--panel3); }
.precon-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.precon-heading h3 { font-size: var(--fs-24); }
.precon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); min-height: 400px; }
.precon-grid.is-empty { min-height: 0; }
.precon-status { font-size: var(--fs-14); color: var(--text2); }
.precon-status:not(:empty) { margin-bottom: var(--sp-5); }
.precon-status a, .precon-status button { color: var(--gold2); text-decoration: underline; text-underline-offset: 3px; }
.precon-status button { min-height: var(--control-sm); padding: 0; border: 0; background: none; font: inherit; box-shadow: none; }
.precon-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--text); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-4); transition: border-color var(--t-2); }
.precon-card:hover { border-color: var(--line3); }
.precon-art { display: flex; align-items: center; justify-content: center; aspect-ratio: 626 / 457; overflow: hidden; background: var(--panel3); border-bottom: 1px solid var(--line); }
.precon-art > img { width: 100%; height: 100%; object-fit: cover; }
.precon-art > img.full-card { object-fit: contain; }
.precon-art > span { padding: var(--sp-3); color: var(--text2); font-size: var(--fs-14); text-align: center; }
.precon-copy { display: flex; flex-direction: column; flex: 1; gap: var(--sp-1h); padding: var(--sp-5); overflow-wrap: anywhere; }
.precon-format { font: var(--fw-bold) var(--fs-12)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); }
.precon-copy h3 { font-size: var(--fs-20); line-height: 1.15; }
.precon-copy p { font-size: var(--fs-13); color: var(--text2); line-height: var(--lh-body); }
.precon-copy time { font-size: var(--fs-12); color: var(--muted); }
.precon-open { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.precon-open > span { color: var(--gold); }
.art-credits { margin-top: var(--sp-6); color: var(--text2); font-size: var(--fs-12); line-height: 1.8; }
.art-credits a { color: var(--gold2); text-decoration: underline; text-underline-offset: 3px; }

/* Questions */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; gap: var(--sp-9); padding-block: 104px; }
.faq-intro { position: sticky; top: 120px; }
.faq-intro .text-link { margin-top: var(--sp-3); }
.questions { overflow: hidden; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-4); }
.questions details + details { border-top: 1px solid var(--line); }
.questions summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--tap); padding: var(--sp-5) var(--sp-6); list-style: none; cursor: pointer; color: var(--text); font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.questions summary::-webkit-details-marker { display: none; }
.questions summary:hover { background: var(--panel2); }
.questions summary > span { flex: none; color: var(--gold); font-size: var(--fs-24); line-height: 1; transition: rotate var(--t-2) var(--ease); }
.questions details[open] summary > span { rotate: 45deg; }
.questions details p { padding: 0 var(--sp-8) var(--sp-6) var(--sp-6); color: var(--text2); font-size: var(--fs-14); line-height: var(--lh-body); }

/* Closing */
.closing { padding-block: 72px; background: var(--ground); border-top: 1px solid var(--line); }
.closing .wrap { display: flex; align-items: center; justify-content: center; text-align: center; }
.closing h2 { font-size: clamp(var(--fs-40), 6vw, var(--fs-64)); text-wrap: balance; }
.closing .btn { margin-top: var(--sp-6); }

/* Footer: where to go first, then the small print. The header's wordmark lives in ui/public-header.css. */
.site-footer { padding-block: var(--sp-8) var(--sp-7); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.footer-top > a:last-child { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); font-size: var(--fs-12); }
.site-brand { display: inline-flex; align-items: center; color: var(--text); font: var(--fw-heavy) var(--fs-28)/1 var(--font-display); letter-spacing: var(--ls-display); white-space: nowrap; text-transform: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin-top: var(--sp-3); }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text2); font-size: var(--fs-14); }
.footer-links a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
.footer-bottom > p, .footer-bottom > span { color: var(--muted); font-size: var(--fs-12); line-height: 1.6; }
.footer-bottom a { color: var(--text2); text-decoration: underline; text-underline-offset: 3px; }

/* Artwork switched off: card art leaves with its screenshots; the app icon stays. */
body[data-artwork="false"] img:not([src^="/ui/assets/"]):not([src^="/ui/pwa/"]) { display: none; }
body[data-artwork="false"] .stage, body[data-artwork="false"] .shot { display: none; }
.availability-notice { padding: 14px 24px; background: var(--gold); color: var(--on-accent); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .precon-card, .text-link > span, .questions summary > span { transition: none; }
}

/* Product-led opening: one invitation, then the actual workspaces. */
.home-opening { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-8); align-items: end; padding-block: 64px 48px; }
.home-heading h1 span { display: block; }   /* one verb a line: the tagline is three beats */
.home-heading h1 { margin: 0; font-size: clamp(48px,5.8vw,84px); line-height: .95; letter-spacing: -.025em; }   /* tighter than this and the heavy face's g-a-m letters touch */
.home-invitation { display: grid; justify-items: start; gap: var(--sp-3); max-width: 420px; padding-bottom: var(--sp-1); }
.home-invitation > p { font-size: var(--fs-24); line-height: 1.45; margin: 0 0 var(--sp-4); color: var(--text2); }
.home-product { padding-bottom: 80px; }
.home-product-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sp-5); border-top: 2px solid var(--text); }
.home-product-nav button { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--sp-3); row-gap: var(--sp-1); align-content: center; min-height: 80px; padding: var(--sp-3) 0; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: var(--fs-13); text-align: left; cursor: pointer; }
.home-product-nav i { font-style: normal; }
.home-product-nav small { grid-column: 2; font-size: var(--fs-13); color: var(--muted); line-height: 1.3; }
.home-product-nav b { font: var(--fw-heavy) var(--fs-24)/1 var(--font-display); }
.home-product-nav [aria-selected=true] { color: var(--text); border-bottom-color: var(--gold); }
.home-product-panel { display: grid; gap: var(--sp-7); align-items: start; padding-top: var(--sp-7); }
.home-product-panel[hidden] { display: none; }
.home-product-note { display: grid; grid-template-columns: minmax(180px,1fr) minmax(0,2fr); column-gap: var(--sp-7); align-items: start; }
.home-product-note h2 { grid-row: 1 / 4; font-size: var(--fs-28); line-height: 1.08; }
.home-product-note p { font-size: var(--fs-16); color: var(--text2); line-height: 1.6; margin: 0 0 var(--sp-3); max-width: 680px; }
.home-product-note .text-link { grid-column: 2; justify-self: start; display: flex; }
/* Each product screen ships twice, in Paper light and Paper dark, shot from the same page; the site's own scheme (which follows the device unless a theme is chosen) picks one. */
.home-product-screen .home-shot-dark { display: none; }
:root[data-scheme="dark"] .home-product-screen .home-shot-light { display: none; }
:root[data-scheme="dark"] .home-product-screen .home-shot-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme]) .home-product-screen .home-shot-light { display: none; }
  :root:not([data-scheme]) .home-product-screen .home-shot-dark { display: block; }
}
.home-product-previews { display: grid; grid-template-columns: minmax(0,3.4fr) minmax(0,1fr); align-items: end; gap: var(--sp-5); }
/* What an assistant can do: four short asks, quiet beside the proposal review below. */
.home-refine-powers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sp-5); }
.home-refine-powers li { display: grid; gap: var(--sp-1); align-content: start; padding-top: var(--sp-3); border-top: 2px solid var(--line2); }
.home-refine-powers b { font: var(--fw-heavy) var(--fs-16)/1.2 var(--font-display); }
.home-refine-powers q { color: var(--text2); font-size: var(--fs-16); line-height: 1.45; quotes: "“" "”"; }
.home-product-screen { margin: 0; min-width: 0; }
.home-product-screen { --bezel: color-mix(in srgb, var(--text) 86%, var(--bg)); }
/* A device bezel, so the screen's edge reads against the page in both themes (light bezel on dark, dark bezel on light). */
.home-product-screen img { display: block; width: 100%; height: auto; border: var(--sp-2) solid var(--bezel); border-radius: var(--r-6); background: var(--felt); box-shadow: 0 0 0 1px var(--line2), var(--sh-3); }
.home-product-screen figcaption { padding-top: var(--sp-3); color: var(--muted); font-size: var(--fs-12); }
.precons { background: var(--bg); }
.precon-grid { grid-template-columns: repeat(4,minmax(0,1fr)); min-height: 0; gap: var(--sp-6); }
.precon-card { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--sp-3); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding-block: var(--sp-3); }
.precon-card .precon-art { height: auto; aspect-ratio: 488 / 680; }
.precon-card .precon-art img { width: 100%; height: 100%; object-fit: contain; }
.precon-card .precon-copy { padding: 0; }
.questions { background: transparent; border-inline: 0; border-radius: 0; }
@media(max-width:1000px) {
  .wrap { --wrap-pad: 48px; }
  .home-product-note { grid-template-columns: 1fr 1.5fr; column-gap: var(--sp-6); }
  .home-refine-powers { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-product-note p { margin-top: 0; }
  .home-product-note .text-link { grid-column: 2; }
}
@media(max-width:650px) {
  .wrap { --wrap-pad: 32px; }
  .home-opening { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: 24px; }
  .home-heading h1 { font-size: var(--fs-48); }
  .home-invitation > p { font-size: var(--fs-16); margin-bottom: 0; }
  .home-product-nav { gap: var(--sp-3); }
  .home-product-nav { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 0; }
  .home-product-nav b { font-size: var(--fs-20); }
  .home-product-nav button { min-height: 64px; column-gap: var(--sp-2); }
  .home-product-nav small { font-size: var(--fs-12); }
  .home-refine-powers { grid-template-columns: 1fr; gap: var(--sp-3); }
  .home-product-note { display: block; }
  .home-product-note h2 { font-size: var(--fs-28); }
  .home-product-panel { gap: var(--sp-5); padding-top: var(--sp-5); }
  .home-product { padding-bottom:var(--sp-8); }
  .home-product-previews { grid-template-columns: minmax(0,1fr); }
  .home-product-screen.desktop { display: none; }
  .home-product-screen.phone { max-width: 390px; width: 100%; margin-inline: auto; }
  .home-product-screen figcaption { display: none; }
  .precons { padding-block: 48px; }
  .precons-head { margin-bottom: var(--sp-5); }
  .precons h2,.faq h2 { font-size: var(--fs-32); }
  .format-links { gap: var(--sp-1); }
  .format-links a { border-radius: var(--r-2); padding-inline: var(--sp-2); }
  .precon-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-5) var(--sp-3); }
  .precon-card h3 { font-size: var(--fs-16); }
  .precon-copy > p,.precon-copy > time { font-size: var(--fs-12); }
  .faq { grid-template-columns: 1fr; gap: var(--sp-5); padding-block: 48px; }
  .faq-intro { position: static; }
  .questions summary { padding: var(--sp-4) 0; }
  .questions details p { padding: 0 0 var(--sp-4); }
  .closing h2 { font-size: var(--fs-32); }
  .closing { padding-block: 48px; }
}

/* PWA update bar: this page does not load ui/components.css, so it carries the same bar (see .pwa-banner there). */
.pwa-banner { position: fixed; z-index: var(--z-toast); inset-inline: max(var(--sp-3), env(safe-area-inset-left, 0px)) max(var(--sp-3), env(safe-area-inset-right, 0px)); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--panel); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r-4); box-shadow: var(--sh-3); font-size: var(--fs-14); line-height: var(--lh-snug); text-align: center; }
.pwa-banner button { min-height: var(--tap); }