/* ==========================================================================
   Amigo Screen — personal project case study (page-only rules).
   Every shared component lives in case-study.css, loaded before this file.
   ========================================================================== */

/* Hero glow, sampled from the live marketing site's hero. */
.hero_blob { background-image: url('amigo-screen/hero.jpg'); }
.hero_blob-a { background-position: 20% 30%; }
.hero_blob-b { background-position: 70% 15%; }

/* ==========================================================================
   End-to-end pass, 8 Oct 2026: discovery, features, architecture, landing page.
   Every figure here comes from the shipped code or the live site (see handoff).
   ========================================================================== */

/* Sub-heading inside a section, and one gap under it. */
.subhead { margin-top: var(--space-8); }
.subhead + * { margin-top: var(--space-4); }

/* Flow steps with a second, smaller line under each label. */
.flow-step_label small { display: block; margin-top: 4px; color: var(--color-text); font-size: var(--text-xs); font-weight: 400; }

/* Grey slot for a screenshot that is still to come. */
/* The Stripe layer pales .img-placeholder to the surface tint; these slots must read as plain grey. Text 5.4:1 on the grey. */
.img-placeholder.is-landscape { aspect-ratio: 4 / 3; min-height: 0; border-radius: 0; background: #E1E1E1; box-shadow: none; color: #595959; }

/* --- Features: copy on 5 columns, media on 7; the second one flips ----------------- */
.feature { display: grid; gap: var(--space-5); align-items: start; }
.feature.is-flip { margin-top: var(--space-10); }
@media (min-width: 64em) {
  .feature { grid-template-columns: var(--grid-12); column-gap: var(--grid-gap); }
  .feature > :nth-child(1) { grid-column: 1 / span 5; }
  .feature > :nth-child(2) { grid-column: 6 / span 7; }
  .feature.is-flip > :nth-child(1) { grid-column: 8 / span 5; grid-row: 1; }
  .feature.is-flip > :nth-child(2) { grid-column: 1 / span 7; grid-row: 1; }
}
.feature_copy { display: grid; gap: var(--space-3); }
.feature_copy .eyebrow, .feature_copy .h3, .feature_copy p { margin: 0; }

/* A program: its modules, then what one step is made of. */
.prog { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-outer); background: var(--color-white); box-shadow: var(--ring); }
.prog_label { margin: 0; color: var(--color-text); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; }
.prog_title { margin: 0; color: var(--color-heading); font-weight: var(--weight-medium); }
.prog_modules { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.prog_module { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 12px 0 4px; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-heading); font-size: var(--text-xs); }
.prog_module b { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--color-secondary-tint); color: var(--color-secondary); font-size: var(--text-eyebrow); font-weight: 600; font-variant-numeric: tabular-nums; }
.prog_step { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-inner); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-hairline); }
.prog_step dl { display: grid; gap: var(--space-1); margin: 0; }
.prog_step dt { color: var(--color-text); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; }
.prog_step dd { margin: 0; color: var(--color-heading); font-size: var(--text-small); }

/* Numbered legend for the floating controller. */
.legend { display: grid; gap: var(--space-1); counter-reset: legend; }
.legend li { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-inner); background: var(--color-white); box-shadow: var(--ring); color: var(--color-heading); font-size: var(--text-small); }
.legend li::before { counter-increment: legend; content: counter(legend); display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--color-secondary-tint); color: var(--color-secondary); font-size: var(--text-eyebrow); font-weight: 600; }

