/**
 * /index2.php: the control centre, the whole product on one bento.
 *
 * Built from the Figma frame "index.php" (BUYrCf0ceigYdvO724gDPA, 13:2675).
 * Loads after css/index-new.css, which supplies the page paper (.tue-page),
 * the heading reset and the two dialogs; everything here is .ctr- scoped.
 * Every value is a platform token. The only local custom properties are the
 * layout measures the system does not define: the page gutter, the tile
 * padding and the tile minimum height.
 */

/* The site loads Fraunces italic at 400 only; the display emphasis is set
   bold italic, so this page asks for the heavier italics it uses. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,600;1,9..144,700&display=swap');

.ctr {
  --ctr-gut: clamp(var(--space-4), 4.5vw, calc(var(--space-16) + var(--space-4)));
  --ctr-tile-pad: clamp(var(--space-5), 2.4vw, var(--space-7));
  --ctr-tile-min: calc(var(--space-12) * 4 + var(--space-3));
  --ctr-gap: clamp(var(--space-4), 2vw, var(--space-6));
  color: var(--text-dark);
  line-height: var(--leading-relaxed);
}

.ctr-wrap { max-width: calc(var(--container-2xl) + var(--ctr-gut) * 2); margin-inline: auto; padding-inline: var(--ctr-gut); }

/* Display Text Pattern (DESIGN.md §7): the emphasised words are italic in the
   dark red, with a flush 8px underline in its tint. */
.ctr h1 em, .ctr h2 em {
  font-style: italic;
  font-weight: var(--font-bold);
  color: var(--mainsite-dark);
  box-shadow: inset 0 calc(var(--space-2) * -1) 0 var(--mainsite-light);
}

/* ---- Top line ----------------------------------------------------------- */
.ctr-top { display: flex; justify-content: flex-end; padding-top: var(--space-16); }
.ctr-top__id { font-size: var(--text-small); color: var(--text-muted); letter-spacing: var(--tracking-wide); font-variant-numeric: tabular-nums; }

/* ---- Statement ---------------------------------------------------------- */
.ctr-say { padding: clamp(var(--space-8), 5vw, var(--space-16)) 0 clamp(var(--space-10), 5vw, var(--space-16)); }
.ctr-say__grid { display: grid; gap: var(--space-7); }
.ctr-say__grid > * { min-width: 0; }
@media (min-width: 940px) {
  .ctr-say__grid { grid-template-columns: 1.25fr 0.75fr; gap: clamp(var(--space-7), 4vw, calc(var(--space-16) + var(--space-2))); align-items: start; }
}
.ctr-say h1 { font-size: clamp(var(--text-display), 6.4vw, var(--text-display-xl)); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); max-width: 16ch; }
.ctr-say__lede { font-size: var(--text-h4); line-height: var(--leading-relaxed); color: var(--text-default); margin-bottom: var(--space-5); }
.ctr-say__cta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2-5); }
.ctr-say__note { font-size: var(--text-small); color: var(--text-muted); margin-top: var(--space-6); }
.ctr-say__note b { color: var(--mainsite-dark); font-weight: var(--font-semibold); }
@media (max-width: 939px) {
  .ctr-say__cta { justify-content: flex-start; }
}

/* ---- The bento ---------------------------------------------------------- */
.ctr-centre { padding-bottom: clamp(var(--space-10), 6vw, calc(var(--space-16) + var(--space-6))); }
.ctr-row { display: grid; gap: var(--ctr-gap); grid-template-columns: 1fr; }
.ctr-row + .ctr-row { margin-top: clamp(var(--space-10), 5vw, var(--space-16)); }
.ctr-row > * { min-width: 0; }
@media (min-width: 720px) {
  .ctr-row--three, .ctr-row--two { grid-template-columns: repeat(2, 1fr); }
}
/* Deliberately uneven, never equal cards: the widths are the frame's own. */
@media (min-width: 1080px) {
  .ctr-row--three { grid-template-columns: 519fr 410fr 302fr; }
  .ctr-row--two { grid-template-columns: 737fr 519fr; }
}

.ctr-cell { display: flex; flex-direction: column; gap: var(--space-5); }

/* Cards (DESIGN.md §7): white on the paper, 12px radius, --shadow-sm at rest,
   the --card-border hairline .ws-card carries. */
.ctr-tile {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--ctr-tile-min);
  padding: var(--ctr-tile-pad);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* A screenshot that fills its tile and sets the row's height. */
