/* Tickaboo — /resources/ page-specific styles.
 *
 * Loaded automatically after fonts/tokens/base/components (see
 * tools/stitch.js → injectPageCssLink) because this file's name matches
 * the page slug ("resources"). Governed by design-guide/current.md §13
 * (interior marketing page pattern) and page-craft.md §3 (build a mockup
 * that argues something, never a generic icon).
 *
 * Built 1 Sep 2026 for Phase 3 of the SEO content strategy.
 *
 * The illustration system below (.ill*) is new. It is deliberately kept
 * here rather than in components.css until a second page needs it, per the
 * site's extract-on-reuse convention. These are brand-new class names with
 * no v2 predecessors, so there is no silent-fallback trap (current.md §18).
 * The moment a guide or comparison page wants a document illustration,
 * move the whole "ILLUSTRATION SYSTEM" block into components.css.
 */

/* ═══════════════════════════════════════════════════════════════════
   ILLUSTRATION SYSTEM
   Flat, token-only document illustrations. Every artefact is built from
   the same parts (a sheet, a green band, sage text lines, tick boxes) so
   the four read as one family, and each one is arranged to argue what
   its template is actually for. No shadows (§7), no raw hex, no faces.
   ═══════════════════════════════════════════════════════════════════ */
.ill {
  display: block;
  width: 100%;
  height: auto;
  /* Everything inherits from these, so a card can retint its whole
     illustration by overriding one custom property. */
  --ill-ground: color-mix(in srgb, var(--color-surface) 46%, var(--color-surface-tint));
  --ill-blob: color-mix(in srgb, var(--color-accent-2) 72%, var(--color-surface-tint));
  --ill-soft: color-mix(in srgb, var(--color-accent-2) 62%, var(--color-surface-tint));
}

/* Grounds and decorative geometry ---------------------------------- */
.ill__ground { fill: var(--ill-ground); }
.ill__blob { fill: var(--ill-blob); }
.ill__accent-shape { fill: var(--shape-orange); }

/* Paper ------------------------------------------------------------ */
.ill__sheet {
  fill: var(--color-surface-tint);
  stroke: var(--color-border);
  stroke-width: 1.5;
}
.ill__sheet--back { fill: var(--color-paper); }
.ill__sheet--tint { fill: color-mix(in srgb, var(--color-surface) 40%, var(--color-surface-tint)); }

/* Ink -------------------------------------------------------------- */
.ill__band { fill: var(--color-primary); }
.ill__band-cap { fill: var(--color-primary); }
.ill__line { fill: var(--color-accent-2); }
.ill__line--soft { fill: var(--ill-soft); }
.ill__line--head { fill: color-mix(in srgb, var(--color-surface-tint) 62%, var(--color-primary)); }

.ill__rule,
.ill__grid path {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1.25;
}

/* Decisions: a ticked box, an empty box, a crossed box -------------- */
.ill__box {
  fill: var(--color-surface-tint);
  stroke: var(--color-border);
  stroke-width: 1.5;
}
.ill__box--on { fill: var(--color-primary); stroke: var(--color-primary); }
.ill__box--no { fill: var(--color-surface-tint); stroke: var(--color-muted); }