/* --- Architecture: browser -> Supabase -> services, then how it ships -------------- */
.stack-map { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 64em) {
  .stack-map { grid-template-columns: var(--grid-12); column-gap: var(--grid-gap); }
  .stack-col { grid-column: span 4; }
}
.stack-col { position: relative; display: grid; align-content: start; gap: var(--space-1); }
.stack-col:not(:last-child)::after { content: "↓"; position: absolute; left: 0; right: 0; bottom: calc(var(--space-5) / -1); height: var(--space-5); display: grid; place-items: center; color: var(--color-text); font-size: 1.25rem; }
@media (min-width: 64em) {
  .stack-col:not(:last-child)::after { content: "→"; left: auto; right: calc(var(--grid-gap) / -1); bottom: auto; top: 50%; width: var(--grid-gap); height: var(--space-4); margin-top: calc(var(--space-4) / -2); }
}
.stack-tier { margin: 0 0 var(--space-1); color: var(--color-text); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; }
.stack-col.is-core .stack-tier { color: var(--color-primary); }
.stack-node { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-outer); background: var(--color-white); box-shadow: var(--ring); }
.stack-col.is-core .stack-node { box-shadow: inset 0 0 0 1px var(--color-border-accent); }
.stack-node h3 { margin: 0; color: var(--color-heading); font-size: var(--text-small); font-weight: var(--weight-medium); }
.stack-node p { margin: 0; color: var(--color-text); font-size: var(--text-xs); }
.stack-note { max-width: 44rem; margin-top: var(--space-4); }
.stack-ship { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-outer); background: var(--color-white); box-shadow: var(--ring); }
.stack-ship .stack-tier { margin: 0; }
.stack-ship ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.stack-ship li { color: var(--color-heading); font-size: var(--text-small); }
.stack-ship li:not(:last-child)::after { content: "→"; margin-left: var(--space-2); color: var(--color-text); }

/* --- Landing page: the order of the page, as the question each block answers ------- */
.page-map { display: grid; gap: var(--space-2); margin-top: var(--space-6); }
@media (min-width: 48em) { .page-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } }
@media (min-width: 64em) { .page-map { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.page-map li { display: grid; align-content: start; gap: 4px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-outer); background: var(--color-white); box-shadow: var(--ring); }
.page-map_n { color: var(--color-secondary); font-size: var(--text-eyebrow); font-weight: 600; font-variant-numeric: tabular-nums; }
.page-map_name { color: var(--color-heading); font-size: var(--text-small); font-weight: var(--weight-medium); }
.page-map_q { color: var(--color-text); font-size: var(--text-xs); }

/* --- Decisions: a small visual at the top of each spec card ---------------------------- */
.viz { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius-inner); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-hairline); }
.viz_row { display: grid; gap: var(--space-1); align-items: center; }
@media (min-width: 48em) { .viz_row { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-2); } }
.viz_label { margin: 0; color: var(--color-text); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; }
.viz_flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.viz_arrow { color: var(--color-text); font-size: var(--text-small); }
.viz_chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-heading); font-size: var(--text-xs); }
.viz_chip.is-muted { background: transparent; box-shadow: inset 0 0 0 1px var(--color-hairline-strong); color: var(--color-text); }
.viz_chip.is-key { background: var(--color-primary-tint); box-shadow: inset 0 0 0 1px var(--color-border-accent); color: var(--color-primary); font-weight: var(--weight-medium); }
.viz_chip.is-wrap { padding-block: 4px; line-height: 20px; }
.viz-shots { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
@media (min-width: 64em) { .viz-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } }
.viz-shot figcaption { margin-top: var(--space-1); color: var(--color-text); font-size: var(--text-xs); }

/* ==========================================================================
   Redesign, 8 Oct 2026: nine visual sections. New layout pieces only; the
   shared components (flow-steps, carousel, meta-grid, cards) are untouched.
   ========================================================================== */

/* Placeholder variants: a slot that fills a carousel slide, and other shapes. */
.img-placeholder.is-fill { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 0; background: #E1E1E1; box-shadow: none; color: #595959; }

/* Overview composition: the real Home screen with two placeholder frames overlapping it. */
.company-showcase.is-comp .company-showcase_stage { aspect-ratio: 16 / 9; }
.comp_main { position: absolute; left: 0; top: 9%; width: 74%; height: auto; z-index: 1; border-radius: 6px; box-shadow: 0 32px 56px -20px rgb(0 0 0 / 0.45), 0 4px 14px rgb(0 0 0 / 0.2); }
.company-showcase.is-comp .img-placeholder { position: absolute; min-height: 0; padding: var(--space-2); border-radius: 6px; background: #E1E1E1; box-shadow: 0 24px 40px -16px rgb(0 0 0 / 0.45); color: #595959; }
.comp_a { right: 0; top: 0; width: 34%; aspect-ratio: 4 / 3; z-index: 2; }
.comp_b { right: 5%; bottom: 0; width: 44%; aspect-ratio: 16 / 5; z-index: 3; }
/* The captures have transparent rounded corners, so the shadow follows the shape (drop-shadow), not a box. */
img.comp_a, img.comp_b { position: absolute; height: auto; aspect-ratio: auto; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.35)) drop-shadow(0 28px 36px rgb(0 0 0 / 0.55)); }
img.comp_a { right: 3%; top: 4%; width: 30%; z-index: 2; }
img.comp_b { right: 5%; bottom: 7%; width: 44%; z-index: 3; }
/* Below 48em the overlap has no room (labels spilled out of 95px frames): the screen sits on top, the two frames side by side beneath it. */
@media (max-width: 47.99em) {
  .company-showcase.is-comp .company-showcase_stage { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .comp_main { position: static; grid-column: 1 / -1; width: 100%; }
  .company-showcase.is-comp .img-placeholder { position: static; width: auto; aspect-ratio: 1; padding: var(--space-1); font-size: var(--text-eyebrow); }
  img.comp_a { position: static; grid-column: 1 / -1; width: 56%; justify-self: center; }
  img.comp_b { position: static; grid-column: 1 / -1; width: 100%; }
}

/* Two cards side by side (what people try first / what Amigo does; plans / acquisition). */
.pair { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 48em) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } }
.pair_card { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-outer); background: var(--color-white); box-shadow: var(--ring); }
.pair_card.is-key { box-shadow: inset 0 0 0 1px var(--color-border-accent); }
.pair_label { margin: 0; color: var(--color-text); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; }
.pair_card.is-key .pair_label { color: var(--color-primary); }
.pair_text { margin: 0; color: var(--color-text); font-size: var(--text-small); }