.ctr-tile--flush { padding: 0; min-height: 0; justify-content: flex-start; }
.ctr-tile--flush img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* The library is wider than its tile: it fills the row the console sets and
   shows its left edge, so it must not set a height of its own. */
.ctr-tile--library { aspect-ratio: 519 / 430; }
.ctr-tile--library img { position: absolute; inset: 0; }

/* The agenda sits inset on the tile, cropped to its first rows. */
.ctr-tile--inset { padding: var(--space-7); }
.ctr-tile--inset img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; border: 1px solid var(--card-border); border-radius: var(--radius-xl); }

/* The Energy Arc card is shown larger than its tile and cropped at the right
   and bottom, so the score reads first. */
.ctr-tile--arc { padding: 0; }
/* .ctr leads the selector to outweigh index-new.css's `.tue-page main img`
   max-width, which otherwise shrinks the card back into the tile. */
.ctr .ctr-tile--arc img { position: absolute; top: 0; left: 0; width: 217%; max-width: none; height: auto; transform: translateY(-4.2%); }

/* Stacked, the tile keeps the frame's proportions so the crop stays the
   same crop at any width. */
@media (max-width: 1079px) {
  .ctr-tile--arc { min-height: 0; aspect-ratio: 302 / 253; }
}

/* Tile contents ----------------------------------------------------------- */
/* A screenshot that brings its own card edge and shadow, so the tile adds none. */
.ctr-tile--bare { padding: 0; min-height: 0; justify-content: flex-start; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.ctr-tile--bare img { width: 100%; height: auto; }

.ctr-tile--cards { justify-content: flex-start; }
.ctr-rescue { display: flex; flex-wrap: wrap; gap: var(--space-2-5); margin: 0; padding: 0; list-style: none; }
.ctr-rescue li { font-size: var(--text-small); padding: var(--space-2-5) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-full); background: var(--gray-100); color: var(--text-default); }
.ctr-rescue li:first-child { background: var(--mainsite-very-light); border-color: var(--mainsite-primary); color: var(--mainsite-dark); font-weight: var(--font-semibold); }

/* The fan of cards reaches the tile's edges and runs off its foot: it fills
   whatever height the row leaves, and the tile clips the rest. */
.ctr-fan { position: relative; container-type: inline-size; flex: 1; min-height: 0; margin: var(--space-12) calc(var(--ctr-tile-pad) * -1) calc(var(--ctr-tile-pad) * -1); }
.ctr-fan__card { position: absolute; width: 41.4%; height: auto; filter: drop-shadow(0 var(--space-1) var(--space-1) rgba(0, 0, 0, 0.25)); }
.ctr-fan__card--left { left: 3.3%; top: 2.1cqw; transform: rotate(-4.64deg); }
.ctr-fan__card--right { left: 46.2%; top: 0; transform: rotate(4.66deg); }
.ctr-fan__card--front { left: 28.1%; top: 5cqw; transform: rotate(1.66deg); }
@media (max-width: 1079px) {
  .ctr-fan { flex: none; aspect-ratio: 519 / 250; }
}

/* A tile's own way in, pinned 48px in from its bottom-right corner, above
   whatever the tile shows. Offsets start inside the 1px card hairline, so it
   comes off them. */
.ctr-tile__cta { position: absolute; right: calc(var(--space-12) - 1px); bottom: calc(var(--space-12) - 1px); z-index: 1; }

/* The caption sits outside the tile, gallery-style: the one thing the page
   is built on. */
.ctr-cap { padding-inline: var(--space-1); }
.ctr-cap__k { font-size: var(--text-small); font-weight: var(--font-semibold); color: var(--mainsite-dark); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-1); }
.ctr .ctr-cap h2 { font-size: var(--text-h3); line-height: var(--leading-tight); margin-bottom: var(--space-2); }
.ctr-cap p:not(.ctr-cap__k) { font-size: var(--text-small); line-height: var(--leading-relaxed); color: var(--text-default); max-width: 60ch; }

