/*!
 * Invo — Tirth Enterprise
 * Palette sampled directly from the Invo app icon:
 * teal→blue document gradient, green success arrow, white check disc.
 */

:root {
  --teal:    #23C9C0;
  --blue:    #1587E8;
  --blue-dk: #0B6BC4;
  --green:   #3EE07C;
  --green-dk:#22B85E;

  --ink:     #0B1B2B;
  --ink-2:   #3D5266;
  --ink-3:   #566E82;   /* 5.32:1 on white — was #7089A0 at 3.64:1, below AA */
  --paper:   #FFFFFF;
  --wash:    #F5F9FC;
  --line:    #E3EDF4;
  --danger:  #C2334A;
  --ok:      #0E7A3C;   /* readable green; the bright #3EE07C is decoration only */

  /* Decorative only — never put text on this. White on the teal end is
     2.06:1. Text buttons use --btn (solid) instead. */
  --grad: linear-gradient(145deg, var(--teal) 0%, var(--blue) 100%);
  --btn:  #0B6BC4;      /* 5.36:1 with white */
  --btn-h:#0A5CA8;

  /* modular type scale */
  --t-xs: .78rem; --t-sm: .875rem; --t-base: 1rem;
  --t-md: 1.125rem; --t-lg: 1.375rem; --t-xl: 1.9rem; --t-2xl: 2.6rem;

  /* Brutalist structure on the Invo palette: square corners, visible
     borders, hard offset shadows with no blur, instant state changes. */
  --r-sm: 0px;
  --r:    0px;
  --r-lg: 0px;
  --r-tile: 0px;

  --edge:   3px;              /* standard border weight */
  --sh-1:   4px 4px 0 var(--ink);
  --sh-2:   8px 8px 0 var(--ink);

  --w: 1120px;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Class rules like .actions{display:flex} outrank the UA stylesheet's
   [hidden] rule, so hidden elements would still render. Force it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.033em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); letter-spacing: -.024em; margin-top: 2.2em; }
h3 { font-size: 1.14rem; letter-spacing: -.012em; margin-top: 1.8em; }
p  { margin: 0 0 1.1em; }
a  { color: var(--blue-dk); }
a:hover { color: var(--blue); }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.muted { color: var(--ink-3); }
.small { font-size: .9rem; }
.center { text-align: center; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------- header ---------------- */

.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 16px; height: 66px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand-mark {
  width: 34px; height: 34px; border-radius: var(--r-tile);
  background: var(--grad); flex: none;
  display: grid; place-items: center;
  box-shadow: var(--sh-1);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-name { font-weight: 800; font-size: 1.16rem; color: var(--ink); letter-spacing: -.02em; }
.brand-by { display: block; font-size: .66rem; font-weight: 600; color: var(--ink-3);
            letter-spacing: .09em; text-transform: uppercase; margin-top: -3px; }

.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
  padding: 8px 13px; border-radius: 999px; text-decoration: none;
  color: var(--ink-2); font-size: .94rem; font-weight: 600;
}
.nav a:hover { background: var(--wash); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--wash); color: var(--blue-dk); }

.nav-toggle {
  display: none; width: 40px; height: 40px; border: 1px solid var(--line);
  background: var(--paper); border-radius: var(--r-sm); cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px;
  position: relative; margin: 0 auto; content: '';
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 66px; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: 10px; gap: 2px;
    display: none; box-shadow: var(--sh-2);
  }
  .nav.is-open { display: flex; }
}

/* ---------------- hero ---------------- */

.hero { padding: 54px 0 26px; text-align: center; }
.hero h1 { max-width: 17ch; margin-inline: auto; }
.hero .lede { font-size: clamp(1.02rem, 2vw, 1.2rem); max-width: 62ch; margin: 0 auto 20px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--blue-dk); background: #E8F4FE;
  padding: 6px 13px; border-radius: 999px; margin-bottom: 16px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-dk); }

/* format tiles — the repeating motif from the icon */
/* Supported-format labels. These are information, not controls — pills with
   borders and a highlighted first item read as buttons and invite a click
   that does nothing. Rendered as a quiet inline list instead. */
.chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 0; margin: 20px auto 0; max-width: 62ch;
}
.chip {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .03em; color: var(--ink-3); padding: 0 12px;
  border-left: 1px solid var(--line); line-height: 1.35;
}
.chip:first-child { border-left: 0; }

/* ---------------- tool ---------------- */

.tool { margin: 26px 0 8px; }

