/* The showcase layer: ikonekt.com's 2026 redesign on the Doodle kit (artwork-parallax 03B).
   Loaded after site.css, so the chrome (bar, menus, footer, a11y panel) keeps its own rules and this
   file only draws the page bodies that open with <div class="sc">. The Doodle components read their
   colours from --noodle-* custom properties (js/noodle/motion.js tokens), so the brand reaches inside
   their shadow roots from here, and follows the theme because every value is a site token. */

.sc {
  /* Lime cannot carry white text, so the component fill is the ramp's deep stop; the lime and the
     pale stop are the drawings' accents. Words in accent colour use --accent-ink (see site.css). */
  --noodle-accent: var(--brand-1);
  --noodle-accent-2: var(--brand-2);
  --noodle-accent-3: var(--brand-3);
  --noodle-on-accent: #fff;
  --noodle-accent-text: var(--accent-ink);
  --noodle-ink: var(--ink);
  --noodle-surface: var(--paper-2);
  --noodle-paper: var(--paper);
  /* The inline drawings' roles (tools/inline_art.py). */
  --art-ink: var(--ink);
  --art-paper: var(--paper-2);
  --art-1: var(--brand-2);
  --art-2: var(--brand-3);
  /* <doodle-art>, which the components draw inside their shadow roots, paints line work from
     --doodle-ink and near-white shapes from --doodle-paper. Left unset, it fell back to the pack's own
     black and drew black lines on every dark ground (2026-09-25). */
  --doodle-ink: var(--art-ink);
  --doodle-paper: var(--art-paper);
  overflow-x: clip;
}

/* ── inline drawings: every colour of the pack becomes a role painted from the theme ─────────── */
.kit-ink { display: block; inline-size: 100%; block-size: auto; fill: var(--art-ink); }
.kit-ink .fp { fill: var(--art-paper); }
.kit-ink .fa { fill: var(--art-1); }
.kit-ink .fb { fill: var(--art-2); }
.kit-ink .sk { stroke: var(--art-ink); }

/* ── static hero: first paint is final layout, no component has to load ─────────────────────── */
.sc-hero { padding-block: clamp(28px, 5vw, 72px) clamp(24px, 4vw, 56px); }
.hx { display: grid; gap: clamp(20px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .hx-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.hx-copy { min-inline-size: 0; container-type: inline-size; }
.hx-eyebrow { margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
/* Display type: the author breaks the line (<br> at a clause boundary). Sized so the longest line of
   the site's headlines fits its column at 360 px and at 1440 px. */
.hx-headline { margin: 0; font-size: min(3.4rem, calc(100cqi / (var(--chars, 20) * .56))); line-height: 1.04; white-space: nowrap; letter-spacing: -.035em; font-weight: 700; overflow-wrap: break-word; hyphens: manual; }
.hx-headline em { font-style: normal; color: var(--accent-ink); }
.hx-lede { margin: 18px 0 0; max-inline-size: 60ch; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.55; color: var(--ink-2, var(--ink)); }
.hx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hx-scene { position: relative; justify-self: center; inline-size: min(100%, 460px); }
.hx-scene::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; background: var(--accent-soft); z-index: 0; }
.hx-scene .kit-ink { position: relative; z-index: 1; }
@media (max-width: 899px) { .hx-scene { inline-size: min(80%, 320px); order: -1; } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .hx-art .fa, :root:not([data-motion="reduce"]) .hx-art .fb {
    animation: sc-drift 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center;
  }
  :root:not([data-motion="reduce"]) .hx-art .fb { animation-delay: -3s; }
}
@keyframes sc-drift { from { transform: translateY(-3px); } to { transform: translateY(3px); } }

/* ── chapters ─────────────────────────────────────────────────────────────────────────────────── */
.sc-chapter { padding-block: clamp(40px, 6vw, 88px); }
.sc-chapter.band, .sc .band { background: var(--paper-2); }
.sc-title { margin: 0 0 18px; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.7rem); line-height: 1.08; letter-spacing: -.03em; }
.sc-note { margin: 22px 0 0; padding: 14px 18px; border-inline-start: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 12px 12px 0; max-inline-size: 68ch; }
.sc-split { display: grid; gap: clamp(20px, 3vw, 44px); align-items: center; }
@media (min-width: 900px) { .sc-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sc-split > * { min-inline-size: 0; }
.sc :is(doodle-bento, doodle-sticky-steps, doodle-feature-tabs, doodle-callouts, doodle-story) { display: block; margin-block: 24px; }
.sc doodle-cta-burst { display: block; margin-block-start: clamp(32px, 5vw, 72px); }

/* ── the showpiece panels, redrawn: an ink band with a Doodle figure instead of a photograph ───── */
.sc .sc-panel { position: relative; display: grid; align-items: center; padding-block: clamp(48px, 7vw, 104px); background: #0B0C10; color: #E8EAEE; overflow: hidden; }
.sc .sc-panel .wrap { position: relative; z-index: 1; inline-size: 100%; }
.sc .sc-panel .panel-say { max-inline-size: 36rem; }
.sc .sc-panel h2 { color: #fff; }
.sc .sc-panel .objection { color: #BEF264; }
.sc .sc-panel a { color: #BEF264; }
.sc-panel-art { --art-ink: #E8EAEE; --art-paper: #14161D; position: absolute; inset-block: 50% auto; inset-inline-end: max(16px, 4vw); inline-size: min(36vw, 420px); transform: translateY(-50%); opacity: .95; }
@media (max-width: 899px) {
  .sc-panel-art { position: relative; inset: auto; transform: none; inline-size: min(70%, 260px); margin: 0 auto 20px; }
  .sc .sc-panel { grid-template-rows: auto auto; }
}

/* ── the home's sections: eyebrow, lede, tiles, stats, band ────────────────────────────────────── */
.sc-section { padding-block: clamp(40px, 6vw, 88px); }
.sc-section:nth-of-type(even), .sc-band { background: var(--paper-2); }
.sc-band { padding-block: clamp(40px, 6vw, 80px); }
.sc-eyebrow { margin: 0 0 12px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.sc-lede { margin: 0 0 8px; max-inline-size: 64ch; font-size: clamp(1rem, .96rem + .3vw, 1.15rem); line-height: 1.55; }
.sc-more { margin-top: 22px; }
.sc-copy > p { max-inline-size: 60ch; }
/* Tiles: auto-fit columns, so the last row is never a lone gap (a row fills with whatever is left). */
.sc-tiles { display: grid; gap: 14px; margin-top: 26px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.sc-tile, .sc-card { padding: 20px; border: var(--rule-w, 1px) solid var(--rule); border-radius: 18px; background: var(--paper); min-inline-size: 0; }
.sc-tile h3, .sc-card h3 { margin: 12px 0 6px; font-size: 1.05rem; }
.sc-tile p, .sc-card p { margin: 0; overflow-wrap: anywhere; }
.sc-tile .nav-ico { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--accent-soft); }
.sc-tile .nav-ico svg { inline-size: 22px; block-size: 22px; fill: none; stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.sc-stats .stat { padding: 18px; border-radius: 18px; background: var(--paper); border: var(--rule-w, 1px) solid var(--rule); }
.sc-stats .stat b { display: block; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: -.03em; color: var(--accent-ink); }
.sc .thread { min-inline-size: 0; }
/* The six pipeline stages wrap into rows instead of a sideways scroller inside the page. */
.sc .pipe { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); overflow: visible; }