/* ---- Plans -------------------------------------------------------------- */
.ctr-plans { padding-bottom: clamp(var(--space-10), 6vw, calc(var(--space-16) + var(--space-6))); }
.ctr-plans__grid { display: grid; gap: var(--ctr-gap); }
.ctr-plans__grid > * { min-width: 0; }
@media (min-width: 820px) { .ctr-plans__grid { grid-template-columns: 1fr 1fr; } }
.ctr-plan { display: flex; flex-direction: column; gap: var(--space-4); padding: clamp(var(--space-5), 3vw, var(--space-8)); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
/* Pro is set apart by the tint and a red rule, not by a dark card: the
   palette is one red family on warm stone (DESIGN.md §7). */
.ctr-plan--pro { background: var(--mainsite-very-light); border: 2px solid var(--mainsite-dark); }
/* Hover follows .ws-card--hoverable: a 2px lift onto --shadow-lg. The Free
   card's hairline warms to the tint so the pair answer alike. :focus-within
   gives a keyboard user the same lift when they reach the button inside.
   There is no pointer cursor: the card is not a link, its button is. */
.ctr-plan { transition: var(--transition-interactive); }
.ctr-plan:hover, .ctr-plan:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ctr-plan:not(.ctr-plan--pro):hover, .ctr-plan:not(.ctr-plan--pro):focus-within { border-color: var(--mainsite-light); }
@media (prefers-reduced-motion: reduce) {
  .ctr-plan:hover, .ctr-plan:focus-within { transform: none; }
}
.ctr .ctr-plan h3 { font-size: var(--text-h2); color: var(--mainsite-dark); }
.ctr-plan__cost { font-size: var(--text-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ctr-plan__cost b { font-family: var(--font-heading); font-size: var(--text-h1); font-weight: var(--font-semibold); color: var(--text-dark); }
.ctr-plan ul { margin: 0 0 var(--space-4); padding-left: var(--space-4-5); display: flex; flex-direction: column; gap: var(--space-2); }
.ctr-plan li { font-size: var(--text-ui); line-height: var(--leading-relaxed); color: var(--text-default); }
.ctr-plan__cta { align-self: flex-end; margin-top: auto; }
.ctr-plans__more { display: flex; justify-content: center; margin-top: var(--space-12); }

/* ---- Voices ------------------------------------------------------------- */
.ctr-voices { padding-bottom: clamp(var(--space-12), 7vw, calc(var(--space-16) + var(--space-12))); }
/* Full content width on the bento's gap, so the quotes line up with the tiles. */
.ctr-voices__grid { display: grid; gap: var(--ctr-gap); }
.ctr-voices__grid > * { min-width: 0; }
@media (min-width: 900px) {
  .ctr-voices__grid { grid-template-columns: repeat(3, 1fr); }
}
.ctr-voice { display: flex; flex-direction: column; min-height: calc(var(--ctr-tile-min) + var(--space-6)); margin: 0; padding: clamp(var(--space-5), 2.4vw, var(--space-7)); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.ctr-voice blockquote { margin: 0 0 var(--space-6); font-family: var(--font-heading); font-size: var(--text-h4); line-height: var(--leading-relaxed); color: var(--text-dark); }
.ctr-voice figcaption { margin-top: auto; }
.ctr-voice b { display: block; font-size: var(--text-small); font-weight: var(--font-semibold); color: var(--mainsite-dark); }
.ctr-voice span { font-size: var(--text-meta); color: var(--text-muted); }

/* ---- Close -------------------------------------------------------------- */
.ctr-end { padding-bottom: clamp(var(--space-16), 8vw, calc(var(--space-16) * 2 - var(--space-2))); }
.ctr-end__box { display: grid; gap: var(--space-6); padding: clamp(var(--space-7), 4.5vw, calc(var(--space-16) - var(--space-1))); background: var(--mainsite-light); border: 2px solid var(--mainsite-dark); border-radius: var(--radius-xl); }
.ctr-end__box > * { min-width: 0; }
@media (min-width: 900px) { .ctr-end__box { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.ctr .ctr-end h2 { font-size: clamp(var(--text-h1), 3.8vw, var(--text-display)); line-height: var(--leading-tight); max-width: 18ch; }
/* The tint band would vanish into the box's own tint. */
.ctr .ctr-end h2 em { box-shadow: none; }
.ctr-end__cta { display: flex; flex-wrap: wrap; gap: var(--space-2-5); }
@media (min-width: 900px) { .ctr-end__cta { justify-content: flex-end; } }

/* Entrance (DESIGN.md §7, motion.md page-reveal regime): fade-in-up on the
   spring ease, staggered by --stagger-reveal. */
.ctr-rv { opacity: 0; transform: translateY(var(--space-3)); animation: ctr-rv var(--duration-reveal) var(--ease-reveal) forwards; animation-delay: calc(var(--i, 0) * var(--stagger-reveal)); }
@keyframes ctr-rv { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ctr-rv { animation: none; opacity: 1; transform: none; }
}