/* Home page proposal P12, The whole story (content/en/home-p12.html). Linked by that page only, after
   the source proposals' own sheets. Only the joins: the stage tiles without a headline, and the headline marks.
   No braces in comments. */

.p12-stages .p12-tiles { padding-top: 0; }

/* ---- The stage tiles: Run light in its own colour, Win dark across three cells -------------------- */
.p12-tiles .wrap { container-type: inline-size; }
.p12-tiles .p12-run { --slot-1: #8f7ad6; }
@container (min-width: 900px) { .p12-tiles .p12-win { grid-column: span 3; } }

/* ---- One headline style (owner, 2026-10-19 13:48) --------------------------------------------------
   The hero takes it from site.css; P7's questions heading, kept from home-p7.css, takes the chapter
   title's four values here, so it reads the same as the chapter titles around it. */
.p7-qs-head h2 { font-size: var(--sc-head-size); font-weight: var(--sc-head-weight);
  letter-spacing: var(--sc-head-track); line-height: var(--sc-head-leading); }

/* The headline marks, drawn by assets/home-p12.js in the style of andy-hero-scribble: a circle and an
   underline in the accent, then a dashed arrow from the loop. Drawing only, over the hero. */
.p11-hero .p12-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.p12-ink path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.p12-mark path { stroke: var(--accent); stroke-width: clamp(3px, .45vw, 5px); stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.55, .1, .35, 1) .2s; }
.p12-mark path + path { transition-delay: .55s; }
.p12-mark + .p12-mark path { transition-delay: .9s; }
.p12-mark + .p12-mark path + path { transition-delay: 1.2s; }
.p12-ink.is-on .p12-mark path { stroke-dashoffset: 0; }
.p12-arrow { stroke: var(--ink); opacity: 0; transition: opacity .4s ease 1.5s; }
.p12-ink.is-on .p12-arrow { opacity: .55; }
.p12-arrow path { stroke-width: 1.8; }
.p12-arrow path:first-child { stroke-dasharray: 5 6; }
.p12-ink.is-set .p12-mark path, .p12-ink.is-set .p12-arrow { transition: none; }
@media (prefers-reduced-motion: reduce) { .p12-mark path, .p12-arrow { transition: none; } }

/* Even space round the hero on a wide screen (owner, 2026-10-19 15:49): 100px less above it and
   100px more below it than the shared .hero padding. */
@media (min-width: 960px) { .hero.p11-hero { padding-top: max(20px, calc(clamp(48px, 9vw, 120px) - 100px)); padding-bottom: calc(clamp(40px, 6vw, 80px) + 100px); } }
/* As the home page it has no breadcrumb bar, so the hero takes that bar's height back and sits where
   the owner placed it on the proposal page. */
@media (min-width: 960px) { main:not(:has(> .crumbs)) .hero.p11-hero { padding-top: calc(max(20px, calc(clamp(48px, 9vw, 120px) - 100px)) + 61px); } }
/* The loop's centre holds a drawing (owner, 2026-10-19 18:31), not words. */
.p11-hub.p12-hub-art { width: 52%; }
.p12-hub-art andy-art { display: block; width: 100%; }
/* The products in Andy's offset columns after the hero (P12b and the home page). The tile names are
   links, so they take the ink and never underline (owner, 18:59). */
.home-products andy-sticky-columns { --andy-sticky-top: var(--bar-h); }
/* The same size as every chapter headline, "It is simple." among them (owner, 2026-10-20 10:25). */
.home-products andy-sticky-columns > h2 { font-size: var(--sc-head-size); font-weight: var(--sc-head-weight, 700); line-height: var(--sc-head-leading, 1); letter-spacing: var(--sc-head-track, -.04em); margin: 0; }
/* Under the hero with less air (owner, 18:51): the hero keeps its own bottom space, the columns none. */
@media (min-width: 1001px) { .hero.p11-hero + .home-products { padding-top: 0; margin-top: calc(-1 * clamp(60px, 15vw, 240px)); } }
/* Phones (owner, 2026-10-20 08:14): the products start below the loop, not over it, and the hero keeps
   its subheadline, which the site's hero rule hides at this width. */