/* page-map variants: three per row (discovery), and a shipped-list with ticks. */
@media (min-width: 64em) { .page-map.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A short image sequence: three frames across the full width (controller states), or two under a feature image. */
.seq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.seq li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); min-width: 0; }
@media (min-width: 48em) { .seq.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } }
@media (min-width: 64em) {
  .seq { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
  .seq:not(.is-pair) li:not(:last-child)::after { content: "→"; position: absolute; right: calc(var(--grid-gap) / -1); top: calc(50% - var(--space-3)); width: var(--grid-gap); text-align: center; color: var(--color-text); font-size: var(--text-xs); }
  .seq.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.media + .seq { margin-top: var(--space-3); }

/* Feature with a wider image column: copy on 4 columns, media on 8, so a 2-up beneath the image sits on 4 + 4. */
@media (min-width: 64em) {
  .feature.is-wide-media > :nth-child(1) { grid-column: 1 / span 4; }
  .feature.is-wide-media > :nth-child(2) { grid-column: 5 / span 8; }
  .feature.is-wide-media.is-flip > :nth-child(1) { grid-column: 9 / span 4; }
  .feature.is-wide-media.is-flip > :nth-child(2) { grid-column: 1 / span 8; }
}

/* Scale facts: a row of plain facts (not infographic values, so no proof manifest). */
/* page-map cards that list what a feature runs on: a row of logo tiles on top */
.page-map_logos { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-1); }
.page-map_logo { display: block; width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-hairline); object-fit: contain; }

/* the numbers: a band of four large figures under the shipped list */
.facts { margin-top: var(--space-3); border-radius: var(--radius-outer); background: var(--color-white); box-shadow: var(--ring); overflow: hidden; }
.facts_head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-hairline); }
.facts .stack-tier, .facts_note { margin: 0; }
.facts_note { color: var(--color-text); font-size: var(--text-xs); line-height: 20px; }
.facts_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.facts_grid li { display: grid; gap: 4px; padding: var(--space-3); }
.facts_grid li:nth-child(even) { box-shadow: inset 1px 0 0 var(--color-hairline); }
.facts_grid li:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--color-hairline); }
.facts_grid li:nth-child(4) { box-shadow: inset 1px 0 0 var(--color-hairline), inset 0 1px 0 var(--color-hairline); }
.stat_num { color: var(--color-heading); font-size: 2.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 48px; font-variant-numeric: tabular-nums; }
.stat_label { color: var(--color-text); font-size: var(--text-small); line-height: 24px; }
@media (min-width: 48em) {
  .facts_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts_grid li:nth-child(n) { box-shadow: none; }
  .facts_grid li + li { box-shadow: inset 1px 0 0 var(--color-hairline); }
}