.drop {
  border: 2px dashed #C7DCEA; border-radius: var(--r-lg);
  background: var(--wash);
  padding: 46px 24px; text-align: center; cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}
.drop:hover { border-color: var(--blue); background: #F0F8FE; }
.drop.is-over { border-color: var(--green-dk); background: #EFFDF4; transform: scale(1.006); }
.drop-ic { width: 40px; height: 40px; color: var(--blue); margin-bottom: 6px; }
.drop-title { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.drop-sub { margin: 0 0 10px; }
.drop-priv { font-size: var(--t-sm); color: var(--ink-3); margin: 0; }

.linkish {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--blue-dk); text-decoration: underline; cursor: pointer;
}

.opts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px; margin-top: 18px; padding: 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
}
.opt-wide { grid-column: 1 / -1; }
.opt-label { display: block; font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.opt-val { color: var(--blue-dk); font-family: var(--mono); font-weight: 600; }
.opt-check { display: flex; align-items: center; gap: 9px; font-size: .93rem; cursor: pointer; }

.input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
}
.input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px #D8ECFD; }
.range { width: 100%; accent-color: var(--blue); }

.queue { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.row {
  display: flex; align-items: center; gap: 14px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  box-shadow: var(--sh-1);
}
.row-thumb {
  width: 52px; height: 52px; border-radius: var(--r-sm); flex: none; overflow: hidden;
  background: var(--wash); display: grid; place-items: center;
}
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-ph { font-family: var(--mono); font-size: .66rem; font-weight: 700; color: var(--ink-3); }
.row-meta { min-width: 0; flex: 1; }
.row-name { font-weight: 650; color: var(--ink); font-size: .95rem;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: .85rem; color: var(--ink-3); }
.row-sub.is-error { color: var(--danger); white-space: normal; }
.row-act { flex: none; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.btn {
  font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
  padding: 11px 20px; border-radius: var(--r-sm); border: 1px solid transparent;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--btn); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover:not([disabled]) { background: var(--btn-h); box-shadow: var(--sh-2); color: #fff; }
.btn-ghost { background: var(--paper); border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { background: var(--wash); }
.btn-sm { padding: 7px 13px; font-size: .86rem; }

.spinner {
  width: 18px; height: 18px; display: block; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--blue);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- tool grid ---------------- */

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px; margin: 14px 0 34px;
}
.card {
  position: relative; display: flex; flex-direction: column;
  text-decoration: none; padding: 18px 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.card:hover, .card:focus-visible {
  transform: translateY(-2px); box-shadow: var(--sh-2); border-color: #B9D8EE;
}
.card-tile {
  width: 38px; height: 38px; border-radius: var(--r-tile); background: var(--grad);
  display: grid; place-items: center; margin-bottom: 12px; flex: none;
}
.card-tile svg { width: 19px; height: 19px; color: #fff; }
.card-t {
  display: block; font-weight: 700; color: var(--ink);
  font-size: var(--t-md); letter-spacing: -.015em; margin-bottom: 5px;
}
.card-d { display: block; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.card::after {
  content: '→'; position: absolute; top: 18px; right: 18px;
  color: var(--btn); font-size: 1.05rem; opacity: 0; transform: translateX(-4px);
  transition: opacity .16s, transform .16s;
}
.card:hover::after, .card:focus-visible::after { opacity: 1; transform: translateX(0); }

.section-label {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 34px 0 0;
  display: flex; align-items: center; gap: 14px;
}
.section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ---------------- content ---------------- */

.prose { max-width: 68ch; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose h2:first-child { margin-top: 0; }

.faq { border-top: 1px solid var(--line); margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 15px 0; font-weight: 700; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--blue); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 15px; }

.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; position: relative; padding-left: 42px; margin-bottom: 14px; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px;
  width: 27px; height: 27px; border-radius: var(--r-tile); background: var(--btn);
  color: #fff; font-size: .82rem; font-weight: 700; display: grid; place-items: center;
}

.note {
  border-left: 3px solid var(--teal); background: var(--wash);
  padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 1.4em 0;
}
.note p:last-child { margin-bottom: 0; }

/* ad slots — fixed height so there is no layout shift */
.ad { margin: 32px auto; text-align: center; min-height: 90px; }
.ad-inline { min-height: 250px; }
/* With no ad script on the page these reserve a large empty band that reads
   as broken layout. Collapse them until AdSense is switched on. */
.ad:empty { display: none; }

/* ---------------- footer ---------------- */

.ftr { border-top: 1px solid var(--line); margin-top: 56px; padding: 36px 0 26px; background: var(--wash); }
.ftr-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px; }
.ftr h4 { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: 6px; }
.ftr a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); }
.ftr li { hyphens: none; overflow-wrap: normal; }
.ftr a:hover { color: var(--blue-dk); text-decoration: underline; }
.ftr-btm {
  border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px;
  font-size: .87rem; color: var(--ink-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
@media (max-width: 720px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------------- added for v2 components ---------------- */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; color: #fff; }

.nav-all { color: var(--blue-dk) !important; font-weight: 700 !important; }

.crumbs { font-size: .84rem; color: var(--ink-3); padding: 16px 0 0; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--blue-dk); text-decoration: underline; }
.crumbs span { color: var(--ink-2); }

.hero-tool { padding-top: 22px; }

.cols { columns: 2; column-gap: 28px; }
.cols li { break-inside: avoid; }
@media (max-width: 620px) { .cols { columns: 1; } }

.posts { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.post {
  display: block; text-decoration: none; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.post:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: #CFE4F3; }
.post-t { display: block; font-weight: 750; color: var(--ink); font-size: 1.1rem; margin-bottom: 4px; }
.post-d { display: block; color: var(--ink-3); font-size: .92rem; line-height: 1.5; }
.post-m { display: block; margin-top: 8px; font-size: .8rem; color: var(--ink-3); font-family: var(--mono); }

.ftr-grid { grid-template-columns: 1.5fr repeat(4, minmax(130px, 1fr)); gap: 24px; }
.ftr-about { grid-column: span 1; }
@media (max-width: 1000px) { .ftr-grid { grid-template-columns: repeat(3, 1fr); }
                             .ftr-about { grid-column: span 3; } }
.ftr h4 { margin-bottom: 10px; }
@media (max-width: 620px)  { .ftr-grid { grid-template-columns: repeat(2, 1fr); }
                             .ftr-about { grid-column: span 2; } }

.prose h3 { font-size: 1.05rem; }
.prose code {
  background: var(--wash); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 6px; font-family: var(--mono); font-size: .86em;
}

/* ---------------- homepage universal tool ---------------- */

.hometool { margin: 8px auto 4px; max-width: 940px; }
.hometool .drop { padding: 52px 28px; }
.hometool .drop-title { font-size: var(--t-lg); }

.hresult {
  margin-top: 16px; padding: 18px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1);
  text-align: left;
}
.hresult-head { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; }
.hresult-file {
  margin: 0 0 2px; font-weight: 700; color: var(--ink); font-size: var(--t-base);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hresult-meta { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.hactions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.hsuggest { margin: 14px 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.hsuggest a { margin-left: 10px; font-weight: 600; }
.hresult .row { margin-top: 14px; }

/* ---------------- hero refinements ---------------- */

.hero { padding: 46px 0 20px; }
.hero h1 {
  max-width: 19ch; margin-inline: auto; letter-spacing: -.035em;
  text-wrap: balance;   /* avoids a single orphaned word on the last line */
}
.hero .lede { max-width: 58ch; text-wrap: pretty; }

/* Content sections read as a distinct zone rather than a stray text column
   misaligned under the wider card grid. */
.band { background: var(--wash); border-top: 1px solid var(--line); margin-top: 46px; padding: 8px 0 40px; }
.band .prose h2:first-child { margin-top: 34px; }

.faq summary:hover { color: var(--btn); }

/* ---------------- legal pages ---------------- */

.legal { max-width: 74ch; }
.legal h2 { font-size: var(--t-lg); margin-top: 2em; }
.legal h3 { font-size: var(--t-base); margin-top: 1.5em; color: var(--ink); }
.legal p, .legal li { font-size: var(--t-base); }

.tbl {
  width: 100%; border-collapse: collapse; margin: 1.2em 0;
  font-size: var(--t-sm); border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden;
}
.tbl th {
  text-align: left; padding: 10px 13px; background: var(--wash);
  color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--line);
}
.tbl td { padding: 10px 13px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
@media (max-width: 620px) { .tbl, .tbl thead, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; }
  .tbl thead { display: none; }
  .tbl tr { border-bottom: 2px solid var(--line); }
  .tbl td { border: 0; padding: 6px 12px; } }

/* ══════════════════════════════════════════════════════════════════
   v3 — bolder direction.
   Style reference: Brutalism / Space Grotesk (verified as the match for
   creative tools with a young audience). Taken: heavy display type, high
   contrast, large blocks, bento structure, staggered reveals.
   Rejected: 0px corners and "no transitions" — those would discard the
   Invo icon's squircle-and-gradient identity.
   ══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;                       /* text paints immediately in the fallback */
  src: url('/assets/fonts/space-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ink-deep: #071322;
}

h1, h2, h3, .brand-name, .card-t, .btn, .section-label, .stat-n {
  font-family: var(--display);
}
h1 { font-weight: 700; letter-spacing: -.04em; }
h2 { font-weight: 700; letter-spacing: -.03em; }

/* ---------------- dark hero ---------------- */

.hero-dark {
  background: var(--ink-deep);
  color: #C8D8E6;
  padding: 62px 0 78px;
  position: relative;
  overflow: hidden;
  margin-bottom: -46px;                     /* the tool card overlaps the edge */
}
.hero-dark::before {                        /* soft brand glow, purely decorative */
  content: ''; position: absolute; inset: -40% 20% auto -10%; height: 130%;
  background: radial-gradient(closest-side, rgba(35,201,192,.20), transparent 70%);
  pointer-events: none;
}
.hero-dark::after {
  content: ''; position: absolute; inset: -30% -15% auto auto; width: 60%; height: 120%;
  background: radial-gradient(closest-side, rgba(21,135,232,.22), transparent 70%);
  pointer-events: none;
}
.hero-dark > * { position: relative; }
.hero-dark h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6.4vw, 4.4rem);
  line-height: 1.02;
  max-width: 17ch;
}
.hero-dark .lede { color: #9DB4C8; font-size: clamp(1.05rem, 2vw, 1.22rem); }
.hero-dark .eyebrow {
  background: rgba(255,255,255,.09); color: #7FE0D8;
  border: 1px solid rgba(255,255,255,.14);
}
.hero-dark .chip { color: #7C93A8; border-left-color: rgba(255,255,255,.14); }
.grad-text {
  background: linear-gradient(100deg, var(--teal), #6FD0FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* the drop card sits on the seam between dark and light */
.hometool { position: relative; z-index: 2; }
.hometool .drop {
  background: #fff; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 50px rgba(4,14,26,.30);
  border-radius: var(--r-lg);
}
.hometool .drop:hover { background: #fff; border-color: var(--teal); }
.hometool .drop.is-over { background: #F1FDF6; border-color: var(--green-dk); }

/* ---------------- bento tool grid ---------------- */

/* (superseded by the 6-column span system below)
   Orphan-free at every column count.
   The grid resolves to 3 columns at >=968px, 2 columns from 668-967px, and
   1 below that (minmax(300px,1fr) inside a 1120px container).
   - 3 cols: build.py promotes the first card of any category where
     count % 3 == 1, so the stranded card disappears.
   - 2 cols: an odd number of cards always strands the last one, so the last
     card spans the full row instead. :last-child:nth-child(odd) detects an
     odd total without needing the count in CSS.
   - 1 col: nothing to strand. */
.grid { grid-auto-flow: dense; }

/* Six-column base so a card can be a true half (span 3) or a third
   (span 2). build.py's row_plan() alternates rows of halves and thirds so
   every row sums to exactly 6 — even widths, visible rhythm, no orphans. */
.grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.s2 { grid-column: span 2; }
.s3 { grid-column: span 3; }
.s6 { grid-column: span 6; }

@media (max-width: 1000px) {                 /* two per row, all equal */
  .s2, .s3 { grid-column: span 3; }
  .grid > .card:last-child:nth-child(odd) { grid-column: span 6; }
}
@media (max-width: 640px) {                  /* single column */
  .s2, .s3, .s6 { grid-column: span 6; }
}

.card.is-feature .card-t { font-size: var(--t-lg); }
.card.is-feature .card-tile { width: 46px; height: 46px; }
.card.is-feature .card-tile svg { width: 23px; height: 23px; }

.card {
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(var(--line), var(--line)) border-box;
  border: 1px solid transparent;
}
.card:hover, .card:focus-visible {
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--grad) border-box;
  transform: translateY(-3px);
}

/* ---------------- scroll reveal ---------------- */

.reveal { opacity: 0; transform: translateY(14px) scale(.985); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .42s cubic-bezier(.2,.7,.3,1), transform .42s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------------- section labels ---------------- */

.section-label {
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .14em;
  color: var(--ink); margin: 42px 0 0;
}
.section-label::after { background: var(--line); }

/* Feature cards are twice as wide but carried the same short description,
   leaving a large empty block. Give them a horizontal layout so the tile
   and the text share the width instead of stacking against dead space. */
@media (min-width: 1001px) {
  .card.is-wide {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 18px; align-content: center; padding: 22px 22px 24px;
  }
  .card.is-wide .card-tile { margin-bottom: 0; grid-row: span 2; align-self: start; }
  .card.is-wide .card-t { align-self: end; margin-bottom: 2px; }
  .card.is-wide .card-d { font-size: var(--t-base); max-width: 52ch; }
  .card.is-wide::after { top: 22px; right: 22px; }
}

/* ══════════════════════════════════════════════════════════════════
   v4 — Brutalist structure, Invo palette.
   Style: Brutalism (verified match for creative tools, young audience).
   Taken: square corners, visible 3px borders, hard un-blurred shadows,
          instant state changes, uppercase block labels, heavy display type.
   Changed from the reference: the DB's #EC4899 pink is replaced with the
          Invo ink and teal→blue, and the brand mark keeps its gradient, so
          the identity from the app icon survives the style change.
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { border-radius: 0; }

/* Instant state changes — brutalism treats easing as decoration.
   Scroll reveals are the one exception: they are an entrance, not a state,
   and they still respect prefers-reduced-motion. */
.btn, .card, .nav a, .chip, .input, .drop, .post, .row {
  transition: none !important;
}

.hdr { border-bottom: var(--edge) solid var(--ink); backdrop-filter: none; background: #fff; }
.brand-mark { background: var(--grad); border: var(--edge) solid var(--ink); box-shadow: none; }
.nav a { font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .045em; }
.nav a:hover { background: var(--ink); color: #fff; }
.nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.nav-all { color: var(--btn) !important; }
.nav-all:hover { color: #fff !important; }

.hero-dark { border-bottom: 4px solid var(--ink); margin-bottom: 0; }
.hero-dark::before, .hero-dark::after { display: none; }
.eyebrow, .hero-dark .eyebrow {
  background: var(--teal); color: #06202A; border: var(--edge) solid var(--ink);
  text-transform: uppercase; font-weight: 700;
}
.hero-dark .eyebrow { border-color: #fff; }
.grad-text { background: none; color: var(--teal); -webkit-text-fill-color: var(--teal); }

.hometool { max-width: 100%; }
.drop, .hometool .drop {
  border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: #fff;
}
.drop:hover, .hometool .drop:hover { background: #EFFAFA; border-color: var(--ink); }
.drop.is-over, .hometool .drop.is-over { background: #D8FBE9; border-color: var(--ink); }
.drop-ic { color: var(--ink); }

.card {
  background: #fff; border: var(--edge) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.card:hover, .card:focus-visible {
  background: var(--ink); box-shadow: 10px 10px 0 var(--teal); transform: none;
}
.card:hover .card-t, .card:hover .card-d, .card:hover::after,
.card:focus-visible .card-t, .card:focus-visible .card-d { color: #fff; }
.card-tile { background: var(--grad); border: var(--edge) solid var(--ink); }
.card-t { text-transform: uppercase; }
.card::after { opacity: 1; transform: none; color: var(--ink); font-weight: 700; }

.section-label {
  background: var(--ink); color: #fff; display: inline-flex;
  padding: 7px 15px; margin: 46px 0 16px; text-transform: uppercase; font-weight: 700;
}
.section-label::after { display: none; }

.btn { border: var(--edge) solid var(--ink); text-transform: uppercase; font-weight: 700; }
.btn-primary { background: var(--btn); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
.btn-primary:hover:not([disabled]) { background: var(--ink); box-shadow: 4px 4px 0 var(--teal); }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn-ghost:hover { background: var(--wash); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }

.band { background: #fff; border-top: 4px solid var(--ink); }
.note { border-left: 6px solid var(--teal); background: #EFFAFA; }
.faq details { border-bottom: var(--edge) solid var(--ink); }
.faq { border-top: var(--edge) solid var(--ink); }
.steps li::before { background: var(--btn); border: var(--edge) solid var(--ink); }
.input, .opts, .row { border: var(--edge) solid var(--ink); }
.row { box-shadow: 4px 4px 0 var(--ink); }
.post { border: var(--edge) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.post:hover { background: var(--ink); transform: none; box-shadow: 10px 10px 0 var(--teal); }
.post:hover .post-t, .post:hover .post-d, .post:hover .post-m { color: #fff; }
.tbl { border: var(--edge) solid var(--ink); }
.tbl th { border-bottom: var(--edge) solid var(--ink); }

.ftr { background: var(--ink); border-top: 4px solid var(--ink); color: #D6E2EC; }
.ftr a, .ftr p, .ftr .brand-name { color: #D6E2EC; }
.ftr .brand-by { color: #8FA6B8; }
.ftr h4 { color: var(--teal); }
.ftr a:hover { color: var(--teal); text-decoration: underline; }
.ftr-btm { border-top: 2px solid #24384A; color: #8FA6B8; }

/* ══════════════════════════════════════════════════════════════════
   Hero motion field — orbiting artefact cards.

   Traced from the reference: the field is not panning, it is ROTATING
   about the hero centre. Every card therefore travels a circular arc,
   and cards further out move faster — roughly 35px/s at the edges, which
   is what makes the motion readable. Each card counter-rotates by the
   same amount so photos keep their own tilt instead of tumbling.

   Three nested layers, each doing one job:
     .hero-field      static, carries the mask that protects the text
     .hero-orbit      rotates continuously — the whole motion
     .hfc             counter-rotates, cancelling the orbit's spin
     .hfc-in          the card's fixed tilt, plus a gentle bob

   Only transform is animated, so it stays on the compositor.
   ══════════════════════════════════════════════════════════════════ */

.hero-dark { isolation: isolate; }

.hero-field {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(74% 86% at 50% 46%, transparent 52%, #000 92%);
  mask-image: radial-gradient(74% 86% at 50% 46%, transparent 52%, #000 92%);
}

.hero-orbit {
  /* A SQUARE layer pinned to the hero centre. Square matters: card positions
     are polar (angle + radius in px), and a percentage-sized rectangle would
     stretch those circles into ellipses and make speeds inconsistent. */
  position: absolute;
  width: 1600px; height: 1600px;
  left: 50%; top: 50%;
  margin: -800px 0 0 -800px;
  animation: orbit 90s linear infinite;
  will-change: transform;
}

@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hfc {
  position: absolute; left: 50%; top: 50%;
  animation: orbit-cancel 90s linear infinite;   /* keeps cards upright */
  will-change: transform;
}
@keyframes orbit-cancel {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.hfc-in {
  display: block;
  border: 3px solid #fff;
  background: #0F2233;
  box-shadow: 7px 7px 0 rgba(0,0,0,.45);
  overflow: hidden;
  position: relative;
  transform: rotate(var(--rot, 0deg));
  animation: bob var(--bob, 9s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  opacity: var(--op, .9);
}

/* a small independent drift so the field never looks mechanically rigid */
@keyframes bob {
  from { transform: rotate(var(--rot,0deg)) translateY(0)    scale(1); }
  to   { transform: rotate(calc(var(--rot,0deg) + var(--spin,4deg)))
                    translateY(var(--dy,-14px)) scale(var(--sc,1.04)); }
}

.hfc img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hfc-tag {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em;
  color: #06202A; background: var(--teal); padding: 2px 6px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-orbit, .hfc, .hfc-in { animation: none; }
}
@media (max-width: 760px) { .hero-field { display: none; } }

/* brand mark gives a slow turn on hover, echoing the reference's spinning logo */
.brand:hover .brand-mark { transform: rotate(-8deg); transition: transform .25s ease; }

/* ---------------- editor ---------------- */

.ed-app { margin-top: 16px; }

/* One compact row: tools left, zoom centre, actions right. The previous
   two-row bar left a large empty block on the right at desktop widths. */
.ed-bar {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  justify-content: space-between; padding: 8px 10px;
  border: var(--edge) solid var(--ink); background: #fff;
  box-shadow: 5px 5px 0 var(--ink); margin-bottom: 14px;
}
.ed-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.ed-zoom { display: flex; align-items: center; gap: 5px; font-family: var(--mono);
           font-size: var(--t-xs); color: var(--ink-2); }
.ed-zoom span { min-width: 44px; text-align: center; }
.ed-bar-r { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.ed-t {
  width: 34px; height: 34px; font-size: .95rem; font-weight: 700; cursor: pointer;
  border: 2px solid var(--ink); background: #fff; color: var(--ink);
  display: grid; place-items: center; padding: 0;
}
.ed-t:hover { background: var(--wash); }
.ed-t.on { background: var(--ink); color: #fff; }
.ed-t.sm { width: 30px; height: 30px; font-size: .85rem; }

/* Stage fills the space it is given; the canvas is centred inside it. */
/* The editor breaks out of the reading column — a canvas needs the width. */
.wrap-wide { max-width: 1460px; }

.ed-main { display: grid; grid-template-columns: minmax(0,1fr) 318px; gap: 16px; align-items: start; }
@media (max-width: 940px) { .ed-main { grid-template-columns: 1fr; } }

.ed-stage {
  position: relative; display: grid; place-items: center;
  background: repeating-conic-gradient(#E8EEF4 0% 25%, #F7FAFC 0% 50%) 50% / 20px 20px;
  border: var(--edge) solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  padding: 16px; min-height: 68vh; overflow: auto;
}
.ed-canvas-wrap { position: relative; line-height: 0; }
.ed-stage canvas { display: block; touch-action: none; box-shadow: 0 0 0 1px rgba(11,27,43,.18); }
.ed-stage[data-tool="brush"] canvas, .ed-stage[data-tool="eraser"] canvas,
.ed-stage[data-tool="redact"] canvas { cursor: crosshair; }
.ed-stage[data-tool="text"] canvas { cursor: text; }
.ed-stage[data-tool="pick"] canvas { cursor: cell; }
.ed-stage[data-tool="crop"] canvas, .ed-stage[data-tool="rect"] canvas,
.ed-stage[data-tool="ellipse"] canvas, .ed-stage[data-tool="line"] canvas,
.ed-stage[data-tool="arrow"] canvas { cursor: crosshair; }
.ed-stage[data-tool="move"] canvas { cursor: move; }

.ed-crop { position: absolute; border: 2px dashed #fff; pointer-events: none;
           box-shadow: 0 0 0 9999px rgba(11,27,43,.55); }

.ed-side {
  border: var(--edge) solid var(--ink); background: #fff;
  box-shadow: 5px 5px 0 var(--ink); padding: 14px;
  max-height: 78vh; overflow-y: auto;
}

/* Collapsible groups keep the panel short instead of one endless column. */
.ed-g { border-bottom: 2px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; }
.ed-g > summary {
  cursor: pointer; list-style: none; font-family: var(--display);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); padding: 7px 0;
  display: flex; justify-content: space-between; align-items: center;
}
.ed-g > summary::-webkit-details-marker { display: none; }
.ed-g > summary::after { content: '+'; font-size: 1.05rem; color: var(--btn); }
.ed-g[open] > summary::after { content: '−'; }

.ed-h {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: var(--ink); display: inline-block; padding: 5px 11px; margin: 0 0 10px;
}
.ed-count { color: var(--ink-3); }

.ed-s { margin-bottom: 9px; }
.ed-s label { display: flex; justify-content: space-between; font-size: var(--t-sm);
              color: var(--ink-2); margin-bottom: 3px; }
.ed-s label b { font-family: var(--mono); color: var(--btn); }
.ed-s input[type=color] { height: 32px; padding: 2px; cursor: pointer; }
.ed-s select.input, .ed-s input.input { padding: 7px 9px; font-size: var(--t-sm); }

/* Looks: a thumbnail of the user's OWN photo under each preset, so the
   choice is visual. A row of words called PUNCH / FADE / VIVID tells a
   first-time user nothing. */
.ed-pt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ed-pt {
  border: 2px solid var(--line); background: #fff; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; overflow: hidden; text-align: center;
}
.ed-pt:hover { border-color: var(--ink); }
.ed-pt.on { border-color: var(--btn); box-shadow: inset 0 0 0 2px var(--btn); }
.ed-pt img, .ed-pt-ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
                        background: var(--wash); }
.ed-pt-l { font-size: .66rem; font-weight: 700; padding: 4px 2px; color: var(--ink);
           text-transform: uppercase; letter-spacing: .02em; }

/* Brush picker: each option is a real sample stroke drawn in that style. */
.ed-bgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 12px; }
.ed-bgrid-2 { grid-template-columns: repeat(2, 1fr); }
.ed-bp {
  border: 2px solid var(--line); background: #fff; cursor: pointer; padding: 4px 4px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ed-bp:hover { border-color: var(--ink); }
.ed-bp.on { border-color: var(--btn); box-shadow: inset 0 0 0 2px var(--btn); }
.ed-bp canvas { width: 100%; height: auto; display: block; }
.ed-bp span { font-size: .66rem; font-weight: 700; color: var(--ink);
              text-transform: uppercase; letter-spacing: .02em; }

/* Redaction mode previews */
.ed-rp { width: 100%; height: 30px; display: block; }
.ed-rp-pixelate {
  background-image:
    linear-gradient(45deg, #7d8b99 25%, transparent 25%, transparent 75%, #7d8b99 75%),
    linear-gradient(45deg, #7d8b99 25%, #b9c4ce 25%, #b9c4ce 75%, #7d8b99 75%);
  background-size: 10px 10px; background-position: 0 0, 5px 5px;
}
.ed-rp-blur { background: linear-gradient(90deg, #8fa0ae, #cfd8e0, #8fa0ae); filter: blur(3px); }
.ed-rp-block { background: #0B1B2B; }

/* Shape style previews */
.ed-shp { width: 100%; height: 26px; display: block; }
.ed-shp-o.ed-shp-rect { border: 3px solid var(--ink); }
.ed-shp-f.ed-shp-rect { background: var(--ink); }
.ed-shp-o.ed-shp-ellipse { border: 3px solid var(--ink); border-radius: 50%; }
.ed-shp-f.ed-shp-ellipse { background: var(--ink); border-radius: 50%; }

/* Colour swatches */
.ed-sw-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 6px; }
.ed-sw { height: 24px; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.ed-sw:hover { border-color: var(--ink); }
.ed-sw.on { border-color: var(--btn); box-shadow: inset 0 0 0 2px #fff; }

/* Live brush-size preview */
.ed-dot { height: 68px; display: grid; place-items: center; background: var(--wash);
          border: 2px solid var(--line); margin-top: 5px; }
.ed-dot i { display: block; border-radius: 50%; min-width: 4px; min-height: 4px; }

.ed-row { display: flex; flex-wrap: wrap; gap: 5px; }

.ed-swatch { border: 2px solid var(--ink); padding: 10px; text-align: center;
             font-family: var(--mono); font-size: var(--t-xs); color: #fff;
             text-shadow: 0 1px 2px rgba(0,0,0,.6); }

.ed-layers { display: flex; flex-direction: column; gap: 4px; }
.ed-l { display: flex; align-items: center; gap: 6px; padding: 6px 7px;
        border: 2px solid var(--line); cursor: pointer; font-size: var(--t-sm); }
.ed-l:hover { border-color: var(--ink); }
.ed-l.on { border-color: var(--ink); background: var(--wash); }
.ed-l-sw { width: 13px; height: 13px; border: 1px solid var(--ink); flex: none; }
.ed-l-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-l-b, .ed-l-x { border: 0; background: none; cursor: pointer; padding: 0 2px;
                   font-size: .85rem; line-height: 1; color: var(--ink-3); }
.ed-l-b:hover { color: var(--btn); }
.ed-l-x { font-size: 1.05rem; }
.ed-l-x:hover { color: var(--danger); }

.ed-status { margin: 10px 0 0; font-family: var(--mono);
             font-size: var(--t-xs); color: var(--ink-3); }


/* Editor, small screens. Declared last so it overrides the desktop stage
   height above — a fixed 68vh stage leaves a tall empty band beneath a
   landscape image on a phone. */
@media (max-width: 940px) {
  .ed-stage { min-height: auto; padding: 10px; }
  .ed-side { max-height: none; }
  .ed-bar { position: sticky; top: 66px; z-index: 5; }
}

/* AdSense marks a slot it could not fill with data-ad-status="unfilled".
   Collapsing those avoids leaving a blank band on the page, while slots that
   are still loading keep their reserved height so nothing shifts. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad:has(ins[data-ad-status="unfilled"]) { min-height: 0; margin: 0; }

/* ---------------- exam preparer ---------------- */

.xm-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.xm-tab {
  flex: 1; padding: 11px 10px; border: var(--edge) solid var(--ink); background: #fff;
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: .04em; cursor: pointer; color: var(--ink);
}
.xm-tab:hover { background: var(--wash); }
.xm-tab.on { background: var(--ink); color: #fff; }

.xm-spec {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: var(--edge) solid var(--ink); margin-bottom: 16px; background: #fff;
}
.xm-spec > div { padding: 11px 13px; border-right: 2px solid var(--line); }
.xm-spec > div:last-child { border-right: 0; }
.xm-spec span { display: block; font-size: var(--t-xs); text-transform: uppercase;
                letter-spacing: .1em; color: var(--ink-3); font-weight: 700; }
.xm-spec b { display: block; font-family: var(--mono); font-size: 1rem; color: var(--ink); margin: 3px 0 1px; }
.xm-spec i { display: block; font-style: normal; font-size: var(--t-xs); color: var(--ink-3); }
@media (max-width: 620px) { .xm-spec { grid-template-columns: 1fr; }
  .xm-spec > div { border-right: 0; border-bottom: 2px solid var(--line); } }

.xm-ok   { color: var(--ok); }
.xm-warn { color: var(--danger); }
.xm-note { color: #9A6A12; }