.ill__tick {
  fill: none;
  stroke: var(--color-surface-tint);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* A tick sitting on paper rather than inside a filled box. */
.ill__tick--green { stroke: var(--color-primary); }
.ill__tick--light { stroke: var(--color-surface-tint); }

.ill__cross {
  fill: none;
  stroke: var(--color-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.ill__dash {
  fill: none;
  stroke: color-mix(in srgb, var(--color-muted) 55%, transparent);
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* A signature, drawn rather than typed. */
.ill__sign {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* Numbered policy sections, the student's speech bubble, the chip on a
   withdrawn row, and the lens that says "check this row first". */
.ill__nums circle { fill: var(--color-primary); }
.ill__disc { fill: var(--color-primary); }
.ill__bubble {
  fill: var(--color-surface-tint);
  stroke: var(--color-border);
  stroke-width: 1.5;
}
.ill__chip { fill: var(--shape-orange); }
.ill__row-off { fill: color-mix(in srgb, var(--color-ink) 8%, transparent); }
.ill__lens circle {
  fill: color-mix(in srgb, var(--color-surface-tint) 25%, transparent);
  stroke: var(--color-primary);
  stroke-width: 3;
}
.ill__lens path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 4.5;
  stroke-linecap: round;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — copy left, the four artefacts fanned out right.
   ═══════════════════════════════════════════════════════════════════ */
.res-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4rem);
}
.res-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .res-hero__inner { grid-template-columns: 1.05fr 1fr; }
}
.res-hero__copy h1 {
  margin-bottom: 1.1rem;
  font-size: clamp(2.4rem, 1.9rem + 2.4vw, 3.5rem);
}
.res-hero__copy .lead { max-width: 48ch; margin-bottom: 1.9rem; }
.res-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.res-hero__note {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
  max-width: 44ch;
}
.res-hero__visual { margin: 0; }
.res-hero__visual .ill { max-width: 520px; margin-inline: auto; }

.res-hero__floats .float-cluster--nw { top: 4%; left: -4%; }
.res-hero__floats .float-cluster--nw .float-shape:nth-child(1) { width: 118px; height: 118px; }
.res-hero__floats .float-cluster--nw .float-shape:nth-child(2) {
  width: 84px; height: 34px; top: 106px; left: 62px;
}
.res-hero__floats > .float-shape--ring { width: 128px; height: 128px; top: 6%; right: 2%; }
.res-hero__floats > .float-shape--blob { width: 92px; height: 92px; bottom: 5%; left: 39%; }

@media (max-width: 899px) {
  .res-hero__floats > .float-shape--blob { display: none; }
  .res-hero__inner { text-align: center; }
  .res-hero__copy .lead,
  .res-hero__note { margin-inline: auto; }
  .res-hero__actions { justify-content: center; }
}
/* §12: on a phone the h1 runs full width, so all but one shape comes out. */
@media (max-width: 720px) {
  .res-hero__floats > .float-shape--ring,
  .res-hero__floats .float-cluster--nw .float-shape:nth-child(2) { display: none; }
  .res-hero__floats .float-cluster--nw { top: 1%; left: -12%; }
  .res-hero__floats .float-cluster--nw .float-shape:nth-child(1) { width: 92px; height: 92px; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE FOUR TEMPLATES
   Card treatment 2 (white + hairline, §8): these are a chooser grid, the
   same job as plan cards. The illustration carries its own tint ground,
   so a tinted card underneath would be tint on tint.
   ═══════════════════════════════════════════════════════════════════ */
.res-templates .section-lead { max-width: 60ch; margin-inline: auto; }
.tpl-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 880px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }

.tpl {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-tint);
  overflow: clip;
}
/* The illustration ground is square-cornered and the card clips it, so the
   art's top corners follow the card radius and its bottom edge meets the
   body flush. Decorative shapes that run past the ground are clipped by the
   SVG viewBox, which is exactly the ground. */
.tpl__art { position: relative; }

/* Each illustration ground is tinted a little differently so the four
   cards differ subtly side by side, per the tint-rotation rule (§8). */
.tpl:nth-child(2) .ill {
  --ill-ground: color-mix(in srgb, var(--color-paper) 72%, var(--color-surface-tint));
}
.tpl:nth-child(3) .ill {
  --ill-ground: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-tint));
}
.tpl:nth-child(4) .ill {
  --ill-ground: color-mix(in srgb, var(--color-surface) 30%, var(--color-paper));
}

.tpl__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 3vw, 2rem);
}
.tpl__kind {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
}
.tpl__body h3 { margin: 0 0 0.4rem; font-size: 1.3125rem; }
.tpl__for {
  margin: 0 0 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
}
.tpl__body > p { margin: 0 0 1.1rem; color: var(--color-muted); }

.tpl__list {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.tpl__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.5;
}
/* A small green rule rather than a tick glyph: the list is what is in the
   file, not a list of things you get, so a tick would overclaim. */
.tpl__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.7rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary);
}

.tpl__dl { align-self: flex-start; margin-top: auto; }
.tpl__meta {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   HOW THE THREE FIT TOGETHER — a flow, not another card grid. The
   numbered steps read left to right on desktop with a hairline running
   between them, so the section's composition differs from the one above.
   ═══════════════════════════════════════════════════════════════════ */
.res-how__title {
  text-align: center;
  max-width: 26ch;
  margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(2.1rem, 1.8rem + 1.6vw, 2.85rem);
}
/* The trailing full stop is its own .word so the fill reaches it last;
   it must not carry the inter-word space in front of it. */
.res-how__title .word + .word:last-child { margin-left: -0.28em; }
.res-how .section-lead { max-width: 58ch; margin-inline: auto; }

.flow {
  list-style: none;
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .flow { grid-template-columns: repeat(3, 1fr); } }

.flow__step { position: relative; padding-top: 3.5rem; }
.flow__num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-surface-tint);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
}
/* The hairline that carries the eye from one step to the next. It starts
   past the numeral and stops short of the next one, so it reads as a
   connector rather than a border. */