/* Progressive disclosure for the cost and provider detail: hairlines, not a card, so the grids inside stay on the columns. */
.disclosure { margin-top: var(--space-6); box-shadow: inset 0 1px 0 var(--color-hairline-strong), inset 0 -1px 0 var(--color-hairline-strong); }
.disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; min-height: 64px; cursor: pointer; list-style: none; color: var(--color-heading); font-size: var(--text-body); font-weight: var(--weight-medium); }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-primary); font-size: 1.25rem; font-weight: 400; }
.disclosure[open] summary::after { content: "–"; }
.disclosure summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.disclosure_body { padding: 0 0 var(--space-6); }
.disclosure_body > .muted-note { max-width: 44rem; }
.disclosure_body .result-grid { justify-content: flex-start; }

/* Caption chip on carousel slides (the same rule the Car Park page uses). */
.slide_chip {
  position: absolute; left: var(--space-2); bottom: var(--space-2);
  max-width: calc(100% - var(--space-4));
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.94); box-shadow: var(--ring);
  color: var(--color-heading); font-size: var(--text-xs); font-weight: var(--weight-medium);
}

/* The screens carousel on this page: slides match the 800 × 519 app screenshots. */
#experience .carousel_slide { position: relative; aspect-ratio: 800 / 519; }  /* relative: the caption chip is positioned against the slide */

/* Matches the 800 x 788 pricing screenshot it sits beside. */
.img-placeholder.is-landscape.is-tall { aspect-ratio: 800 / 788; }

/* A real UI capture sitting on a quiet frame: shown whole, never cropped, never wider than the frame. */
.seq_frame { display: block; aspect-ratio: 4 / 3; padding: var(--space-2); border-radius: var(--radius-inner); background: #F6F8F7; box-shadow: inset 0 0 0 1px var(--color-border); }
.seq_frame img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 16px rgb(0 0 0 / 0.18)); }
/* the minimised controller: its capture is at half the pixel density of the compact bar beside it (title bars 34px vs 67px tall),
   so it is drawn at 61% of the frame (295 px against the bar's ~486 px real width) to sit at the same scale, centred, same shadow */
.seq_frame.is-center { display: grid; place-items: center; }
.seq_frame img.is-natural { width: 61%; height: auto; max-width: 100%; max-height: 100%; }

/* A slide whose screenshot is wider than the slide: shown whole on the screenshot's own near-white. */
.carousel_slide img.is-contain { object-fit: contain; background: #F6F8FA; }

/* ---- The idea, in one picture: you, Amigo and your screen, and what passes between them ----
   Built from the page's tokens, not an image. Stacked below 64em (arrows run down and up), a row of
   three nodes above it (arrows run across) with a bracket under the row for "you do the steps". */
.idea { margin: 0 0 var(--space-3); }
.idea_board { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-inner); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-hairline); }
.idea figcaption { margin-top: var(--space-2); color: var(--color-text); font-size: var(--text-xs); line-height: 20px; }

.idea_node { display: grid; justify-items: center; align-content: start; gap: var(--space-1); padding: 0 0 var(--space-3); overflow: hidden; border-radius: var(--radius-inner); background: var(--color-white); box-shadow: var(--ring); text-align: center; }
.idea_art { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; margin-bottom: var(--space-1); }
.idea_art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.idea_art.is-tile { background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-hairline); }
.idea_title { margin: 0; padding-inline: var(--space-3); color: var(--color-heading); font-size: var(--text-body); font-weight: 600; line-height: 28px; }
.idea_text { margin: 0; max-width: 20rem; color: var(--color-text); font-size: var(--text-xs); line-height: 20px; }
.idea_node .idea_text { padding-inline: var(--space-3); }

