/* Divorce SEO: "Drafting sheet". Loads after site.css and overrides it. Direction: clients/divorceseo/redesign/DIRECTION.md.
   Two families (Bitter 700 display, Barlow 400/700 everything else), self-hosted, no JS.
   Contrast (WCAG 2.x, computed): navy #123456 on sheet 11.44:1; muted #4C5A6B 6.33:1; claret #9A1B3C 7.28:1;
   white on claret 8.09:1; #EF9AAB on navy 5.98:1; #A9BACB on navy 6.40:1. #C9D2DA is decorative only (1.38:1). */

@font-face{font-family:"Bitter";src:url("/fonts/bitter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/fonts/barlow-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/fonts/barlow-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

html[data-design]{
  --sheet:#F1F3F6; --card:#FFFFFF; --ink:#123456; --muted:#4C5A6B; --accent:#9A1B3C;
  --accent-dark:#EF9AAB; --muted-dark:#A9BACB; --hairline:#C9D2DA; --focus:#0B1B2B;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;
  --gutter:clamp(14px,4vw,56px); --container:1200px; --rail:15rem; --measure:38rem;
  /* remap the shared tokens so every component in site.css picks the new system up */
  --paper:var(--sheet); --paper-raised:var(--card); --ink-muted:var(--muted); --line:var(--hairline);
  --accent-deep:var(--accent); --link:var(--ink); --link-strong:var(--ink); --gold-hairline:var(--hairline);
  --font-body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-display:"Bitter",Georgia,"Times New Roman",serif;
  --max-width:var(--measure);
  -webkit-text-size-adjust:100%;
}
[data-design] body{
  margin:0; background:var(--sheet); color:var(--ink); font-family:var(--font-body);
  font-size:1.0625rem; line-height:1.62; font-synthesis-weight:none; text-rendering:optimizeLegibility;
}
[data-design] :where(a,button,input,textarea,select):focus-visible{
  outline:3px solid var(--focus); outline-offset:3px; border-radius:2px; box-shadow:0 0 0 3px var(--sheet);
}
[data-design] .skip-link{position:absolute;inset-inline-start:var(--s4);top:-4rem;z-index:100;background:var(--ink);color:#fff;padding:var(--s3) var(--s4);min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
[data-design] .skip-link:focus{top:var(--s3)}
[data-design] h1,[data-design] h2,[data-design] h3{font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:-.015em}
[data-design] .wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- masthead: one row at every width ---------- */
[data-design] .site-header{background:var(--sheet);border-bottom:1px solid var(--ink);color:var(--ink);position:static;padding:0}
[data-design] .site-header .wrap{display:flex;align-items:center;gap:var(--s4);min-height:64px;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
[data-design] .site-header .brand{
  display:flex;align-items:center;min-height:44px;flex:0 0 auto;font-family:var(--font-display);font-weight:700;
  font-size:clamp(15px,4vw,19px);letter-spacing:-.015em;color:var(--ink);text-decoration:none;white-space:nowrap;
}
[data-design] .brand-rule{display:inline-block;inline-size:18px;block-size:2px;background:var(--accent);margin-inline-end:8px;flex:0 0 auto}
[data-design] .site-nav{display:flex;align-items:center;margin-inline-start:auto;min-width:0;background:none;border:0;padding:0}
[data-design] .site-nav a{display:flex;align-items:center;min-height:44px;padding-inline:clamp(6px,2.2vw,14px);font-size:15px;color:var(--ink);text-decoration:none;white-space:nowrap;box-sizing:border-box;border-block-end:2px solid transparent}
[data-design] .site-nav a:hover{text-decoration:underline;text-underline-offset:4px}
[data-design] .site-nav a[aria-current="page"]{border-block-end-color:var(--accent)}
[data-design] .mast-mail,[data-design] .site-header .phone{
  display:none;align-items:center;min-height:44px;font-size:15px;color:var(--ink);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap;border:0;background:none;padding:0;font-weight:400;
}
@media (min-width:720px){
  [data-design] .mast-mail{display:flex;margin-inline-start:var(--s5);padding-inline-start:var(--s5);border-inline-start:1px solid var(--hairline)}
}
@media (min-width:1100px){ [data-design] .site-header .phone{display:flex;text-decoration-color:var(--hairline)} }
@media (max-width:400px){
  [data-design] .site-header .wrap{gap:var(--s1)}
  [data-design] .brand-rule{display:none}
  [data-design] .site-nav a{font-size:14px;padding-inline:5px}
}

/* ---------- hero ---------- */
[data-design] .hero{
  position:relative;background-color:var(--sheet);color:var(--ink);border:0;overflow:hidden;margin:0;width:auto;
  background-image:
    linear-gradient(to right,rgba(18,52,86,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(18,52,86,.045) 1px,transparent 1px),
    linear-gradient(to right,rgba(18,52,86,.075) 1px,transparent 1px),linear-gradient(to bottom,rgba(18,52,86,.075) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
  padding:0;
}
[data-design] .hero-inner{max-width:var(--container);margin:0 auto;padding:var(--s7) var(--gutter) var(--s8)}
[data-design] .hero .kicker{display:block;margin:0 0 var(--s5);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
[data-design] .hero .kicker::before{display:none}
[data-design] .hero h1{
  margin:0 0 var(--s5);font-size:clamp(2rem,1.1rem + 3.6vw,3.6rem);line-height:1.05;letter-spacing:-.022em;text-wrap:balance;max-inline-size:20ch;color:var(--ink);
}
[data-design] .hero .price{color:var(--accent);white-space:nowrap}
[data-design] .hero .dek{margin:0 0 var(--s6);max-inline-size:34rem;font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);line-height:1.6;color:var(--muted);font-style:normal}
[data-design] .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-bottom:var(--s5)}
[data-design] .hero-promise{margin:0;max-inline-size:30rem;font-size:1.0625rem;color:var(--ink);padding-inline-start:var(--s4);border-inline-start:2px solid var(--accent)}

/* homepage: copy over the drawing on a phone, side by side from 1024 */
[data-design] .hero.has-drawing{min-block-size:min(100dvh,60rem);display:flex;flex-direction:column;justify-content:center}
[data-design] .hero.has-drawing .hero-inner{width:100%}
[data-design] .hero-drawing{margin:0;padding:0 var(--gutter) var(--s8);max-width:var(--container);margin-inline:auto;min-width:0;width:100%}
[data-design] .hero-drawing svg{display:block;inline-size:100%;block-size:auto}
[data-design] .hero-drawing .d-desktop{display:none}
[data-design] .hero-drawing .d-mobile{display:block}
[data-design] .hero-drawing figcaption{margin-top:var(--s4);font-size:13px;line-height:1.5;color:var(--muted);max-inline-size:32rem}
[data-design] .hero-drawing .key{margin:var(--s5) 0 0;padding:0;list-style:none;display:grid;gap:var(--s3);max-inline-size:32rem}
[data-design] .hero-drawing .key li{display:grid;grid-template-columns:22px 1fr;gap:var(--s3);font-size:14px;line-height:1.45;color:var(--muted);margin:0}
[data-design] .hero-drawing .key li::before{display:none}
[data-design] .hero-drawing .key .n{inline-size:22px;block-size:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-block-start:1px}
[data-design] .hero-drawing .key b{color:var(--ink);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px;margin-inline-end:6px}
.hero-drawing svg .svg-ink{fill:var(--ink)} .hero-drawing svg .svg-mut{fill:var(--muted)} .hero-drawing svg .svg-acc{fill:var(--accent)}
.hero-drawing svg .ds-lbl{font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hero-drawing svg .ds-note{font-family:var(--font-body);font-size:12.5px;font-weight:400;letter-spacing:0}
.hero-drawing svg .ds-ttl{font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hero-drawing svg .ds-val{font-family:var(--font-body);font-size:13px;font-weight:400}
.hero-drawing svg .ds-bal{font-family:var(--font-body);font-size:11px;font-weight:700;fill:#fff}
@media (min-width:1024px){
  [data-design] .hero.has-drawing{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;column-gap:var(--s7);padding-inline-start:max(var(--gutter),calc((100% - var(--container)) / 2 + var(--gutter)))}
  [data-design] .hero.has-drawing .hero-inner{padding-inline:0;max-width:34rem;margin:0}
  [data-design] .hero.has-drawing .hero-inner h1{font-size:clamp(2.4rem,1rem + 3vw,3.7rem)}
  [data-design] .hero-drawing{padding:var(--s8) 0 var(--s8);max-width:none;margin:0}
  [data-design] .hero-drawing .d-desktop{display:block}
  [data-design] .hero-drawing .d-mobile{display:none}
  [data-design] .hero-drawing .key{display:none}
}

/* ---------- body: asymmetric editorial column. h2 sits in a left rail beside its first paragraph ---------- */
[data-design] main{display:block;max-width:none;padding:0;margin:0}
[data-design] :is(main,article) > :where(:not(.hero):not(.ledger):not(.cta-band)){max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);width:100%}
[data-design] :is(main,article) > p,[data-design] :is(main,article) > ul,[data-design] :is(main,article) > ol{margin-block:0 var(--s4)}
[data-design] :is(main,article) > h2{margin:var(--s8) auto var(--s4);font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);line-height:1.15;padding-block-start:var(--s3);border-top:2px solid var(--accent);max-width:var(--measure)}
[data-design] :is(main,article) > h2::before{display:none}
[data-design] :is(main,article) > h3{margin-block:var(--s6) var(--s3);font-size:1.2rem}
[data-design] :is(main,article) > p:first-of-type{margin-top:var(--s8)}
[data-design] main p,[data-design] main li{max-width:none}
[data-design] main a:not(.cta-btn){color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px}
[data-design] main a:not(.cta-btn):hover{text-decoration-thickness:3px}
[data-design] main ul,[data-design] main ol{padding-inline-start:1.25rem}
[data-design] main li::marker{color:var(--accent)}
@media (min-width:1024px){
  [data-design] main{display:grid;grid-template-columns:minmax(var(--gutter),1fr) var(--rail) minmax(0,var(--measure)) minmax(var(--gutter),1fr);column-gap:var(--s7)}
  [data-design] :is(main,article) > .hero,[data-design] :is(main,article) > .ledger,[data-design] :is(main,article) > .cta-band{grid-column:1 / -1}
  [data-design] :is(main,article) > :where(:not(.hero):not(.ledger):not(.cta-band)){grid-column:3;max-width:none;margin-inline:0;padding-inline:0;width:auto}
  [data-design] :is(main,article) > h2{grid-column:2;margin:var(--s8) 0 0;border-top:2px solid var(--accent);align-self:start}
  [data-design] :is(main,article) > h2 + *{margin-top:var(--s8)}
  [data-design] :is(main,article) > .hero + p{margin-top:var(--s8)}
}

/* ---------- content components ---------- */
[data-design] .pullquote{margin:var(--s7) auto;padding:var(--s4) 0 var(--s4) var(--s5);border:0;border-left:2px solid var(--accent);font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1.35;color:var(--ink);background:none}
[data-design] aside.note,[data-design] .note:not(text){background:var(--card);border:1px solid var(--hairline);border-left:3px solid var(--accent);border-radius:0;padding:var(--s4) var(--s5);margin-block:var(--s6);color:var(--ink)}
[data-design] .note p{margin:0}
[data-design] .checklist{list-style:none;padding:0;margin-block:var(--s5)}
[data-design] .checklist li{padding:var(--s3) 0 var(--s3) 2.25rem;margin-bottom:0;border-top:1px solid var(--hairline)}
[data-design] .checklist li::before{top:calc(var(--s3) + .3em)}
[data-design] .checklist li:last-child{border-bottom:1px solid var(--hairline)}
[data-design] .faq{margin-block:var(--s5)}
[data-design] .faq dt{font-family:var(--font-display);font-weight:700;font-size:1.1rem;line-height:1.3;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hairline);color:var(--ink)}
[data-design] .faq dd{margin:var(--s2) 0 0}
[data-design] figure.diagram{background:var(--card);border:1px solid var(--hairline);border-radius:0;margin-block:var(--s6);padding:var(--s4)}
[data-design] figure.diagram figcaption{color:var(--muted);font-size:14px}
[data-design] .guide-cta-inline,[data-design] .action-cta{border:1px solid var(--ink);border-radius:0;background:var(--card);padding:var(--s4) var(--s5);margin-block:var(--s6)}
[data-design] .guide-canada-note,[data-design] .legal-updated{color:var(--muted);font-size:14px}
[data-design] .table-wrap{max-width:none;overflow-x:auto;border:1px solid var(--ink);border-radius:0;background:var(--card);margin-block:var(--s6)}
[data-design] .table-wrap table{border-collapse:collapse;width:100%;min-width:32rem;font-size:15px}
[data-design] .table-wrap th{background:var(--ink);color:#fff;text-align:left;font-weight:700;padding:var(--s3) var(--s4)}
[data-design] .table-wrap td{padding:var(--s3) var(--s4);border-top:1px solid var(--hairline);vertical-align:top}
[data-design] .area-cards{display:grid;gap:0;border-top:1px solid var(--ink)}
[data-design] .area-card{background:none;border:0;border-bottom:1px solid var(--hairline);border-radius:0;box-shadow:none;padding:var(--s5) 0;margin:0}
[data-design] .area-card h3,[data-design] .area-card h2{margin:0 0 var(--s2);font-size:1.25rem}
[data-design] .area-card p{margin:0 0 var(--s2)}
[data-design] .about-figure,[data-design] .about-photo{margin-block:var(--s6)}
[data-design] .about-photo,[data-design] .about-figure img{border-radius:0;display:block;width:min(100%,15rem);height:auto;aspect-ratio:1;object-fit:cover}
[data-design] .about-figure figcaption{margin-top:var(--s3);font-size:13px;line-height:1.4;color:var(--muted);font-variant:normal}
[data-design] .review{margin:var(--s6) 0;padding:0}
[data-design] .review blockquote{margin:0;padding:0 0 0 var(--s5);border:0;border-left:2px solid var(--accent);font-family:var(--font-body);font-weight:400;font-size:1.0625rem;line-height:1.6;color:var(--ink)}
[data-design] .review blockquote p{margin:0}
[data-design] .review figcaption{margin:var(--s3) 0 0 var(--s5);font-size:14px;color:var(--muted)}
@media (min-width:1024px){ [data-design] :is(main,article) > .about-figure{grid-column:2;grid-row:span 3;margin-top:var(--s8);align-self:start} [data-design] :is(main,article) > .about-figure + p{margin-top:var(--s8)} }
[data-design] .about-thesis{font-family:var(--font-display);font-weight:700;font-size:1.3rem;line-height:1.3;border-left:2px solid var(--accent);padding-left:var(--s5)}

/* price callouts outside the homepage schedule (Canadian-dollar pricing) */
[data-design] .price-callout{background:var(--card);border:1px solid var(--ink);border-radius:0;box-shadow:none;padding:var(--s5);margin-block:var(--s5)}
[data-design] .tier-label{margin:0;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase}
[data-design] .tier-price{margin:var(--s2) 0 var(--s4);font-family:var(--font-display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--accent)}
[data-design] .tier-note{color:var(--muted);font-size:14px}

/* ---------- the schedule: homepage tiers as ruled rows on navy, not cards ---------- */
[data-design] .ledger{
  background:var(--ink);color:#fff;margin-block:var(--s8) 0;
  padding:var(--s8) max(var(--gutter),calc((100% - var(--container)) / 2 + var(--gutter)));
}
[data-design] .ledger > *{max-width:var(--container)}
[data-design] .ledger h2{color:#fff;border-top:2px solid var(--accent-dark);padding-top:var(--s3);margin:0 0 var(--s4);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);max-width:none;position:static}
[data-design] .ledger p{color:var(--muted-dark);max-width:var(--measure)}
[data-design] main .ledger a:not(.cta-btn){color:#fff;text-decoration-color:var(--accent-dark)}
[data-design] .ledger + *{margin-top:var(--s8)}
[data-design] .ledger .price-callout{
  background:none;border:0;border-top:1px solid rgba(255,255,255,.28);border-radius:0;padding:var(--s6) 0;margin:0;color:#fff;
  display:grid;gap:var(--s4);
}
[data-design] .ledger .price-callout:first-of-type{margin-top:var(--s6)}
[data-design] .ledger .tier-label{color:var(--muted-dark);font-size:.9rem}
[data-design] .ledger .tier-price{color:#fff;margin:0}
[data-design] .ledger .price-callout ul{margin:0;padding-inline-start:1.2rem;color:#fff}
[data-design] .ledger .price-callout li{margin-bottom:var(--s2);color:#fff}
[data-design] .ledger .price-callout li::marker{color:var(--accent-dark)}
[data-design] .ledger .own-band{background:none;border:0;border-top:1px solid rgba(255,255,255,.28);border-radius:0;padding:var(--s6) 0 0;margin-top:0;color:#fff}
[data-design] .ledger .own-mark{display:none}
[data-design] .ledger .own-band p{color:#fff}
@media (min-width:900px){
  [data-design] .ledger .price-callout{grid-template-columns:14rem minmax(0,1fr);column-gap:var(--s7);align-items:start}
  [data-design] .ledger .price-callout > .tier-label{grid-column:1;grid-row:1}
  [data-design] .ledger .price-callout > .tier-price{grid-column:1;grid-row:2}
  [data-design] .ledger .price-callout > ul{grid-column:2;grid-row:1 / span 3;columns:2;column-gap:var(--s6)}
  [data-design] .ledger .price-callout > ul li{break-inside:avoid}
}

/* ---------- call to action band ---------- */
[data-design] .cta-band{background:var(--ink);color:#fff;border:0;margin:var(--s9) 0 0;width:auto;padding:var(--s8) 0}
[data-design] .cta-band-inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
[data-design] .cta-band .cta-lead{color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);line-height:1.2;max-width:34rem;margin:0 0 var(--s5)}
[data-design] .cta-band .cta-note{color:var(--muted-dark);font-size:15px;margin:var(--s4) 0 0}
[data-design] .cta-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin:0}
[data-design] .cta-btn{display:inline-flex;align-items:center;min-height:52px;padding:var(--s3) var(--s6);border-radius:2px;font-weight:700;font-size:clamp(15px,1.2vw + 12px,17px);text-decoration:none;box-shadow:none;border:0}
[data-design] .cta-btn-primary{background:var(--accent);color:#fff}
[data-design] .cta-btn-primary:hover{background:#7E1531}
[data-design] .cta-btn-secondary{background:none;color:var(--ink);min-height:44px;padding:0;font-weight:400;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:var(--hairline)}
[data-design] .cta-btn-secondary:hover{text-decoration-color:var(--accent)}
[data-design] .cta-band .cta-btn-primary{background:var(--sheet);color:var(--ink)}
[data-design] .cta-band .cta-btn-primary:hover{background:#fff}
[data-design] .cta-band .cta-btn-secondary{color:#fff;text-decoration-color:var(--muted-dark)}

/* ---------- newsletter form ---------- */
[data-design] .nl-form{border-top:2px solid var(--accent);padding-top:var(--s5)}
[data-design] .nl-field input{border:1px solid var(--ink);border-radius:2px;background:var(--card);color:var(--ink);min-height:44px;padding:var(--s2) var(--s3);font:inherit}
[data-design] .nl-button{background:var(--accent);color:#fff;border:0;border-radius:2px;min-height:48px;padding:var(--s2) var(--s5);font:inherit;font-weight:700;cursor:pointer}

/* ---------- footer ---------- */
[data-design] .site-footer{background:var(--sheet);color:var(--muted);border-top:1px solid var(--ink);padding:var(--s7) 0 var(--s8);margin:0;font-size:14px}
[data-design] .site-footer .wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
[data-design] .site-footer p{margin:0 0 var(--s3);max-width:60rem}
[data-design] .site-footer a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:3px}
[data-design] .site-footer a:hover{text-decoration-color:var(--accent)}

/* ---------- motion: hero drawing, first paint only ---------- */
@media (prefers-reduced-motion:no-preference){
  .anim-card{animation:ds-fade .36s ease-out both}
  .anim-leader{stroke-dasharray:100;stroke-dashoffset:100;animation:ds-draw .52s ease-out both}
  .anim-label{animation:ds-fade .34s ease-out both}
  .g1 .anim-leader{animation-delay:.24s}.g1 .anim-label{animation-delay:.60s}
  .g2 .anim-leader{animation-delay:.33s}.g2 .anim-label{animation-delay:.69s}
  .g3 .anim-leader{animation-delay:.42s}.g3 .anim-label{animation-delay:.78s}
  .g4 .anim-leader{animation-delay:.51s}.g4 .anim-label{animation-delay:.87s}
  .g5 .anim-leader{animation-delay:.60s}.g5 .anim-label{animation-delay:.96s}
  @keyframes ds-draw{to{stroke-dashoffset:0}}
  @keyframes ds-fade{from{opacity:0}to{opacity:1}}
}
@media (forced-colors:active){
  [data-design] .hero{background-image:none}
  [data-design] .site-nav a[aria-current="page"]{border-block-end-color:Highlight}
  .hero-drawing svg .svg-ink,.hero-drawing svg .svg-mut,.hero-drawing svg .svg-acc{fill:CanvasText}
  [data-design] .cta-btn-primary{border:2px solid ButtonText}
}

/* the hand-off from the hero: the first two paragraphs step up to lead size and span the rail */
[data-design] :is(main,article) > .hero + p,[data-design] :is(main,article) > .hero + p + p{font-size:clamp(1.125rem,1.05rem + .4vw,1.3rem);line-height:1.55}
@media (min-width:1024px){
  [data-design] :is(main,article) > .hero + p,[data-design] :is(main,article) > .hero + p + p{grid-column:2 / 4;max-inline-size:44rem}
}

/* focus on navy: a white ring (11:1 on #123456); the sheet-coloured gap used elsewhere would be lost here */
[data-design] .cta-band :focus-visible,[data-design] .ledger :focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:none}

/* the schedule ascends: each tier's price steps up one size */
[data-design] .ledger .price-callout:nth-of-type(1) .tier-price{font-size:2.1rem}
[data-design] .ledger .price-callout:nth-of-type(2) .tier-price{font-size:2.6rem}
[data-design] .ledger .price-callout:nth-of-type(3) .tier-price{font-size:3.1rem}
[data-design] .ledger .price-callout:nth-of-type(2){border-top-width:2px;border-top-color:rgba(255,255,255,.55)}
[data-design] .ledger .price-callout:nth-of-type(3){border-top-width:3px;border-top-color:var(--accent-dark)}

/* the same tiers elsewhere (Canadian-dollar page) are ruled rows too, not boxed cards */
[data-design] :is(main,article) > .price-callout{background:none;border:0;border-top:2px solid var(--ink);padding:var(--s5) 0;margin:0;box-shadow:none}
[data-design] :is(main,article) > .price-callout:last-of-type{border-bottom:2px solid var(--ink)}
@media (min-width:1024px){
  [data-design] :is(main,article) > .price-callout{grid-column:2 / 4;max-inline-size:none;display:grid;grid-template-columns:12rem minmax(0,1fr);column-gap:var(--s7);align-items:start}
  [data-design] :is(main,article) > .price-callout > .tier-label{grid-column:1;grid-row:1}
  [data-design] :is(main,article) > .price-callout > .tier-price{grid-column:1;grid-row:2;margin-bottom:0}
  [data-design] :is(main,article) > .price-callout > :not(.tier-label):not(.tier-price){grid-column:2;grid-row:1 / span 2}
}

/* the shared legal theme colours the Better price in navy (invisible on the navy schedule) and boxes the row */
[data-design] .ledger .price-callout.tier-better .tier-price{color:#fff;background:none}
[data-design] .ledger .price-callout.tier-better{background:none;border-bottom:0}
[data-design] :is(main,article) > .price-callout.tier-better{background:none;border-bottom:0}
[data-design] :is(main,article) > .price-callout.tier-better .tier-price{color:var(--accent)}

/* a guide's body sits in one <article>; it takes no box of its own so the rail grid still applies */
[data-design] main > article{display:contents}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* the hand-off after the hero, for guides (their paragraphs are inside the article) */
[data-design] .hero + article > p:nth-child(-n+2){font-size:clamp(1.125rem,1.05rem + .4vw,1.3rem);line-height:1.55}
@media (min-width:1024px){
  [data-design] .hero + article > p:nth-child(-n+2){grid-column:2 / 4;max-inline-size:44rem}
  [data-design] .hero + article > p:first-child{margin-top:var(--s8)}
}