/* ================================================================
   Merge & Land - stylesheet for every page except the homepage
   (which carries the same system inline) and the four board views.

   Ivory paper, one deep-green band at most per page, serif display
   type, hairline rules. No pills, chips or badges: type and spacing
   do the work. Buttons are squared. Dark mode is at the bottom.

   One rule per component. If something needs to change, change it
   here rather than adding an override on the page.
   ================================================================ */

:root{
  --paper:#F6F3EC; --paper-2:#EFEBE2; --sheet:#FFFDF8;
  --ink-1:#14201B; --ink-2:#3C4642; --muted:#6C736E;
  --rule:#D9D3C7; --rule-soft:#E6E1D6;
  --green:#0F3B2E; --brass:#9C7A38; --brass-lt:#C9A45C;
  --band:radial-gradient(120% 90% at 70% 0%,#16362B 0%,#0D1F18 50%,#08130F 100%);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* names menu.css reads */
  --bg:#F6F3EC; --line:#D9D3C7; --ink:#14201B; --gold-hover:#9C7A38;
  color-scheme:light dark;
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink-2);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.measure{max-width:46rem}
section,header{scroll-margin-top:64px}
a{color:var(--ink-1)}
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink-1);letter-spacing:-.012em;text-wrap:balance}
h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.08}
h3{font-size:1.3rem;line-height:1.2}
em.it{font-style:italic;color:var(--green)}
::selection{background:rgba(156,122,56,.28)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.muted{color:var(--muted)}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:3px;font:500 .9rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn-dark{background:var(--ink-1);color:var(--paper)}
.btn-dark:hover{background:var(--green)}
.btn-line{border-color:var(--ink-1);color:var(--ink-1);background:transparent}
.btn-line:hover{background:var(--ink-1);color:var(--paper)}
.btn-light{background:#F6F3EC;color:#14201B}
.btn-light:hover{background:#fff}
.tlink{color:var(--ink-1);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:5px;text-decoration-thickness:1px;font-weight:500;transition:text-decoration-color .2s}
.tlink:hover{text-decoration-color:var(--ink-1)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}

/* ---------- nav (same as the homepage) ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(246,243,236,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.wordmark span{font-family:var(--serif);font-size:1.32rem;color:var(--ink-1);letter-spacing:-.01em;white-space:nowrap}
.wordmark span i{font-style:italic;color:var(--brass)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a:not(.btn){color:var(--ink-2);text-decoration:none;font-size:.86rem;font-weight:500;white-space:nowrap;transition:color .15s}
.nav-links a:not(.btn):hover,.nav-links a[aria-current=page]{color:var(--ink-1)}
.nav-links a[aria-current=page]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--brass)}
.nav-links .btn{padding:11px 18px;font-size:.84rem}
/* minimal header for the ad landing page and thank-you page */
.bar{border-bottom:1px solid var(--rule)}
.bar .nav-inner{min-height:60px}
.bar-note{font-size:.82rem;color:var(--muted)}

/* ---------- page hero ---------- */
.page-hero{padding:56px 0 44px}
.page-hero h1{font-size:clamp(2.3rem,5vw,4rem);line-height:1.04;letter-spacing:-.022em;max-width:15em}
.page-hero .lede{margin-top:20px;font-size:1.12rem;line-height:1.6;max-width:34em}
.page-hero .byline{margin-top:18px;font-size:.84rem;color:var(--muted)}
.page-hero.center{text-align:center}
.page-hero.center h1,.page-hero.center .lede{margin-left:auto;margin-right:auto}
.page-hero.center .actions{justify-content:center}

/* ---------- sections ---------- */
.sec{padding:56px 0}
.sec.alt{background:var(--paper-2)}
.sec.tight{padding-top:8px}
.sec-head{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end;margin-bottom:28px}
.sec-head p:not(.label){font-size:.98rem;line-height:1.65;max-width:30em}
.sec-head .price{font-family:var(--serif);color:var(--brass)}
.sec-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}
.sec-foot p{font-size:.9rem;color:var(--muted)}

/* ---------- ruled lists ---------- */
/* .rows: a name on the left, a description on the right, one per line */
.rows{border-top:1px solid var(--ink-1)}
.rows>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:8px 40px;padding:13px 0;border-bottom:1px solid var(--rule)}
.rows dt{font-family:var(--serif);font-size:1.12rem;line-height:1.35;color:var(--ink-1)}
.rows dt small{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.04em;color:var(--muted);margin-top:2px}
.rows dd{font-size:.92rem;line-height:1.6}
/* .cols: three or four short columns separated by hairlines */
.cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:1px solid var(--ink-1)}
.cols>div{padding:18px 22px 4px 0}
.cols>div+div{padding-left:22px;border-left:1px solid var(--rule)}
.cols h3{font-size:1.18rem;margin-bottom:6px}
.cols h3 i{display:block;font-size:.92rem;color:var(--brass);margin-bottom:3px}
.cols p{font-size:.9rem;line-height:1.6}
/* .facts: label / text pairs for delivery, licence and so on */
.facts{border-top:1px solid var(--ink-1)}
.facts>div{display:grid;grid-template-columns:11em 1fr;gap:24px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:.93rem;line-height:1.65}
.facts dt{font-weight:600;color:var(--ink-1)}
/* phase sub-heading above a .rows group */
.group-h{font-size:1.02rem;margin:30px 0 8px;color:var(--ink-1)}
.group-h:first-of-type{margin-top:0}
.group-h i{color:var(--brass);margin-right:8px}
/* .topics: a three-column grid of short items */
.topics{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;border-top:1px solid var(--ink-1)}
.topics li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:.88rem;line-height:1.55}
.topics b{display:block;font-family:var(--serif);font-weight:400;font-size:1.06rem;color:var(--ink-1)}
/* plain numbered steps */
.steps{list-style:none;counter-reset:s;border-top:1px solid var(--ink-1)}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.4em 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:.95rem;line-height:1.6}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-style:italic;color:var(--brass)}
.steps b{font-weight:600;color:var(--ink-1)}