.flow__step::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 3.25rem;
  right: 0;
  height: 1px;
  background: var(--color-border);
}
.flow__step:last-child::before { display: none; }
@media (max-width: 819px) {
  .flow__step::before { display: none; }
}
.flow__step h3 { margin: 0 0 0.5rem; font-size: 1.1875rem; }
.flow__step p { margin: 0; color: var(--color-muted); }

/* ═══════════════════════════════════════════════════════════════════
   THE PRODUCT PANEL — this page's one dark value (§8 drench, page-craft
   §2 "every page needs one dark value"). Same recipe as .founder on
   /about/, including the sage brush so the accent underline survives
   against the green.
   ═══════════════════════════════════════════════════════════════════ */
.res-panel {
  --underline-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2.5 8.6 C 24 4.2, 55 2.6, 96 3.4 C 106 3.6, 114 4.2, 117.5 5.1 C 118.6 5.5, 118.3 6.6, 116.8 6.7 C 96 6.2, 66 6.4, 38 8.2 C 24 9.1, 12 10.2, 5 11 C 3.2 11.1, 1.8 10.2, 2 9.4 Z' fill='%23C5DCC8' fill-opacity='0.9'/%3E%3C/svg%3E");
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding: clamp(2rem, 4.5vw, 3.25rem);
  border-radius: var(--radius-lg);
  background: var(--color-dark);
  color: var(--color-dark-ink);
}
@media (min-width: 860px) { .res-panel { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.res-panel h2 {
  color: var(--color-dark-ink);
  margin-bottom: 1rem;
  font-size: clamp(2rem, 1.7rem + 1.4vw, 2.6rem);
}
.res-panel .accent--quicksand { color: var(--color-accent-2); }
.res-panel__copy p {
  color: color-mix(in srgb, var(--color-dark-ink) 82%, transparent);
  max-width: 54ch;
}
.res-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
}
/* The ghost button sits on the drench. components.css gives .btn--ghost a
   WHITE fill and green label, which on the dark panel rendered as a white
   pill with pale text: unreadable, and it fought the primary CTA beside it.
   Clear the fill and take the light label and border instead. */
.res-panel__ghost {
  background: transparent;
  color: var(--color-dark-ink);
  border-color: color-mix(in srgb, var(--color-dark-ink) 42%, transparent);
}
.res-panel__ghost:hover {
  color: var(--color-dark);
  background: var(--color-dark-ink);
  border-color: var(--color-dark-ink);
}
.res-panel__ghost .btn__disc {
  background: transparent;
  color: var(--color-dark-ink);
  border-color: color-mix(in srgb, var(--color-dark-ink) 42%, transparent);
}
.res-panel__ghost:hover .btn__disc {
  color: var(--color-dark);
  border-color: color-mix(in srgb, var(--color-dark) 34%, transparent);
}

.res-panel__facts { margin: 0; display: grid; gap: 0.7rem; align-content: start; }
.res-panel__facts > div {
  display: grid;
  gap: 0.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dark-ink) 18%, transparent);
}
.res-panel__facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.res-panel__facts dt {
  font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-dark-ink) 62%, transparent);
}
.res-panel__facts dd {
  margin: 0;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 0.9375rem; color: var(--color-dark-ink);
  overflow-wrap: anywhere;
}
/* The Soon chip is sage on white by default and vanishes on the drench. */
.res-panel__facts .chip-soon {
  background: color-mix(in srgb, var(--color-accent-2) 26%, transparent);
  color: var(--color-accent-2);
}

/* ═══════════════════════════════════════════════════════════════════
   BYLINE — the E-E-A-T and freshness block. A named author linking the
   About page, what the templates were drafted against, and an honest
   dated line. Quiet by design: it is credibility, not a pitch, so it
   sits as a tinted rail rather than another card.
   ═══════════════════════════════════════════════════════════════════ */
.byline {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: color-mix(in srgb, var(--color-paper) 62%, var(--color-surface-tint));
}
.byline__who {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-ink);
}
.byline__body p { margin: 0 0 0.9rem; color: var(--color-muted); font-size: 0.9375rem; }
.byline__date {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
}