.idea_icon { width: 72px; height: 72px; fill: none; stroke: var(--color-heading); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Amigo's voice: a soft orb that breathes and sends out rings, like a voice assistant listening. Motion only when the visitor allows it. */
.idea_art.is-voice { background: linear-gradient(180deg, var(--color-surface), var(--color-primary-tint)); box-shadow: inset 0 -1px 0 var(--color-hairline); }
.idea_voice { position: relative; display: block; width: 96px; height: 96px; }
.idea_voice i { position: absolute; inset: 0; display: block; border-radius: 50%; }
.idea_voice i:nth-child(1) { overflow: hidden; background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #C9D0FF 30%, #6F68FF 70%, #4A3AF0 100%); box-shadow: 0 8px 24px rgb(83 58 253 / 0.35), inset 0 -8px 16px rgb(63 40 220 / 0.3); }
.idea_voice i:nth-child(1)::before, .idea_voice i:nth-child(1)::after { content: ""; position: absolute; width: 70%; height: 70%; border-radius: 50%; }
.idea_voice i:nth-child(1)::before { left: -8%; top: -6%; background: radial-gradient(circle, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0) 65%); }
.idea_voice i:nth-child(1)::after { right: -10%; bottom: -8%; background: radial-gradient(circle, rgb(150 140 255 / 0.9) 0%, rgb(150 140 255 / 0) 65%); }
.idea_voice i:nth-child(2), .idea_voice i:nth-child(3) { box-shadow: 0 0 0 2px rgb(83 58 253 / 0.22); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .idea_voice i:nth-child(1) { animation: idea-breathe 1.7s ease-in-out infinite alternate; }
  .idea_voice i:nth-child(1)::before { animation: idea-drift-a 2.6s ease-in-out infinite alternate; }
  .idea_voice i:nth-child(1)::after { animation: idea-drift-b 3.2s ease-in-out infinite alternate; }
  .idea_voice i:nth-child(2) { animation: idea-ring 3.4s ease-out infinite; }
  .idea_voice i:nth-child(3) { animation: idea-ring 3.4s ease-out 1.7s infinite; }
}
@keyframes idea-breathe { from { transform: scale(1); } 99% { transform: scale(1.09); } }
@keyframes idea-drift-a { from { transform: translate(0, 0) scale(1); } 99% { transform: translate(38%, 30%) scale(1.15); } }
@keyframes idea-drift-b { from { transform: translate(0, 0) scale(1); } 99% { transform: translate(-34%, -36%) scale(0.9); } }
@keyframes idea-ring { from { opacity: 0.8; transform: scale(1); } 99% { opacity: 0; transform: scale(1.5); } }

.idea_edge { display: grid; justify-self: center; justify-items: start; align-content: center; gap: var(--space-1); width: min(100%, 18rem); }
.idea_link { display: flex; align-items: center; gap: var(--space-2); }
.idea_link .idea_text { max-width: 16rem; text-align: left; }
.idea_arrow { position: relative; flex: none; width: 2px; height: 32px; background: var(--color-primary); }
.idea_arrow::after { content: ""; position: absolute; width: 0; height: 0; border: 0; }
.idea_arrow.is-fwd::after { left: -4px; bottom: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--color-primary); }
.idea_arrow.is-back::after { left: -4px; top: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--color-primary); }

.idea_return { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; justify-self: center; min-height: 32px; margin: 0; padding: 4px var(--space-2); border-radius: var(--radius-pill); background: var(--color-primary-tint); color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 20px; text-align: center; }

@media (min-width: 64em) {
  .idea_board { grid-template-columns: 3fr 2.5fr 3fr 2.5fr 3fr; column-gap: 0; align-items: stretch; padding: var(--space-4); }
  .idea_edge { justify-self: stretch; justify-items: stretch; width: auto; padding-inline: var(--space-2); gap: var(--space-4); }
  .idea_link { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .idea_link .idea_text { order: -1; max-width: none; text-align: center; }
  .idea_arrow { width: 100%; height: 2px; }
  .idea_arrow.is-fwd::after { top: -4px; right: -1px; bottom: auto; left: auto; border: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--color-primary); }
  .idea_arrow.is-back::after { top: -4px; left: -1px; right: auto; bottom: auto; border: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 8px solid var(--color-primary); }

  /* the bracket: from under "You" to under "Your screen", with the label cutting the line */
  .idea_return { position: relative; display: block; justify-self: stretch; height: 40px; min-height: 0; margin: 0 calc(100% * 3 / 28); padding: 0; border: 2px solid var(--color-primary); border-top: 0; border-radius: 0 0 var(--radius-inner) var(--radius-inner); background: transparent; color: var(--color-text); font-weight: 400; }
  .idea_return::after { content: ""; position: absolute; top: -1px; right: -6px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--color-primary); }
  .idea_return span { position: absolute; top: calc(100% - 1px); left: 50%; padding: 0 var(--space-2); background: var(--color-surface); white-space: nowrap; transform: translate(-50%, -50%); }
}