/* ---------- a quiet note block (replaces the old dark CTA cards) ---------- */
.note{margin-top:40px;padding:22px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr auto;gap:12px 40px;align-items:center}
.note p{font-size:.95rem;line-height:1.65;max-width:44em}
.note p b{font-family:var(--serif);font-weight:400;font-size:1.2rem;color:var(--ink-1);margin-right:6px}
.note .btn{padding:11px 18px}
.note.stacked{grid-template-columns:1fr}
.stack{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.label.gap{margin-top:44px}
.lp-points{margin-bottom:22px}
.related{max-width:44rem;margin-top:28px;font-size:.88rem;color:var(--muted)}
.related a{color:var(--ink-2)}
.fineprint{margin-top:24px;font-size:.84rem;color:var(--muted)}

/* ---------- the green band (board views) ---------- */
.band{padding:56px 0;background:var(--band);color:#A9BDB3}
.band .label{color:#8FA99D}
.band h2{color:#F4F0E6;margin-bottom:12px}
.band p{font-size:.95rem;line-height:1.7;max-width:36em}
.band .rows{border-top-color:rgba(201,214,207,.3);margin-top:24px}
.band .rows>div{border-bottom-color:rgba(201,214,207,.12)}
.band .rows dt{color:#F4F0E6}
.band .rows dt small{color:#8FA99D}
.band a{color:var(--brass-lt);text-decoration:underline;text-decoration-color:rgba(201,164,92,.4);text-underline-offset:3px;white-space:nowrap}
.band a:hover{text-decoration-color:var(--brass-lt)}

/* ---------- FAQ (compact, as on the homepage) ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 2.1fr;gap:56px;align-items:start}
.faq-grid .aside{font-size:.9rem;line-height:1.7;margin-top:10px}
.qa{border-top:1px solid var(--ink-1)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:13px 0;font-size:.95rem;font-weight:500;color:var(--ink-1)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';font-weight:300;font-size:1.25rem;color:var(--brass);line-height:1;transition:transform .25s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 32px 15px 0;font-size:.9rem;line-height:1.65}

/* ---------- article and document text ---------- */
.prose{max-width:44rem}
.prose>*+*{margin-top:14px}
.prose p,.prose li{font-size:1.03rem;line-height:1.75}
.prose h2{font-size:clamp(1.45rem,2.3vw,1.85rem);line-height:1.2;margin-top:44px}
.prose h2+p,.prose h2+ul{margin-top:10px}
.prose ul,.prose ol{padding-left:1.2em}
.prose li+li{margin-top:8px}
.prose li::marker{color:var(--brass)}
.prose b,.prose strong{font-weight:600;color:var(--ink-1)}
.prose a{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--ink-1)}
.prose .pull{margin:30px 0;padding-left:22px;border-left:2px solid var(--brass);font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.45;color:var(--ink-1)}
.prose .small{font-size:.88rem;color:var(--muted)}
.prose>:first-child{margin-top:0}

/* ---------- email capture ---------- */
.capture{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.capture h2{margin-bottom:10px}
.capture p:not(.label){font-size:.95rem;line-height:1.7}
.reg-field{display:flex;border:1px solid var(--ink-1);border-radius:3px;background:var(--sheet)}
.reg-field:focus-within{box-shadow:0 0 0 3px rgba(156,122,56,.25)}
.reg-form input[type=email]{flex:1;min-width:0;border:none;background:transparent;padding:15px 18px;font:inherit;font-size:.95rem;color:var(--ink-1)}
.reg-form input[type=email]:focus{outline:none}
.reg-form .btn{border-radius:0}
.reg-opt{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.86rem;line-height:1.5;color:var(--ink-2);cursor:pointer}
.reg-opt input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:#0F3B2E}
.reg-fine{font-size:.78rem;color:var(--muted);margin-top:10px;line-height:1.55}
.reg-fine a{color:var(--ink-2)}

/* ---------- table (risk register sample on the landing page) ---------- */
.table-wrap{overflow-x:auto;border-top:1px solid var(--ink-1)}
.sample{width:100%;border-collapse:collapse;font-size:.88rem;line-height:1.5;min-width:760px}
.sample th{padding:11px 14px 11px 0;text-align:left;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule)}
.sample td{padding:13px 14px 13px 0;vertical-align:top;border-bottom:1px solid var(--rule)}
.sample td:first-child{font-family:var(--serif);font-style:italic;color:var(--brass);white-space:nowrap}
.sample td:nth-child(2){color:var(--ink-1);font-weight:500;white-space:nowrap}

/* ---------- confirmation pages ---------- */
.confirm{max-width:40rem;margin:0 auto;padding:64px 0 72px}
.confirm h1{font-size:clamp(2.1rem,4.4vw,3rem);line-height:1.08;margin-bottom:14px}
.confirm .lede{font-size:1.06rem;line-height:1.65;margin-bottom:30px}
.confirm .steps{margin-bottom:28px}
.confirm .small{margin-top:26px;font-size:.86rem;color:var(--muted)}
.confirm .small a{color:var(--ink-2)}

/* ---------- footer (same as the homepage) ---------- */
.foot{background:#08130F;color:#8FA99D;padding:48px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid rgba(201,214,207,.14)}
.foot .wordmark span{color:#F4F0E6}
.foot-brand p{font-size:.86rem;margin-top:12px;max-width:24em;line-height:1.6}
.foot-col h4{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:12px}
.foot-col a{display:block;color:#C9D6CF;text-decoration:none;font-size:.88rem;margin-bottom:8px;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-copy{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:.78rem}
.foot-copy a{color:#C9D6CF;text-decoration:none}
.foot-min{background:#08130F;color:#8FA99D;padding:28px 0;font-size:.8rem}
.foot-min .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-min a{color:#C9D6CF;text-decoration:none;margin-left:18px}

/* ================= RESPONSIVE ================= */
@media(max-width:980px){
  .sec-head,.faq-grid,.capture{grid-template-columns:1fr;gap:16px}
  .cols{--n:2 !important}
  .cols>div:nth-child(odd){padding-left:0;border-left:none}
  .cols>div:nth-child(n+3){border-top:1px solid var(--rule);margin-top:14px}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  .foot-brand{grid-column:1 / -1}
  .topics{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .wrap{padding:0 20px}
  .label{margin-bottom:10px}
  .page-hero{padding:34px 0 30px}
  .page-hero .lede{font-size:1rem;margin-top:14px}
  .sec,.band{padding:40px 0}
  .sec-head{margin-bottom:18px}
  .rows>div{grid-template-columns:1fr;gap:3px;padding:11px 0}
  .rows dt{font-size:1.04rem}
  .rows dt small{display:inline;margin-left:8px}
  .rows dd{font-size:.88rem}
  .cols{grid-template-columns:1fr}
  .cols>div,.cols>div+div,.cols>div:nth-child(n){padding:12px 0;margin:0;border-left:none;border-top:none;border-bottom:1px solid var(--rule)}
  .facts>div{grid-template-columns:1fr;gap:2px;font-size:.9rem}
  .topics{grid-template-columns:1fr}
  .note{grid-template-columns:1fr}
  .note .btn{justify-self:start}
  .qa summary{font-size:.92rem;padding:12px 0}
  .qa details p{padding-right:0;font-size:.88rem}
  .prose p,.prose li{font-size:.98rem}
  .prose .pull{font-size:1.18rem;padding-left:16px}
  .reg-field{flex-direction:column;border:none;background:none;gap:10px}
  .reg-field:focus-within{box-shadow:none}
  .reg-form input[type=email]{border:1px solid var(--ink-1);border-radius:3px;background:var(--sheet)}
  .reg-form input[type=email]:focus{box-shadow:0 0 0 3px rgba(156,122,56,.25)}
  .reg-form .btn{border-radius:3px}
  .confirm{padding:40px 0 48px}
  .foot{padding:36px 0 26px}
  .foot-brand p{display:none}
  .foot-grid{gap:22px;padding-bottom:24px}
  .bar-note{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{nav,.foot,.foot-min,.band{display:none}}

/* ================= DARK MODE - neutral charcoal, brass accents ================= */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#121312; --paper-2:#171817; --sheet:#1D1F1D;
    --ink-1:#EEEAE1; --ink-2:#C4C3BC; --muted:#8F8E88;
    --rule:#2E302D; --rule-soft:#252724; --green:#D4B575; --brass:#C9A45C;
    --bg:#121312; --line:#2E302D; --ink:#EEEAE1;
  }
  nav{background:rgba(18,19,18,.9)}
  .wordmark svg rect:first-child{fill:#C4C3BC}
  .wordmark svg rect:nth-child(2){fill:#3A3C38}
  .band{background:radial-gradient(120% 90% at 70% 10%,#24251F 0%,#181916 55%,#121312 100%);color:#B9B8B1}
  .band .label,.band .rows dt small{color:#9A988F}
  .band .rows{border-top-color:rgba(238,234,225,.22)}
  .band .rows>div{border-bottom-color:rgba(238,234,225,.1)}
  .btn-dark{background:#EEEAE1;color:#121312}
  .btn-dark:hover{background:#fff}
  .btn-line{border-color:#EEEAE1;color:#EEEAE1}
  .btn-line:hover{background:#EEEAE1;color:#121312}
  .foot,.foot-min{background:#0C0D0C;color:#8F8E88}
  .foot-col a,.foot-copy a,.foot-min a{color:#C4C3BC}
  .reg-form input[type=email]{background:var(--sheet);color:var(--ink-1);border-color:var(--ink-1)}
  .reg-form input::placeholder{color:var(--muted)}
  .cmp .feat,.cmp td:nth-child(3){background:rgba(201,164,92,.06)}
}

/* ================= TOOLKIT PAGE ================= */
/* hero with the stacked packs */
.page-hero.split{padding:56px 0 60px}
.split-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}
.piles{display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,3vw,34px);padding-top:40px;min-height:300px}
.pile{position:relative;display:block;width:clamp(128px,12vw,158px);aspect-ratio:3/4.3;text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pile:hover{transform:translateY(-6px)}
.pile span{position:absolute;inset:0;border:1px solid var(--rule);border-radius:4px;background:var(--sheet);box-shadow:0 1px 2px rgba(20,32,27,.05)}
.pile span:nth-child(1){transform:translate(3px,-6px) rotate(1deg)}
.pile span:nth-child(2){transform:translate(-2px,-12px) rotate(-1.2deg)}
.pile span:nth-child(3){transform:translate(4px,-18px) rotate(.8deg)}
.pile span:nth-child(4){transform:translate(-3px,-24px) rotate(-.6deg)}
.pile span:nth-child(5){transform:translate(2px,-30px) rotate(1.1deg)}
.pile span:nth-child(6){transform:translate(-4px,-36px) rotate(-.9deg)}
.pile span:nth-child(7){transform:translate(3px,-42px) rotate(.5deg)}
.pile span:nth-child(8){transform:translate(-2px,-48px) rotate(-1deg)}
.pile .pile-top{display:flex;flex-direction:column;padding:14px 14px 12px;box-shadow:0 1px 2px rgba(20,32,27,.06),0 28px 44px -28px rgba(20,32,27,.5)}
.pile:nth-child(1) .pile-top{transform:translate(0,-24px)}
.pile:nth-child(2) .pile-top{transform:translate(0,-42px);border-top:3px solid var(--brass)}
.pile:nth-child(3) .pile-top{transform:translate(0,-60px)}
.pile-top small{font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.pile-top b{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.1;color:var(--ink-1);margin:8px 0 10px}
.pile-top ul{list-style:none;margin-bottom:auto}
.pile-top li{font-size:.74rem;line-height:1.35;color:var(--ink-2);padding:2px 0}
.pile-top li::before{content:"+ ";color:var(--brass)}
.pile:first-child .pile-top li::before{content:""}
.pile-top i{font-style:normal;font-family:var(--serif);font-size:1rem;color:var(--ink-1);margin-top:8px;padding-top:6px;border-top:1px solid var(--rule)}

/* the three packs (as on the homepage) */
.packs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink-1);border-bottom:1px solid var(--rule)}
.pk{display:flex;flex-direction:column;padding:24px 26px 26px}
.pk+.pk{border-left:1px solid var(--rule)}
.pk.feat{background:var(--sheet);box-shadow:inset 0 3px 0 var(--brass)}
.pk-name{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pk-name em{font-style:normal;color:var(--brass);margin-left:8px}
.pk-price{font-family:var(--serif);font-size:2.9rem;line-height:1;color:var(--ink-1);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.pk-who{font-size:.9rem;margin:8px 0 16px}
.pk ul{list-style:none;flex:1;margin-bottom:22px;border-top:1px solid var(--rule)}
.pk li{padding:9px 0;border-bottom:1px solid var(--rule-soft);font-size:.88rem;line-height:1.45}
.pk li b{font-weight:600;color:var(--ink-1)}
.pk .btn{width:100%}
.pk-more{align-self:center;margin-top:12px;font-size:.84rem;color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px}
.pk-more:hover{color:var(--ink-1)}

/* Core: four phases, each with its cover drawing */
.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.phase{display:flex;flex-direction:column}
.phase-cover{aspect-ratio:5/3;display:flex;align-items:center;padding:18px 22px;margin-bottom:16px;border:1px solid var(--rule);border-radius:4px;background:var(--sheet);box-shadow:0 22px 40px -32px rgba(20,32,27,.45)}
.phase-cover svg{display:block;width:100%;height:auto}
.phase h3{font-size:1.2rem;margin-bottom:8px}
.phase h3 i{display:block;font-size:.9rem;color:var(--brass);margin-bottom:2px}
.phase ul{list-style:none;border-top:1px solid var(--ink-1)}
.phase li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:.88rem;color:var(--ink-1)}
.phase li small{font-size:.72rem;color:var(--muted);white-space:nowrap}

/* Pro and Enterprise: copy on one side, a picture on the other */
.pack-split{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.pack-split h2{margin-bottom:14px}
.pack-split>div>p:not(.label){font-size:.98rem;line-height:1.7;max-width:32em;margin-bottom:12px}
.adds{grid-column:1 / -1;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;margin-top:8px;border-top:1px solid var(--ink-1)}
.adds li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:.88rem;line-height:1.55}
.adds b{display:block;font-family:var(--serif);font-weight:400;font-size:1.05rem;color:var(--ink-1)}
.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative;margin:0}
.chain::before{content:'';position:absolute;left:8%;right:8%;top:50px;height:1px;background:var(--ink-1);opacity:.35}
.link{position:relative;display:flex;flex-direction:column;gap:3px;min-height:150px;padding:14px 13px;border:1px solid var(--rule);border-radius:4px;background:var(--sheet);box-shadow:0 22px 40px -30px rgba(20,32,27,.45)}
.link small{font-family:var(--serif);font-style:italic;font-size:.88rem;color:var(--brass)}
.link b{font-family:var(--serif);font-weight:400;font-size:1.2rem;color:var(--ink-1)}
.link span{font-size:.78rem;line-height:1.45;color:var(--muted)}
.link.gap{border-color:#C0765A;box-shadow:0 0 0 3px rgba(192,118,90,.14),0 22px 40px -30px rgba(20,32,27,.45)}
.link.gap em{margin-top:auto;font-style:normal;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#B0583A}
.link.dim{border-style:dashed;background:var(--paper-2)}
.link.dim b,.link.dim small,.link.dim span{color:var(--muted);opacity:.7}
.chain figcaption{grid-column:1 / -1;margin-top:6px;font-size:.84rem;color:var(--muted)}
.kit{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;border-top:1px solid var(--ink-1)}
.kit li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:.85rem;line-height:1.5}
.kit b{display:block;font-family:var(--serif);font-weight:400;font-size:1.05rem;color:var(--ink-1)}

/* comparison table */
.cmp-wrap{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;font-size:.9rem;table-layout:fixed}
.cmp th,.cmp td{padding:9px 8px;border-bottom:1px solid var(--rule);text-align:center}
.cmp th:first-child,.cmp td:first-child{width:46%;text-align:left;padding-left:0;color:var(--ink-1)}
.cmp thead th{border-bottom:1px solid var(--ink-1);font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--ink-1)}
.cmp thead small{display:block;font-family:var(--sans);font-size:.74rem;color:var(--muted)}
.cmp .feat,.cmp td:nth-child(3){background:rgba(156,122,56,.07)}
.cmp tr.grp th{padding:18px 0 6px;border-bottom:1px solid var(--ink-1);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);text-align:left;background:none}
.cmp .y{color:var(--green);font-weight:700}
.cmp .n{color:var(--rule)}
.cmp tfoot td{border-bottom:none;padding-top:18px}
.cmp tfoot .btn{width:100%;padding:11px 8px;font-size:.84rem}

/* board views band with the screenshot */
.vshot{display:block;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08);-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 96%);mask-image:linear-gradient(180deg,#000 45%,transparent 96%);transition:transform .35s}
.vshot:hover{transform:translateY(-4px)}
.vshot img{display:block;width:100%;height:auto;aspect-ratio:1600/1060;object-fit:cover;object-position:top}

@media(max-width:980px){
  .split-grid,.pack-split{grid-template-columns:1fr;gap:36px}
  .packs{grid-template-columns:1fr}
  .pk+.pk{border-left:none;border-top:1px solid var(--rule)}
  .phases{grid-template-columns:1fr 1fr;gap:28px 20px}
  .vshot{order:-1}
}
@media(max-width:700px){
  .page-hero.split{padding:34px 0 30px}
  .piles{min-height:230px;padding-top:30px}
  .piles{gap:8px;justify-content:space-between;padding-right:6px}
  .pile{width:calc((100vw - 64px) / 3)}
  .pile-top{padding:10px 9px 9px !important}
  .pile-top b{font-size:.98rem;margin:5px 0 6px}
  .pile-top li{font-size:.64rem}
  .pk{padding:20px 0 22px}
  .pk.feat{padding:20px 16px 22px;margin:0 -16px}
  .pk-price{font-size:2.5rem}
  .phases{grid-template-columns:1fr}
  .phase-cover{aspect-ratio:auto;justify-content:center;padding:12px;margin-bottom:12px}
  .phase-cover svg{width:42%}
  .chain{grid-template-columns:1fr 1fr}
  .chain::before{display:none}
  .link{min-height:0}
  .kit{grid-template-columns:1fr}
  .adds{grid-template-columns:1fr}
  .cmp{font-size:.8rem}
  .cmp th:first-child,.cmp td:first-child{width:40%}
  .cmp thead th{font-size:.92rem}
  .cmp thead small{font-size:.66rem}
  .cmp tfoot{display:none}
}
@media (prefers-color-scheme:dark){
  .phase-cover,.link,.pile span{box-shadow:none}
  .vshot img{filter:brightness(.9)}
}
.cmp td small.sub{display:block;font-size:.76rem;color:var(--muted);margin-top:2px}

/* ---- toolkit page on phones ---- */
.swipe-hint,.mbar{display:none}
@media(max-width:700px){
  /* the four phases become a swipeable row */
  .phases{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:2px 20px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .phases::-webkit-scrollbar{display:none}
  .phase{flex:0 0 82%;scroll-snap-align:start;scroll-margin-left:20px}
  .phase-cover{aspect-ratio:auto;height:96px;padding:10px;justify-content:center}
  .phase-cover svg{width:auto;height:100%}
  .swipe-hint{display:block;margin-top:12px;font-size:.8rem;color:var(--muted)}
  /* sticky "Choose a pack" bar */
  .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 10px 10px 16px;border-radius:4px;background:var(--ink-1);color:var(--paper);text-decoration:none;font-size:.86rem;
    box-shadow:0 14px 30px -12px rgba(0,0,0,.45);transform:translateY(140%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .mbar.on{transform:none}
  .mbar b{font-family:var(--serif);font-weight:400;font-size:1.05rem}
  .mbar em{font-style:normal;font-weight:600;padding:9px 14px;border-radius:3px;background:var(--brass-lt);color:#14201B;white-space:nowrap}
  .foot{padding-bottom:84px}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.mbar{transition:none}}