/*
 * LT: apps, the family's own parts, on top of the round 3 system.
 * Read by the apps section on the hub (the LT: apps page and every app's
 * own page link this file from LT: Gift Trix's assets) and by LT: Gift
 * Trix's own site. One place for the apps' look: the dial of life moments, the app
 * cards with the small stamp, the bundles, the app page's head and its
 * walk-through screens, drawn in HTML in the stamp's ink on paper.
 * Writes no colour of its own: every value is a system token (tokens.css).
 */

/* ---------- each app wears its home area's colour (brief 9.12) ---------- */
.app-area--organise { --accent: var(--say-organise); --area-ink: var(--ink-organise); --area-wash: var(--wash-organise); --area-pat: url(#pat-organise); }
.app-area--simplify { --accent: var(--say-simplify); --area-ink: var(--ink-simplify); --area-wash: var(--wash-simplify); --area-pat: url(#pat-simplify); }
.app-area--juggle { --accent: var(--say-juggle); --area-ink: var(--ink-juggle); --area-wash: var(--wash-juggle); --area-pat: url(#pat-juggle); }
.app-area--declutter { --accent: var(--say-declutter); --area-ink: var(--ink-declutter); --area-wash: var(--wash-declutter); --area-pat: url(#pat-declutter); }
.app-area--stage { --accent: var(--say-stage); --area-ink: var(--ink-stage); --area-wash: var(--wash-stage); --area-pat: url(#pat-stage); }
.app-area--style { --accent: var(--say-style); --area-ink: var(--ink-style); --area-wash: var(--wash-style); --area-pat: url(#pat-style); }
.app-area--celebrate { --accent: var(--say-celebrate); --area-ink: var(--ink-celebrate); --area-wash: var(--wash-celebrate); --area-pat: url(#pat-celebrate); }
.app-area--design { --accent: var(--say-design); --area-ink: var(--ink-design); --area-wash: var(--wash-design); --area-pat: url(#pat-design); }
.app-area--share { --accent: var(--say-share); --area-ink: var(--ink-share); --area-wash: var(--wash-share); --area-pat: url(#pat-share); }
.app-area--apps { --accent: var(--ink-family); --area-ink: var(--ink-family); --area-wash: var(--paper-tint); --area-pat: url(#pat-apps); }

.crumb { display: inline-flex; align-items: center; gap: 0.45rem; min-height: var(--target); color: var(--ink-2); font-size: var(--step-small); font-weight: 600; text-decoration: none; }
.crumb svg { width: 18px; height: 18px; }
.crumb:hover { color: var(--ink); }

/* ===================== /apps: the hero and the dial ===================== */
.apps-hero { display: grid; gap: var(--s-7); align-items: center; padding-block: var(--s-5) var(--s-8); }
.apps-hero-words > * + * { margin-top: var(--s-6); }
.apps-lines { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; max-width: 40rem; }
.apps-lines li { position: relative; padding-left: 1.6rem; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }
.apps-lines li::before { content: ""; position: absolute; left: 0.2rem; top: 0.62em; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--ink); }
.moment-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.moment-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--target); padding: 0 1rem 0 0.55rem; border: 1px solid var(--boundary); border-radius: var(--radius-pill); color: var(--ink); font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: background-color var(--t-swap) ease-out, border-color var(--t-swap) ease-out; }
.moment-chip:hover { background: var(--raised); border-color: var(--ink); }
.moment-chip .moment-arc { width: 26px; height: 26px; }
.apps-dial { justify-self: center; width: min(100%, 30rem); }
.apps-dial-art { width: 100%; height: auto; overflow: visible; }
.dial-ring { fill: none; stroke: var(--hair); stroke-width: 1; }
.dial-ring--in { stroke-dasharray: 2 5; stroke: var(--boundary); }
.dial-arc { fill: var(--paper-tint); stroke: var(--boundary); stroke-width: 0.8; }
.dial-seal { opacity: 1; }
.dial-label { font-family: var(--face-caps); font-weight: 650; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; fill: var(--ink-2); }
.dial-centre { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .apps-dial .dial-arc { animation: dial-arc 520ms var(--ease-out) both; }
  .apps-dial .dial-arc--year { animation-delay: 120ms; } .apps-dial .dial-arc--home { animation-delay: 240ms; } .apps-dial .dial-arc--business { animation-delay: 360ms; }
  .apps-dial .dial-seal { animation: dial-seal 420ms var(--ease-out) both; animation-delay: 420ms; }
  .apps-dial .dial-centre { animation: dial-press var(--t-stamp) var(--ease-out) 900ms both; }
  html.lt-js:not(.lt-ready) .apps-dial * { animation-play-state: paused; }
}
@keyframes dial-arc { from { opacity: 0; } }
@keyframes dial-seal { from { opacity: 0; transform: scale(.7); } }
@keyframes dial-press { from { opacity: .35; transform: scale(1.2); } }
@media (min-width: 1024px) {
  .apps-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 6vw, 6rem); }
}

/* ===================== the life moments, each with its small arc ===================== */
.moment { padding-block: var(--s-7) var(--s-4); }
@media (min-width: 1024px) {
  .moment { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .moment-head { position: sticky; top: var(--s-6); flex-direction: column; align-items: flex-start; margin-bottom: 0; }
  .moment-head .moment-arc { width: 88px; height: 88px; }
  .moment .app-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
}
.moment + .moment { border-top: 1px solid var(--hair); }
.moment-head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.moment-head .pair { gap: 0.3em; }
.moment-head .moment-arc { width: 56px; height: 56px; flex: none; }
.moment-arc { overflow: visible; }
.moment-arc-ring { fill: none; stroke: var(--hair); stroke-width: 1.5; }
.moment-arc-q { fill: none; stroke: var(--boundary); stroke-width: 4; stroke-linecap: round; }
.moment-head .moment-arc-q { stroke: var(--ink); stroke-dasharray: 1; stroke-dashoffset: 0; }
html.lt-js .moment-head .moment-arc-q { stroke-dashoffset: 1; stroke: var(--boundary); }
html.lt-js .moment.is-lit .moment-head .moment-arc-q { stroke-dashoffset: 0; stroke: var(--ink); transition: stroke-dashoffset 240ms var(--ease-out), stroke 240ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  html.lt-js .moment-head .moment-arc-q { stroke-dashoffset: 0; stroke: var(--ink); transition: none; }
}

/* ===================== an app card, with its small stamp ===================== */
.app-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.app-card {
  position: relative; display: grid; align-content: start; gap: var(--s-2);
  padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px);
  background: var(--raised); color: var(--ink);
  transition: border-color var(--t-swap) ease-out, transform var(--t-swap) var(--ease-out);
}
.app-card::before { content: ""; position: absolute; left: var(--s-5); right: var(--s-5); top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--area-ink); }
.app-card:hover, .app-card:focus-within { border-color: var(--boundary); }
.app-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.app-card-stamp .seal-icon { --seal-size: 52px; }
.app-card-moment { font-family: var(--face-caps); font-size: var(--step-quiet); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.app-card-name { font-family: var(--face-caps); font-weight: 650; font-size: 1.2rem; line-height: 1.2; }
.app-card-link { color: inherit; text-decoration: none; }
.app-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.app-card-link:focus-visible { outline: none; }
.app-card:has(.app-card-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.app-card-line { font-family: var(--face-note); font-weight: 600; font-size: 1.08rem; line-height: 1.4; color: var(--ink); }
.app-card .price { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px dashed var(--hair); }
.app-card .price-item { font-weight: 600; }
.app-card-twin { position: relative; z-index: 1; margin-top: var(--s-2); font-size: var(--step-small); color: var(--ink-2); }
.app-card-twin a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--ink); font-weight: 650; }
.app-card .legal-line { position: relative; z-index: 1; }
.not-open { color: var(--ink); font-weight: 600; }
.app-card-more { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 650; color: var(--accent); }
.app-card-more svg { width: 1em; height: 1em; transition: transform var(--t-swap) var(--ease-out); }
.app-card:hover .app-card-more svg { transform: translateX(3px); }
.app-card--lead { background: linear-gradient(var(--raised), var(--raised)) padding-box, var(--raised); border-color: var(--boundary); }
@media (prefers-reduced-motion: no-preference) {
  .app-card:hover .app-card-stamp .seal-icon, .app-card:focus-within .app-card-stamp .seal-icon { animation: card-press var(--t-stamp) var(--ease-out); }
}
@keyframes card-press { from { transform: scale(1.2); opacity: .35; } }

/* ===================== bundles: one price for a part of life ===================== */
.bundles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s-4); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.bundle { position: relative; display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 6px); background: var(--raised); }
.bundle--all { border-color: var(--ink); background: var(--tint); }
.bundle-name { font-family: var(--face-caps); font-weight: 650; font-size: 1.15rem; }
.bundle-line { font-family: var(--face-note); font-weight: 600; font-size: 1.05rem; color: var(--ink-2); }
.bundle-seals { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bundle-seals .seal-icon { --seal-size: 30px; }
.bundle-apps { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--step-small); }
.bundle-apps li { display: flex; gap: 0.5rem; align-items: baseline; }
.bundle-apps li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ink-2); transform: translateY(-2px); }
.bundle .price-item { font-size: 1.35rem; }
.bundle .price-what { font-size: var(--step-small); }

/* ===================== two doors per need ===================== */
.doors { display: grid; gap: 0; margin: var(--s-5) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.door-pair { display: grid; grid-template-columns: 1fr; gap: var(--s-2) var(--s-5); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--hair); }
.door-pair-area { display: flex; align-items: center; gap: var(--s-3); }
.door-pair-area .seal-icon { --seal-size: 40px; }
.door-pair-area b { font-family: var(--face-caps); font-weight: 650; }
.door-pair a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--ink); font-weight: 600; }
.door-pair-or { font-family: var(--face-note); font-weight: 600; color: var(--ink-2); }
@media (min-width: 900px) { .door-pair { grid-template-columns: 15rem 1fr auto 1fr; } }

.apps-close { display: grid; justify-items: start; gap: var(--s-4); padding: var(--s-7) var(--s-6); border-radius: calc(var(--radius) + 8px); background: var(--tint); }
.apps-close .press { --seal-size: 64px; }

/* ===================== an app's own page ===================== */
.app-hero { display: grid; gap: var(--s-6); padding-block: var(--s-4) var(--s-7); }
.app-hero-seal { position: relative; width: clamp(7rem, 5rem + 8vw, 11rem); }
.app-hero-seal .seal-icon { width: 100%; height: auto; aspect-ratio: 1; --seal-size: 100%; }
.app-hero-seal::after { content: "LT:"; position: absolute; right: -0.2rem; bottom: 0.1rem; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); background: var(--ink); color: var(--ground); font-family: var(--face-caps); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; }
.app-hero .pair > h1 { font-family: var(--face-caps); font-weight: 650; letter-spacing: -0.01em; }
.app-facts { display: grid; gap: var(--s-3); margin: var(--s-6) 0 0; max-width: 44rem; }
.app-facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-3); align-items: baseline; padding-bottom: var(--s-3); border-bottom: 1px dashed var(--hair); }
.app-facts dt { font-family: var(--face-caps); font-size: var(--step-quiet); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.app-facts dd { margin: 0; }
.app-facts a { color: var(--ink); font-weight: 650; }
@media (min-width: 1024px) {
  .app-hero { grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
}
.app-section { padding-block: var(--s-7); }
.app-section > .pair { margin-bottom: var(--s-6); }
.app-walk .example-label { margin-bottom: var(--s-5); }
.app-price { display: grid; gap: var(--s-5); }
.app-price .card { display: grid; gap: var(--s-3); max-width: 44rem; }
.app-price .price-item { font-size: 1.2rem; }
.app-ask { display: grid; gap: var(--s-4); justify-items: start; }
.app-ask-twin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.app-ask-twin .seal-icon { --seal-size: 44px; }
.app-next { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.app-next a { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-3); border: 1px solid var(--hair); border-radius: var(--radius); background: var(--raised); color: var(--ink); font-family: var(--face-caps); font-weight: 650; text-decoration: none; }
.app-next a:hover { border-color: var(--boundary); }
.app-next .seal-icon { --seal-size: 34px; }

/* ===================== the walk-through: a scene of paper, an HTML screen, pencilled notes ===================== */
.scene {
  position: relative; display: grid; place-items: center; container-type: inline-size;
  aspect-ratio: 4 / 3; width: 100%; padding: 6% 7%;
  border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(circle at 50% 46%, transparent 0 34%, color-mix(in srgb, var(--area-ink) 7%, transparent) 34% 34.4%, transparent 34.6%), var(--tint);
}
.scene::before { content: ""; position: absolute; inset: 7% 15%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--boundary) 55%, transparent); pointer-events: none; }
.process-stage-frame .scene { height: 100%; aspect-ratio: auto; border-radius: 0; }
.screen {
  position: relative; z-index: 1;
  width: min(100%, 30rem); max-height: 100%;
  display: grid; align-content: start; gap: 3.2cqw;
  padding: 4.5cqw 5cqw 5cqw; border: 1px solid var(--boundary); border-radius: 5cqw;
  background: var(--raised); color: var(--ink);
  box-shadow: 0 1px 0 var(--hair), 0 18px 40px -26px rgb(31 27 22 / .45);
  font-size: clamp(11px, 3.4cqw, 15px); line-height: 1.35;
}
.screen-bar { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding-bottom: 3cqw; border-bottom: 1px solid var(--hair); }
.screen-app { display: inline-flex; align-items: center; gap: 2cqw; font-family: var(--face-caps); font-weight: 650; font-size: 1.02em; }
.screen-app .seal-icon { --seal-size: 7cqw; width: 7cqw; height: 7cqw; }
.screen-when { color: var(--ink-2); font-size: 0.86em; }
.screen-title { font-family: var(--face-head); font-weight: 600; font-size: 1.32em; line-height: 1.15; }
.screen-sub { color: var(--ink-2); font-size: 0.9em; }
.screen-list { display: grid; gap: 1.6cqw; margin: 0; padding: 0; list-style: none; }
.screen-row { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 2cqw 2.6cqw; border: 1px solid var(--hair); border-radius: 2.4cqw; background: var(--ground); }
.screen-row b { font-weight: 650; }
.screen-row span { color: var(--ink-2); font-size: 0.9em; white-space: nowrap; }
.screen-row--done { color: var(--ink-2); }
.screen-row--done b { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.tick { display: inline-grid; place-items: center; width: 5cqw; height: 5cqw; flex: none; border: 1.5px solid var(--boundary); border-radius: 1.2cqw; }
.tick--on { border-color: var(--accent); background: var(--accent); }
.tick--on::after { content: ""; width: 1.4cqw; height: 2.6cqw; margin-top: -0.6cqw; border: solid var(--raised); border-width: 0 0.5cqw 0.5cqw 0; transform: rotate(45deg); }
.screen-left { display: flex; align-items: center; gap: 2.4cqw; min-width: 0; }
.chip-s { display: inline-flex; align-items: center; padding: 0.4cqw 2cqw; border: 1px solid var(--boundary); border-radius: 99px; font-size: 0.82em; font-weight: 650; color: var(--ink); white-space: nowrap; }
.chip-s--on { border-color: var(--accent); color: var(--accent); }
.screen-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1cqw; font-size: 0.8em; text-align: center; }
.screen-cal span { padding: 1.2cqw 0; border-radius: 1.4cqw; color: var(--ink-2); }
.screen-cal .d { background: var(--ground); color: var(--ink); }
.screen-cal .d--term { box-shadow: inset 0 -0.7cqw 0 var(--area-ink); }
.screen-cal .d--hol { background: var(--area-wash); color: var(--ink); font-weight: 650; }
.screen-cal .d--mark { outline: 1.5px solid var(--accent); outline-offset: -1.5px; font-weight: 650; }
.screen-cal .h { font-family: var(--face-caps); font-weight: 650; color: var(--ink-2); }
.screen-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.screen-total { display: grid; gap: 0.4cqw; padding: 2.4cqw; border: 1px solid var(--hair); border-radius: 2.4cqw; background: var(--ground); }
.screen-total small { color: var(--ink-2); font-size: 0.8em; }
.screen-total b { font-size: 1.25em; font-variant-numeric: tabular-nums lining-nums; }
.screen-meter { height: 2.2cqw; border-radius: 99px; background: var(--ground); border: 1px solid var(--hair); overflow: hidden; }
.screen-meter i { display: block; height: 100%; width: var(--fill, 50%); border-radius: inherit; background: var(--area-ink); }
.fill-20 { --fill: 20%; } .fill-35 { --fill: 35%; } .fill-50 { --fill: 50%; } .fill-70 { --fill: 70%; } .fill-100 { --fill: 100%; }
.screen-ring { justify-self: center; width: 46cqw; height: 46cqw; }
.screen-ring circle { fill: none; stroke-width: 7; }
.screen-ring .r-back { stroke: var(--hair); }
.screen-ring .r-fill { stroke: var(--area-ink); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
.screen-ring text { font-family: var(--face-head); font-weight: 600; font-size: 15px; fill: var(--ink); }
.screen-ring .r-small { font-family: var(--face-text); font-size: 7px; fill: var(--ink-2); }
.screen-ring .r-dot { stroke: none; fill: var(--area-ink); }
.screen-ring .r-dot--b { fill: var(--accent); }
.screen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.screen-grid i { aspect-ratio: 1; border-radius: 1.6cqw; background: var(--area-wash); border: 1px solid var(--hair); }
.screen-grid i:nth-child(3n+2) { background: color-mix(in srgb, var(--area-ink) 30%, var(--ground)); }
.screen-grid i:nth-child(4n) { background: var(--ground); }
.screen-grid i.is-picked { outline: 2px solid var(--accent); outline-offset: 1px; }
.screen-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.swatch { display: grid; gap: 1cqw; font-size: 0.8em; color: var(--ink-2); text-align: center; }
.swatch i { aspect-ratio: 1; border-radius: 2cqw; border: 1px solid var(--hair); }
/* paint patches: three warm whites and greens, a sketch on a screen and never a colour match */
.swatch--a i { background: #E9E1CF; } .swatch--b i { background: #D9DCC8; } .swatch--c i { background: #C9D2C3; }
.screen--lamp .swatch--a i { background: #E6CFA6; } .screen--lamp .swatch--b i { background: #D3C69E; } .screen--lamp .swatch--c i { background: #BDB993; }
.screen-board { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 1.8cqw; }
.screen-board i { min-height: 11cqw; border-radius: 1.8cqw; border: 1px solid var(--hair); }
.screen-board i:nth-child(1) { grid-row: span 2; background: var(--area-wash); }
.screen-board i:nth-child(2) { background: color-mix(in srgb, var(--area-ink) 45%, var(--ground)); }
.screen-board i:nth-child(3) { background: color-mix(in srgb, var(--ink-organise) 35%, var(--ground)); }
.screen-board i:nth-child(4) { background: var(--ground); }
.screen-board i:nth-child(5) { background: color-mix(in srgb, var(--ink-juggle) 30%, var(--ground)); }
.screen-plan { position: relative; aspect-ratio: 16 / 9; border: 1.5px solid var(--ink-2); border-radius: 1.4cqw; background: repeating-linear-gradient(0deg, transparent 0 9%, var(--hair) 9% 9.4%), repeating-linear-gradient(90deg, transparent 0 6%, var(--hair) 6% 6.3%), var(--ground); }
.screen-plan i { position: absolute; border: 1.5px solid var(--ink-2); border-radius: 1cqw; background: var(--raised); }
.screen-plan .p-sofa { left: 8%; bottom: 10%; width: 36%; height: 22%; }
.screen-plan .p-rug { left: 30%; top: 30%; width: 34%; height: 34%; border-style: dashed; background: var(--area-wash); }
.screen-plan .p-lamp { right: 10%; top: 12%; width: 9%; aspect-ratio: 1; border-radius: 50%; }
.screen-plan .p-chair { right: 14%; bottom: 14%; width: 16%; height: 24%; }
.screen-label { display: grid; grid-template-columns: auto 1fr; gap: 1.4cqw 4cqw; align-items: center; padding: 3.2cqw; border: 2px solid var(--ink); border-radius: 2cqw; background: var(--ground); }
.screen-label .big { grid-row: span 3; font-family: var(--face-head); font-weight: 600; font-size: 3.1em; line-height: 1; }
.screen-code { width: 16cqw; height: 16cqw; grid-row: span 3; background:
  conic-gradient(from 90deg at 30% 30%, var(--ink) 25%, transparent 0) 0 0 / 50% 50%,
  repeating-linear-gradient(90deg, var(--ink) 0 2cqw, transparent 2cqw 3.2cqw),
  var(--ground); border: 1.5cqw solid var(--ground); outline: 1px solid var(--ink); }
.screen-book { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hair); border-radius: 2cqw; overflow: hidden; background: var(--ground); }
.screen-book > div { padding: 3cqw; display: grid; gap: 1.2cqw; align-content: start; }
.screen-book > div + div { border-left: 1px dashed var(--hair); }
.screen-book b { font-family: var(--face-head); font-weight: 600; font-size: 1.1em; }
.screen-book p { font-size: 0.86em; color: var(--ink-2); }
.screen-timeline { display: grid; gap: 1.8cqw; margin: 0; padding: 0 0 0 4cqw; list-style: none; border-left: 2px solid var(--hair); }
.screen-timeline li { position: relative; display: grid; gap: 0.4cqw; }
.screen-timeline li::before { content: ""; position: absolute; left: -5.4cqw; top: 0.5em; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--raised); border: 2px solid var(--area-ink); }
.screen-timeline li.got::before { background: var(--area-ink); }
.screen-timeline small { color: var(--ink-2); font-size: 0.82em; }
.screen-colours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8cqw; }
.screen-colours i { aspect-ratio: 1.2; border-radius: 1.6cqw; border: 1px solid var(--hair); }
.screen-colours .c1 { background: #2F4A3E; } .screen-colours .c2 { background: #D8B26A; } .screen-colours .c3 { background: #F2EADB; } .screen-colours .c4 { background: #B4573A; }
.screen-colours small { display: block; margin-top: 0.8cqw; font-size: 0.72em; color: var(--ink-2); text-align: center; }
.screen-logo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; align-items: end; }
.screen-logo span { display: grid; place-items: center; gap: 1cqw; font-size: 0.75em; color: var(--ink-2); }
.screen-logo i { display: block; border-radius: 50%; background: #2F4A3E; box-shadow: inset 0 0 0 2cqw #F2EADB, inset 0 0 0 2.6cqw #2F4A3E; }
.screen-logo span:nth-child(1) i { width: 18cqw; height: 18cqw; } .screen-logo span:nth-child(2) i { width: 12cqw; height: 12cqw; } .screen-logo span:nth-child(3) i { width: 7cqw; height: 7cqw; }
.screen-type { display: grid; gap: 1.2cqw; }
.screen-type .t1 { font-family: var(--face-head); font-weight: 600; font-size: 1.6em; line-height: 1.1; }
.screen-type .t2 { font-family: var(--face-text); font-size: 1em; }
.screen-input { display: flex; align-items: center; gap: 2cqw; padding: 2.2cqw 3cqw; border: 1.5px solid var(--boundary); border-radius: 99px; background: var(--ground); color: var(--ink-2); }
.screen-input b { color: var(--ink); font-weight: 650; }
.screen-timer { justify-self: center; display: grid; place-items: center; width: 40cqw; height: 40cqw; border-radius: 50%; border: 2.4cqw solid var(--area-wash); box-shadow: inset 0 0 0 0.6cqw var(--area-ink); font-family: var(--face-head); font-weight: 600; font-size: 2.1em; }
.screen-piles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; text-align: center; }
.screen-piles div { display: grid; gap: 0.6cqw; padding: 2.4cqw 1cqw; border: 1px solid var(--hair); border-radius: 2cqw; background: var(--ground); font-size: 0.8em; color: var(--ink-2); }
.screen-piles b { font-family: var(--face-head); font-size: 1.7em; color: var(--ink); }

/* notes pencilled on the scene; positions are classes, never inline styles */
.note-tag {
  position: absolute; z-index: 2; max-width: 44%;
  padding: 0.45rem 0.7rem; border: 1px solid var(--hair); border-radius: 10px;
  background: var(--ground); color: var(--ink);
  font-family: var(--face-note); font-weight: 600; font-size: clamp(0.82rem, 0.75rem + 0.3vw, 1rem); line-height: 1.3;
  box-shadow: 0 10px 22px -16px rgb(31 27 22 / .5);
  rotate: -1.5deg;
}
.note-tag::before { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--area-ink); top: -5px; left: 14px; }
.at-tl { left: 3%; top: 5%; } .at-tr { right: 3%; top: 5%; rotate: 1.5deg; } .at-bl { left: 3%; bottom: 5%; } .at-br { right: 3%; bottom: 5%; rotate: 1deg; }
.at-ml { left: 2%; top: 44%; } .at-mr { right: 2%; top: 44%; rotate: 1.2deg; }
@media (max-width: 719px) {
  .note-tag { max-width: 52%; font-size: 0.8rem; padding: 0.35rem 0.55rem; }
}
.app-walk .process-stage .press { --seal-size: 64px; }
.app-walk .press { --seal-size: 56px; }

/* the free and paid parts, and the call to ask */
.free-paid { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.free-paid li { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-3); align-items: baseline; }
.free-paid .k { font-family: var(--face-caps); font-size: var(--step-quiet); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }

/* links inside a sentence still make a comfortable target: 24 px everywhere, 44 px under a finger */
:is(.app-facts, .app-ask-twin, .app-card-twin, .call-note, .app-price, .lede, .disclosure-body, .gt-tagline) a { display: inline-block; min-height: 24px; padding-block: 2px; }
@media (pointer: coarse) {
  :is(.app-facts, .app-ask-twin, .app-card-twin, .call-note, .app-price, .lede, .disclosure-body, .apps-lines) a { display: inline-flex; align-items: center; min-height: 44px; }
}