/* ---- The app, in one map: a data table (screen, what it does, access, where this page shows it) ---- */
.datatable { margin-bottom: var(--space-2); border-radius: var(--radius-inner); background: var(--color-white); box-shadow: var(--ring); overflow: hidden; }
.datatable table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.datatable_caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.datatable thead th { padding: var(--space-2) var(--space-3); background: var(--color-surface); color: var(--color-text); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.12em; line-height: 20px; text-transform: uppercase; }
.datatable thead th:nth-child(1) { width: 24%; }
.datatable thead th:nth-child(3) { width: 26%; }

.datatable_group th { padding: 12px var(--space-3); background: var(--color-surface); color: var(--color-heading); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.12em; line-height: 20px; text-transform: uppercase; box-shadow: inset 0 1px 0 var(--color-hairline), inset 0 -1px 0 var(--color-hairline); }
.datatable_count { float: right; color: var(--color-text); font-weight: 400; letter-spacing: 0.04em; text-transform: none; }

.datatable tbody tr:not(.datatable_group) > * { padding: 12px var(--space-3); vertical-align: top; font-size: var(--text-small); line-height: 24px; }
.datatable tbody tr:not(.datatable_group) + tr:not(.datatable_group) > * { box-shadow: inset 0 1px 0 var(--color-hairline); }
.datatable tbody tr:not(.datatable_group):hover { background: var(--color-surface); }
.datatable tbody th[scope="row"] { color: var(--color-heading); font-weight: 600; }
.datatable tr.is-key th[scope="row"] { color: var(--color-primary); }
.datatable td { color: var(--color-text); }
.datatable .tag { min-height: 24px; }
.datatable th .tag.is-status { margin-left: var(--space-1); font-weight: var(--weight-medium); letter-spacing: 0.02em; }
.datatable_none { color: var(--color-text); }
.datatable a { color: var(--color-primary); font-weight: var(--weight-medium); text-decoration: none; }
.datatable a::after { content: " \2192"; }
.datatable a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 47.99em) {
  .datatable table, .datatable tbody, .datatable_group, .datatable_group th { display: block; }
  .datatable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .datatable tbody tr:not(.datatable_group) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); row-gap: 4px; padding: 12px var(--space-3); }
  .datatable tbody tr:not(.datatable_group) + tr:not(.datatable_group) { box-shadow: inset 0 1px 0 var(--color-hairline); }
  .datatable tbody tr:not(.datatable_group) > * { display: block; padding: 0; box-shadow: none !important; }
  .datatable tbody th[scope="row"] { grid-column: 1; grid-row: 1; }
  .datatable tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .datatable tbody td[data-label="Shown in"] { grid-column: 2; grid-row: 1; justify-self: end; font-size: var(--text-xs); line-height: 24px; white-space: nowrap; }
}

/* ---- Three decisions, as cards: challenge, decision, result ---- */
.decisions { display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); padding: 0; list-style: none; }
.decision { display: grid; align-content: start; padding: var(--space-3); border-radius: var(--radius-inner); background: var(--color-white); box-shadow: var(--ring); }
.decision_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.decision_num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-secondary-tint), 0 0 0 4px var(--color-secondary-tint); color: var(--color-secondary); font-size: var(--text-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.decision_icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary); }
.decision_icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.decision_block { padding: var(--space-2); border-radius: 12px; }
.decision_block.is-challenge { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-hairline); }
.decision_block.is-decision { background: var(--color-primary-tint); box-shadow: inset 0 0 0 1px var(--color-border-accent); }
.decision_block.is-result { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-hairline-strong); }
.decision_label { margin: 0 0 4px; color: var(--color-text); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.12em; line-height: 20px; text-transform: uppercase; }
.decision_block.is-decision .decision_label { color: var(--color-primary); }
.decision_text { margin: 0; color: var(--color-heading); font-size: var(--text-small); font-weight: var(--weight-medium); line-height: 24px; }
.decision_headline { margin: 0; color: var(--color-heading); font-size: var(--text-h3); font-weight: 600; line-height: 32px; font-variant-numeric: tabular-nums; }
.decision_sub { margin: 0; color: var(--color-text); font-size: var(--text-small); line-height: 24px; }
.decision_flow { display: grid; place-items: center; height: 32px; color: var(--color-primary); font-size: var(--text-body); line-height: 32px; }
.decision_flow::before { content: "\2193"; }
@media (min-width: 48em) {
  /* the three cards share their six rows (head, challenge, arrow, decision, arrow, result), so a longer line in one card
     moves the same block down in all three and the rows stay level */
  .decisions { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 var(--grid-gap); }
  .decision { grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
}