@media (max-width: 1000px) { .hero.p11-hero + .home-products { margin-top: 0; padding-top: 12px; } }
/* Owner, 2026-10-20: the gap from the product tiles down to the e-mail block was too wide. */
.home-products:has(+ .p12-stages[hidden] + .p12-mail) { padding-bottom: clamp(16px, 2vw, 40px); }
.home-products + .p12-stages[hidden] + .p12-mail { padding-top: clamp(24px, 3vw, 56px); }
@media (max-width: 640px) { .hero.p11-hero .lead { display: block; } }
.home-products andy-sticky-columns > p { margin: 0; max-width: 34ch; color: var(--ink-2); }
.home-products andy-tile a { color: inherit; text-decoration: none; font-size: clamp(18px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -.02em; font-weight: 650; }
.home-products andy-tile a::after { content: ""; position: absolute; inset: 0; }
.home-products andy-tile { position: relative; }
/* The ninth tile stands apart (owner, 19:03): the ink tile of the bento, its name in paper, Andy's navy
   and plum lifted so the figure still reads on the dark ground, as .bento-tile[data-tone="dark"] does. */
.home-products andy-tile.tile-all { --andy-ink: #cfd0e6; --andy-ink-2: #e3c7e3; }
.home-products andy-tile.tile-all::part(tile) { background: var(--ink); box-shadow: none; }
.home-products andy-tile.tile-all a { color: var(--paper-2); }
[data-theme$="dark"] .home-products andy-tile.tile-all { --andy-ink: #302d43; --andy-ink-2: #573957; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .home-products andy-tile.tile-all { --andy-ink: #302d43; --andy-ink-2: #573957; } }
/* More room round the names (owner, 19:07): the tile's own padding is 12px, so the names sat on the
   edge. A name may take two lines. */
.home-products andy-tile::part(tile) { padding: clamp(12px, 1.4vw, 20px) clamp(12px, 1.4vw, 20px) clamp(18px, 2vw, 30px); }
.home-products andy-tile a { display: block; padding-inline: clamp(2px, .8vw, 12px); text-wrap: balance; overflow-wrap: normal; word-break: normal; }
@media (max-width: 560px) { .home-products andy-tile a { font-size: 15px; } }
/* Reversed (owner, 19:11): the tiles on the left, the words on the right and right-aligned. The
   component's grid is in its shadow root, so the host reads right to left, which swaps the two
   columns, and everything inside is put back to left to right. Phones keep the one-column layout. */
@media (min-width: 1001px) {
  .home-products-rev andy-sticky-columns { direction: rtl; }
  .home-products-rev andy-sticky-columns::part(columns) { direction: ltr; }
  .home-products-rev andy-sticky-columns > * { direction: ltr; }
  .home-products-rev andy-sticky-columns > :is(h2, p) { text-align: right; margin-inline-start: auto; }
  .home-products-rev andy-sticky-columns > a[slot="action"] { justify-self: end; }
}

/* P12f and home: the button follows the headline to the right. The host is rtl to swap the columns,
   so the shadow grid's end is the left; right is named outright. */
@media (min-width: 1001px) {
  .home-products-f andy-sticky-columns > a[slot="action"] { justify-self: right; }
}
/* The delivery headline over the stage questions, centred as it was in its own block. */
.p12-qs-why { overflow-x: visible; }
.p12-qs-why .sc-head { margin-bottom: clamp(28px, 4vw, 48px); }

/* The fourth column on home, placed and moved by assets/home-p12.js. Off the grid on purpose: it may
   run past the left edge of the screen, so the section clips sideways (clip, not hidden, keeps the
   headline sticky). */
.home-products:has(.tile-x) { overflow-x: clip; }
.home-products:has(.tile-x) > .wrap { position: relative; }
.hp-col4 { position: absolute; display: grid; align-content: start; will-change: transform; }
.hp-col4[hidden] { display: none; }

/* ---- How to start: one e-mail, P13 Variant D (owner, 2026-10-20) -----------------------------------
   The headline takes the chapter title's four values, as the questions heading does, and keeps the
   two lines it was written as, so the headline column is the wider one here. The address in the band
   is a link, set smaller than a figure so it fits its half of the band on one line. On a phone it
   keeps the chapter size like every other headline (owner, 2026-10-20 10:20), so the second line
   wraps there as theirs do; "e-mail" carries a non-breaking hyphen and moves down whole. */
.p12-mail .p13-split-head h2 { max-width: none; font-size: var(--sc-head-size); font-weight: var(--sc-head-weight);
  letter-spacing: var(--sc-head-track); line-height: var(--sc-head-leading); }
/* "Just send us an e-mail." (owner, 2026-10-20 10:01) does not fit beside the paragraph at the headline
   size, so the headline takes the full width and the paragraph sits under it. */
@media (min-width: 960px) { .p12-mail .p13-split-head { grid-template-columns: minmax(0, 1fr); } .p12-mail .p13-split-head .lead { max-width: 60ch; padding-top: 0; } }

/* The e-mail block's reel (owner, 2026-10-20): no band over the film, a big play button in the
   middle, and one dot per film bottom right, the playing film's dot drawn wider. */
.p12-mail .p13-media { padding-top: 0; }
.vreel .vbtn-big { width: clamp(76px, 9vw, 112px); height: clamp(76px, 9vw, 112px); }
.vreel .vbtn-big::before { width: 40%; height: 40%; }
.vreel[data-started]:not([data-state="playing"]) .vbtn-big { opacity: 1; pointer-events: auto; }
.vreel video { cursor: pointer; }
.vdots { position: absolute; inset-inline-end: 10px; inset-block-end: 10px; z-index: 2; display: flex; gap: 2px; padding: 4px 6px; border-radius: var(--radius-pill); background: rgba(11, 12, 16, .5); }
.vdot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.vdot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: width .2s var(--ease), background .2s var(--ease); }
.vdot:hover::before { background: #fff; }
.vdot[aria-current="true"]::before { width: 20px; border-radius: 5px; background: #fff; }
.vdot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 50%; }
.vfull { position: absolute; inset-inline-end: 12px; inset-block-start: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill); background: rgba(11, 12, 16, .5); color: #fff; cursor: pointer; transition: transform .2s var(--ease), background .2s var(--ease); }
.vfull:hover { transform: scale(1.06); background: rgba(11, 12, 16, .88); }
.vfull:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vfull::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--v-full) center / contain no-repeat; mask: var(--v-full) center / contain no-repeat; }
.vreel { --v-full: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E"); }
.vreel:fullscreen { --v-full: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5'/%3E%3C/svg%3E"); border-radius: 0; background: #000; }
.vreel:fullscreen video { object-fit: contain; }

/* "Click to send email" under the film, and its dialog (owner, 2026-10-20 10:41). */
.p12-mail-cta { display: flex; justify-content: center; margin: clamp(28px, 4vw, 48px) 0 0; }
.p12-mail-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: var(--radius-tile, 22px); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.p12-mail-dialog::backdrop { background: rgb(11 12 16 / .55); backdrop-filter: blur(4px); }
.p12-mail-dialog form, .p12-mail-done { padding: clamp(24px, 5vw, 40px); }
.p12-mail-dialog h2 { margin: 0 0 10px; padding-inline-end: 36px; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.08; letter-spacing: -.03em; overflow-wrap: anywhere; }
.p12-mail-dialog p { margin: 0 0 18px; color: var(--ink-2); line-height: 1.55; }
.p12-mail-x { position: absolute; z-index: 1; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 26px; line-height: 1; cursor: pointer; }
.p12-mail-x:hover { background: var(--paper-2); color: var(--ink); }
.p12-mail-field { display: grid; gap: 6px; margin-bottom: 14px; font-weight: 600; }
.p12-mail-field input, .p12-mail-field textarea { min-height: 52px; padding: 12px 16px; border: var(--rule-w, 1px) solid var(--rule); border-radius: 14px; background: var(--paper-2); color: var(--ink); font: inherit; font-weight: 400; }
.p12-mail-field textarea { resize: vertical; min-height: 140px; }
.p12-mail-field input:focus-visible, .p12-mail-field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.p12-mail-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.p12-mail-dialog .p12-mail-note { margin-bottom: 8px; font-size: .92rem; }
.p12-mail-dialog .p12-mail-status { min-height: 1.5em; margin-bottom: 10px; font-size: .92rem; }
.p12-mail-status[data-kind="bad"] { color: var(--danger, #c0392b); }
.p12-mail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.p12-mail-actions .btn { flex: 1 1 auto; }
.p12-mail-done { text-align: center; padding-top: clamp(40px, 7vw, 56px); }
.p12-mail-dialog .p12-mail-big { margin: 0 0 6px; color: var(--ink); font-size: clamp(2.6rem, 8vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }