/* Generated from the approved mockups — see scripts/import-mockups.py. */
  :root{
    --ink:#1C1710; --blue:#0C51A2; --blue-deep:#083B77;
    --orange:#F7923A; --orange-deep:#A44E16;
    --paper:#FAF5EC; --surface:#F1E9DB; --border:#DCCFB9; --muted:#6A5F4F;
    --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
    --s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
    --max-w:1140px; --prose:68ch;
    --serif:"Source Serif 4",Georgia,serif;
    --sans:"Source Sans 3",system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{margin:0; text-wrap:balance}
  h1,h2{font-family:var(--serif); font-weight:600; letter-spacing:-0.02em}
  h3{font-family:var(--sans); font-weight:600}
  p{margin:0}
  a{color:var(--blue); text-underline-offset:3px}
  img{max-width:100%}
  .wrap{max-width:var(--max-w); margin-inline:auto; padding-inline:var(--s-4)}
  @media(min-width:768px){.wrap{padding-inline:var(--s-6)}}

  :is(a,button,summary,input,textarea,select):focus-visible{
    outline:2px solid var(--paper); outline-offset:0;
    box-shadow:0 0 0 4px var(--ink); border-radius:4px;
  }

  /* ---------- mockup annotation bar (not part of the design) ---------- */
  .mockbar{background:var(--ink); color:var(--paper); font-size:13px; line-height:1.5}
  .mockbar .wrap{padding-block:var(--s-3); display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:baseline}
  .mockbar b{font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--orange)}
  .mockbar span{opacity:.82}

  /* ---------- header ---------- */
  .site-header{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
    background:color-mix(in srgb,var(--paper) 92%,transparent);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
  }
  .site-header .wrap{display:flex; align-items:center; gap:var(--s-5); height:64px}
  @media(min-width:900px){.site-header .wrap{height:72px}}
  .logo{display:flex; align-items:center; flex:0 0 auto}
  .logo img{height:22px; width:auto; display:block}
  @media(min-width:900px){.logo img{height:26px}}
  .nav{display:none; margin-left:auto; align-items:center; gap:var(--s-5)}
  @media(min-width:900px){.nav{display:flex}}
  .nav a, .nav summary{
    font-weight:500; color:var(--ink); text-decoration:none; cursor:pointer;
    font-size:16px; transition:color .15s ease-out;
  }
  .nav a:hover, .nav summary:hover{color:var(--blue)}
  .drop{position:relative}
  .drop summary{list-style:none; display:flex; align-items:center; gap:6px}
  .drop summary::-webkit-details-marker{display:none}
  .drop summary::after{content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px)}
  .drop[open] > .panel{display:block}
  .panel{
    display:none; position:absolute; top:calc(100% + 14px); left:-16px; min-width:246px;
    background:var(--paper); border:1px solid var(--border); border-radius:10px; padding:var(--s-2);
  }
  .panel a{display:block; padding:9px var(--s-3); border-radius:6px; font-weight:400; font-size:15px}
  .panel a:hover{background:var(--surface); color:var(--blue)}
  .header-cta{margin-left:auto}
  @media(min-width:900px){.header-cta{margin-left:var(--s-2)}}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:44px; padding:14px 28px; border-radius:8px;
    font-family:var(--sans); font-weight:600; font-size:17px; text-decoration:none;
    cursor:pointer; transition:background-color .15s ease-out,color .15s ease-out;
  }
  .btn-primary{background:var(--orange); color:var(--ink); border:1px solid var(--orange-deep)}
  .btn-primary:hover{background:var(--orange-deep); color:var(--paper)}
  .btn-secondary{background:transparent; color:var(--blue); border:1.5px solid var(--blue)}
  .btn-secondary:hover{background:var(--blue); color:#fff}
  .btn-sm{padding:10px 18px; min-height:40px; font-size:15px}

  .label{
    font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--muted); margin:0 0 var(--s-3)
  }

  /* ---------- sections ---------- */
  section{padding-block:var(--s-7)}
  @media(min-width:768px){section{padding-block:var(--s-8)}}
  /* adjacent plain sections need a seam, or their padding reads as a void */
  .tight{padding-top:0}
  section + section:not(.alt):not(.close-cta):not(.tight){border-top:1px solid var(--border)}
  .alt + section:not(.alt){border-top:0}
  .alt{background:var(--surface); border-block:1px solid var(--border)}

  /* ---------- hero ---------- */
  .hero{padding-block:var(--s-8) var(--s-9)}
  .hero-grid{display:grid; gap:var(--s-7)}
  .hero h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.1rem); line-height:1.1; max-width:16ch}
  .hero .lead{font-size:clamp(1.12rem,1.04rem + .45vw,1.3rem); line-height:1.5; color:var(--muted); max-width:52ch; margin-top:var(--s-5)}
  .hero-actions{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6)}
  .hero-note{margin-top:var(--s-4); font-size:15px; color:var(--muted)}

  /* ---------- screenshot placeholder ---------- */
  .shot{
    border:1px solid var(--border); border-radius:10px; background:
      repeating-linear-gradient(45deg,var(--surface) 0 10px,transparent 10px 20px);
    aspect-ratio:4/3; max-width:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; padding:var(--s-5); gap:var(--s-2);
  }
  .shot b{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue)}
  .shot span{font-size:15px; color:var(--muted); max-width:34ch}
  .shot-wide{aspect-ratio:16/9}
  .shot-real{border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; margin-top:var(--s-4)}
  .shot-real img{display:block; width:100%; height:auto}
  .shot-cap{margin-top:var(--s-3); font-size:14px; color:var(--muted); max-width:46ch}
  .callout{margin-top:var(--s-5); border:1px solid var(--border); border-left:3px solid var(--blue);
    border-radius:8px; padding:var(--s-4) var(--s-5); background:var(--paper); max-width:56ch}
  .callout h4{margin:0 0 var(--s-2); font-family:var(--sans); font-size:1.02rem; font-weight:600}
  .callout p{color:var(--muted); font-size:16px; margin:0 0 var(--s-3)}
  .callout a{font-weight:600; text-decoration:none}
  .callout a::after{content:" →"}

  /* ---------- segment fork ---------- */
  .fork-head{max-width:var(--prose); margin-bottom:var(--s-6)}
  .fork-head h2{font-size:clamp(1.5rem,1.3rem + 1vw,2.05rem); line-height:1.2}
  .cards{display:grid; gap:var(--s-4)}
  @media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr); gap:var(--s-5)}}
  .card{
    background:var(--paper); border:1px solid var(--border); border-radius:10px;
    padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3);
    transition:border-color .15s ease-out;
  }
  @media(min-width:768px){.card{padding:var(--s-6)}}
  .card:hover{border-color:var(--blue)}
  .card h3{font-size:1.22rem}
  .card p{color:var(--muted); font-size:16px; flex:1}
  .card .go{font-weight:600; text-decoration:none; font-size:16px}
  .card .go::after{content:" →"}
  .card-eyebrow{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue)}

  /* ---------- capability rows ---------- */
  .cap{display:grid; gap:var(--s-5)}
  .cap + .cap{margin-top:var(--s-9)}
  @media(min-width:900px){.cap + .cap{margin-top:var(--s-10)}}
  .cap h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.35rem,1.2rem + .8vw,1.8rem); letter-spacing:-0.015em; line-height:1.2}
  .cap p{color:var(--muted); margin-top:var(--s-3); max-width:46ch}
  .cap ul{margin:var(--s-4) 0 0; padding:0; list-style:none; display:grid; gap:var(--s-2)}
  .cap li{padding-left:22px; position:relative; font-size:16px}
  .cap li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border:1.5px solid var(--blue); border-radius:2px}
  .cap .go{display:inline-block; margin-top:var(--s-5); font-weight:600; text-decoration:none}
  .cap .go::after{content:" →"}

  /* ---------- objections ---------- */
  .obj{display:grid; gap:var(--s-5)}
  @media(min-width:860px){.obj{grid-template-columns:repeat(3,1fr)}}
  .obj-item{border-top:2px solid var(--blue); padding-top:var(--s-4)}
  .obj-q{font-family:var(--serif); font-weight:600; font-size:1.18rem; line-height:1.3}
  .obj-a{color:var(--muted); font-size:16px; margin-top:var(--s-3)}
  .assume{
    display:inline-block; margin-top:var(--s-3); font-size:12px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color:var(--orange-deep);
    border:1px dashed var(--orange-deep); border-radius:4px; padding:3px 8px;
  }

  /* ---------- pricing ---------- */
  .tiers{display:grid; gap:var(--s-4)}
  @media(min-width:760px){.tiers{grid-template-columns:repeat(3,1fr); gap:var(--s-5)}}
  .tier{background:var(--paper); border:1px solid var(--border); border-radius:10px; padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3)}
  @media(min-width:768px){.tier{padding:var(--s-6)}}
  .tier h3{font-size:1.15rem}
  .price{font-family:var(--serif); font-size:2rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink)}
  .price small{display:block; font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-deep); margin-top:var(--s-1)}
  .tier p{color:var(--muted); font-size:16px; flex:1}

  /* ---------- closing cta ---------- */
  .close-cta{background:var(--ink); color:var(--paper); text-align:center}
  .close-cta h2{font-size:clamp(1.6rem,1.35rem + 1.3vw,2.4rem); line-height:1.2; max-width:22ch; margin-inline:auto}
  .close-cta p{color:#C9C3BA; margin-top:var(--s-4); max-width:50ch; margin-inline:auto}
  .close-cta .hero-actions{justify-content:center}
  .close-cta .btn-secondary{color:var(--paper); border-color:#4A5563}
  .close-cta .btn-secondary:hover{background:var(--paper); color:var(--ink); border-color:var(--paper)}

  /* ---------- footer ---------- */
  footer{background:var(--ink); color:var(--paper); border-top:1px solid #2A313C}
  footer .wrap{padding-block:var(--s-8)}
  .fgrid{display:grid; gap:var(--s-6)}
  @media(min-width:700px){.fgrid{grid-template-columns:repeat(4,1fr)}}
  footer h4{margin:0 0 var(--s-3); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--orange)}
  footer ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2)}
  footer a{color:#D7D2CA; text-decoration:none; font-size:16px}
  footer a:hover{color:var(--paper); text-decoration:underline}
  .fbase{margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid #2A313C; font-size:15px; color:#8C949F; display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between}



  .cap-copy{display:grid; gap:var(--s-3); align-content:start}
  .cap-dia{border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:var(--s-5)}
  .cap-dia svg{width:100%; height:auto; display:block}
  .dia-box{fill:var(--paper); stroke:var(--blue); stroke-width:1.5}
  .dia-box-accent{fill:#FBEEDD; stroke:var(--orange-deep); stroke-width:1.5}
  .dia-t{font-family:var(--sans); font-size:15px; font-weight:600; fill:var(--ink)}
  .dia-s{font-family:var(--sans); font-size:12px; font-weight:600; fill:var(--muted); letter-spacing:.06em}
  .dia-line{stroke:var(--blue); stroke-width:1.5; fill:none}
  .dia-arrow{fill:var(--blue)}
  .cap-text{display:grid; gap:var(--s-5)}
  .hero-text{display:grid; gap:var(--s-5)}
  @media(min-width:880px){
    .cap-text{grid-template-columns:minmax(0,1fr) minmax(0,0.82fr); column-gap:var(--s-8); align-items:center}
    .cap-text p{margin-top:0}
    .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--s-8); align-items:center}
    .hero-text .lead{margin-top:0}
  }

  .mnav{margin-left:auto; position:relative}
  .mnav summary{list-style:none; cursor:pointer; font-weight:600; font-size:15px; padding:10px 14px;
    border:1.5px solid var(--blue); color:var(--blue); border-radius:8px; min-height:44px; display:flex; align-items:center}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav-panel{position:absolute; right:0; top:calc(100% + 10px); width:min(78vw,300px); background:var(--paper);
    border:1px solid var(--border); border-radius:10px; padding:var(--s-2); display:grid; max-height:70vh; overflow:auto}
  .mnav-panel a{padding:11px var(--s-3); border-radius:6px; text-decoration:none; color:var(--ink); font-size:16px}
  .mnav-panel a:hover{background:var(--surface); color:var(--blue)}
  @media(min-width:900px){.mnav{display:none}}
  .shot-real{max-width:640px; margin-inline:auto}
  .framed .bar{display:flex; gap:6px; align-items:center; height:30px; padding-inline:12px;
    background:var(--surface); border-bottom:1px solid var(--border)}
  .framed .bar i{width:9px; height:9px; border-radius:50%; background:#CFC8BE; display:block}
  .quote{margin:0; background:var(--paper); border:1px solid var(--border); border-radius:10px;
    padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-4)}
  @media(min-width:768px){.quote{padding:var(--s-6)}}
  .quote blockquote{margin:0; font-family:var(--serif); font-size:1.06rem; line-height:1.5; flex:1}
  .quote blockquote::before{content:"“"}
  .quote blockquote::after{content:"”"}
  .quote figcaption{display:grid; gap:2px; border-top:1px solid var(--border); padding-top:var(--s-3)}
  .quote figcaption b{font-size:16px}
  .quote figcaption span{font-size:15px; color:var(--muted)}
  .quote.pending{border-style:dashed; border-color:var(--orange-deep); background:var(--surface)}
  .quote.pending blockquote{font-family:var(--sans); font-size:15px; color:var(--orange-deep)}
  .quote.pending blockquote::before,.quote.pending blockquote::after{content:""}
  .proof-foot{margin-top:var(--s-6); font-size:16px; color:var(--muted)}

  /* --- page-head figure: nothing sits in an empty right column --- */
  .head-grid{display:grid; gap:var(--s-6)}
  @media(min-width:920px){
    .head-grid{grid-template-columns:minmax(0,1fr) minmax(0,0.92fr); column-gap:var(--s-8); align-items:center}
  }
  .head-fig{border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:var(--s-5)}
  @media(min-width:768px){.head-fig{padding:var(--s-6)}}
  .head-fig svg{width:100%; height:auto; display:block}
  .dia-tile{fill:var(--paper); stroke:var(--blue); stroke-width:1.5}
  .dia-tile-a{fill:#FBEEDD; stroke:var(--orange-deep); stroke-width:1.5}
  .dia-num{font-family:var(--serif); font-weight:600; font-size:30px; fill:var(--ink); font-variant-numeric:tabular-nums}
  .dia-glyph{fill:none; stroke:var(--blue); stroke-width:1.6}

  /* --- capability tiles: a list of headings and paragraphs reads as nothing --- */
  .does{display:grid; gap:var(--s-4)}
  @media(min-width:760px){.does{grid-template-columns:repeat(2,1fr); gap:var(--s-5)}}
  @media(min-width:1100px){.does{gap:var(--s-5)}}
  .does-item{border:1px solid var(--border); border-radius:12px; padding:var(--s-5);
    display:grid; gap:var(--s-3); align-content:start; background:var(--surface);
    transition:border-color .15s ease-out}
  .alt .does-item{background:var(--paper)}
  .does-item:hover{border-color:var(--blue)}
  .does-item h3{font-family:var(--serif); font-weight:600; font-size:1.14rem; line-height:1.25; margin:0}
  .does-item p{color:var(--muted); font-size:16px; margin:0}
  .gl{width:38px; height:38px; border-radius:9px; border:1px solid var(--border);
    background:var(--paper); display:flex; align-items:center; justify-content:center}
  .alt .gl{background:var(--surface)}
  .gl svg{width:20px; height:20px; fill:none; stroke:var(--blue); stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round}
  .does-item .saves{border-left:2px solid var(--orange); padding-left:var(--s-3);
    color:var(--ink)!important; font-size:15px!important; margin-top:var(--s-1)!important}
  .does-item .saves b{display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--orange-deep); margin-bottom:3px}

  /* an odd final tile spans the row rather than leaving a hole */
  @media(min-width:760px){.does-item:last-child:nth-child(odd){grid-column:1 / -1}}

  .rating{display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap;
    border:1px solid var(--border); border-radius:10px; background:var(--paper);
    padding:var(--s-4) var(--s-5); margin-top:var(--s-6); max-width:64ch}
  .alt .rating{background:var(--surface)}
  .rating .stars{color:var(--orange-deep); font-size:20px; letter-spacing:2px}
  .rating p{margin:0; font-size:16px; color:var(--muted)}
  .rating b{color:var(--ink)}

  /* a quote grid following a tile grid needs air, not a hairline gap */
  .does + .cards, .qa + .cards, .obj + .cards{margin-top:var(--s-8)}
  .cards + .rating, .cards + .proof-foot{margin-top:var(--s-6)}

  /* --- cookie consent --- */
  .cookie{position:fixed; left:0; right:0; bottom:0; z-index:200;
    background:var(--paper); border-top:1px solid var(--border);
    padding:var(--s-4) 0 calc(var(--s-4) + env(safe-area-inset-bottom, 0px))}
  .cookie-inner{max-width:var(--max-w); margin-inline:auto; padding-inline:var(--s-4);
    display:grid; gap:var(--s-4)}
  @media(min-width:768px){
    .cookie-inner{padding-inline:var(--s-6); grid-template-columns:minmax(0,1fr) auto;
      align-items:center; gap:var(--s-7)}
  }
  .cookie-copy p{margin:0; font-size:15px; color:var(--muted); max-width:70ch}
  .cookie-copy p b{display:block; color:var(--ink); font-size:16px; margin-bottom:var(--s-1)}
  .cookie-actions{display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center}
  .cookie-actions .btn{white-space:nowrap}
  .cookie-link{font-size:15px; text-decoration:underline; text-underline-offset:3px}
  [data-cookie-settings]{cursor:pointer}
  @media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
  .page-head{padding-block:var(--s-8) var(--s-7)}
  .page-head h1{font-size:clamp(2rem,1.5rem + 2.2vw,2.9rem); line-height:1.1; max-width:16ch}
  .page-head .lead{font-size:clamp(1.1rem,1.03rem + .4vw,1.28rem); color:var(--muted); max-width:56ch; margin-top:var(--s-5)}
  .contact-grid{display:grid; gap:var(--s-7)}
  @media(min-width:900px){.contact-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:var(--s-9); align-items:start}}
  form.contact{display:grid; gap:var(--s-5)}
  .field{display:grid; gap:var(--s-2)}
  .field label{font-weight:600; font-size:16px}
  .field .hint{font-size:15px; color:var(--muted)}
  .field input,.field select,.field textarea{
    font-family:var(--sans); font-size:17px; color:var(--ink); background:var(--paper);
    border:1px solid var(--border); border-radius:8px; padding:var(--s-3); min-height:44px; width:100%}
  .field textarea{min-height:150px; resize:vertical}
  .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
  .aside{display:grid; gap:var(--s-5)}
  .panel{border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:var(--s-5)}
  @media(min-width:768px){.panel{padding:var(--s-6)}}
  .panel h2{font-family:var(--sans); font-size:1.1rem; font-weight:600; letter-spacing:0; margin-bottom:var(--s-2)}
  .panel p{color:var(--muted); font-size:16px; margin-bottom:var(--s-4)}
  .panel.accent{border-left:3px solid var(--blue)}
  .hours-frame{border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--paper)}
  .hours-frame iframe{display:block; width:100%; border:0}
  .hours-note{font-size:14px; color:var(--muted); margin-top:var(--s-3)}
  .routes{display:grid; gap:var(--s-3); margin-top:var(--s-6); padding:0; list-style:none}
  .routes li{display:flex; gap:var(--s-3); align-items:baseline; font-size:16px}
  .routes b{font-weight:600; min-width:9.5ch}
  .routes span{color:var(--muted)}
  .page-head{padding-block:var(--s-7) var(--s-6)}
  .page-head h1{font-size:clamp(2rem,1.5rem + 2.2vw,2.9rem); line-height:1.1; max-width:18ch}
  .page-head .lead{font-size:clamp(1.1rem,1.03rem + .4vw,1.28rem); color:var(--muted); max-width:58ch; margin-top:var(--s-5)}
  .page-head .hero-actions{margin-top:var(--s-6)}
  .two{display:grid; gap:var(--s-6)}
  @media(min-width:880px){.two{grid-template-columns:minmax(0,1fr) minmax(0,0.9fr); column-gap:var(--s-8); align-items:start}}
  .stack{display:grid; gap:var(--s-5)}
  .rule{border:0; border-top:1px solid var(--border); margin-block:var(--s-7)}
  .pending{border:1px dashed var(--orange-deep); border-radius:8px; background:var(--surface);
    padding:var(--s-4) var(--s-5); color:var(--orange-deep); font-size:15px; max-width:62ch}
  .pending > b:first-child{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--s-2)}
  .pending b{color:var(--orange-deep); font-weight:600}
  .qa{display:grid; gap:var(--s-5)}
  .qa-item{border-top:1px solid var(--border); padding-top:var(--s-4)}
  .qa-q{font-family:var(--serif); font-weight:600; font-size:1.14rem; line-height:1.3}
  .qa-a{color:var(--muted); font-size:16px; margin-top:var(--s-2); max-width:64ch}
  .featgrid{display:grid; gap:var(--s-5)}
  @media(min-width:760px){.featgrid{grid-template-columns:repeat(2,1fr); gap:var(--s-6)}}
  .prose{max-width:66ch; display:grid; gap:var(--s-4)}
  .prose h2{font-size:clamp(1.4rem,1.25rem + .8vw,1.9rem); line-height:1.2; margin-top:var(--s-5)}
  .prose p{color:var(--muted)}
  .does{display:grid; gap:var(--s-5)}
  @media(min-width:820px){.does{grid-template-columns:repeat(2,1fr); gap:var(--s-6) var(--s-8)}}
  .does-item{border-top:2px solid var(--blue); padding-top:var(--s-4); display:grid; gap:var(--s-2); align-content:start}
  .does-item h3{font-family:var(--serif); font-weight:600; font-size:1.18rem; line-height:1.25}
  .does-item p{color:var(--muted); font-size:16px; margin:0}
  .split{display:grid; gap:var(--s-5)}
  @media(min-width:820px){.split{grid-template-columns:1fr 1fr; gap:var(--s-6)}}
  .col{border:1px solid var(--border); border-radius:10px; padding:var(--s-5); background:var(--paper)}
  .col.bad{border-left:3px solid var(--orange-deep)}
  .col.good{border-left:3px solid var(--blue)}
  .col h3{font-family:var(--sans); font-size:1.02rem; font-weight:600; margin-bottom:var(--s-3)}
  .col ul{margin:0; padding:0; list-style:none; display:grid; gap:var(--s-3)}
  .col li{font-size:16px; color:var(--muted); padding-left:20px; position:relative}
  .col li::before{content:""; position:absolute; left:0; top:.6em; width:8px; height:2px; background:var(--border)}