/* Heart Eco sketch site · shared look for every inner page.
   The inner pages read like a newspaper: a photograph, a headline, a large first paragraph,
   and the type gets smaller as the detail grows. */
:root{
  --purple:#421052;      /* the fifth heart, belonging */
  --yellow:#F4DA0D;      /* discover abundance */
  --red:#E02B20;         /* save your cash */
  --green:#8CC63F;       /* save the planet */
  --blue:#29ABE2;        /* have fun */
  --ink:#20102a;
  --soft:#5a4b63;
  --paper:#fffdf6;
  --rule:#e4dccb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:Archivo,"Segoe UI",Roboto,Arial,sans-serif;font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Archivo Black",Archivo,Arial,sans-serif;line-height:1.04;letter-spacing:-.5px;margin:0;color:var(--purple)}
a{color:var(--purple)}

/* ---------- the sketch notice ---------- */
.sketch{background:var(--purple);color:#fff;font-size:13.5px;letter-spacing:.5px;text-align:center;padding:6px 12px}
.sketch b{color:var(--yellow)}

/* ---------- masthead and menu ---------- */
.mast{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0 12px;border-bottom:3px solid var(--purple);flex-wrap:wrap}
.mast img{width:150px;display:block}
.menu{display:flex;flex-wrap:wrap;gap:4px 16px;font-weight:600;font-size:15.5px}
.menu a{text-decoration:none;color:var(--purple);padding:4px 0;border-bottom:3px solid transparent}
.menu a:hover,.menu a.here{border-bottom-color:var(--yellow)}
.menu a.join{background:var(--yellow);padding:4px 12px;border-radius:9px;border:0}

/* ---------- the photograph slot ---------- */
.photo{position:relative;background:repeating-linear-gradient(135deg,#efe8d8 0 14px,#f6f1e4 14px 28px);
  border:2px dashed #cbbfa6;border-radius:14px;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#8a7c64;font-weight:600;font-size:16px;padding:20px}
.photo span{max-width:40ch}
.photo span::before{content:"\1F4F7  ";}
.photo.hero{aspect-ratio:16/7;margin-top:26px}
.photo.mid{aspect-ratio:16/9}
.photo.small{aspect-ratio:4/3;font-size:14px}
.photo.video span::before{content:"\1F3A5  ";}

/* ---------- the lead story ---------- */
.kicker{font-size:13.5px;letter-spacing:4px;font-weight:700;text-transform:uppercase;margin:22px 0 8px}
.kicker.red{color:var(--red)} .kicker.green{color:#4f8a14} .kicker.yellow{color:#a88f00} .kicker.blue{color:#1d7fb0} .kicker.purple{color:var(--purple)}
.story h1{font-size:clamp(36px,6vw,68px)}
.lead{font-size:clamp(21px,2.3vw,27px);line-height:1.38;font-weight:600;margin:16px 0 0;max-width:62ch}
.body{font-size:19px;margin:16px 0 0;max-width:66ch}
.detail{font-size:15.5px;line-height:1.55;color:#3b2c45;columns:2 300px;column-gap:34px;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--rule)}
.detail p{margin:0 0 10px;break-inside:avoid}
.detail h4{font-size:13px;letter-spacing:2px;text-transform:uppercase;margin:0 0 4px;color:var(--purple)}
.fine{font-size:13.5px;color:var(--soft);margin:14px 0 0}

/* ---------- the invitation to act ---------- */
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;align-items:center}
.act{display:inline-block;background:var(--yellow);color:var(--purple);font-family:"Archivo Black",Arial,sans-serif;font-size:19px;padding:13px 22px;border-radius:12px;text-decoration:none}
.act.ghost{background:none;border:3px solid var(--purple);padding:10px 19px}

/* ---------- the stories below ---------- */
.more{margin:54px 0 0;padding-top:18px;border-top:3px double var(--purple)}
.more > h2{font-size:15px;letter-spacing:4px;text-transform:uppercase;margin-bottom:18px}
.col{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px 28px}
.item h3{font-size:26px;margin:14px 0 0}
.item .lead{font-size:18.5px;margin-top:8px}
.item .body{font-size:15.5px;margin-top:8px}
.item .fine{font-size:13px}
.item a.go{display:inline-block;margin-top:10px;font-weight:700;font-size:15.5px}

/* a row story: photograph beside the words */
.row{display:grid;grid-template-columns:5fr 7fr;gap:28px;align-items:start;padding:26px 0;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0}
.row h3{font-size:30px}
.row .lead{font-size:20px;margin-top:8px}
.row .body{font-size:16px;margin-top:8px}
.row .fine{font-size:13.5px}
.row .says{font-size:15px;color:var(--soft);font-style:italic;margin:6px 0 0}

/* ---------- honesty marks: what is still to fill ---------- */
.todo{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--purple);border:1.5px dashed var(--purple);border-radius:20px;padding:1px 9px;vertical-align:middle;white-space:nowrap;font-family:Archivo,Arial,sans-serif;font-style:normal}

/* ---------- the club, at the foot of every page ---------- */
.club{margin:60px 0 0;background:var(--purple);color:#fff;border-radius:22px;padding:36px 36px}
.club h2{color:#fff;font-size:clamp(26px,3.6vw,40px)}
.club p{max-width:60ch;font-size:18px;margin:12px 0 0}
.club .act{margin-top:18px}
footer{margin:40px 0 44px;font-size:15px;color:var(--soft)}
footer b{color:var(--purple)}

@media (max-width:760px){
  body{font-size:17px}
  .row{grid-template-columns:1fr;gap:12px}
  .photo.hero{aspect-ratio:4/3}
  .club{padding:26px 22px}
}

/* ---------- print: A4 portrait, compact, design kept ---------- */
@media print{
  @page{size:A4 portrait;margin:11mm}
  body{background:#fff;font-size:10.5pt;line-height:1.35}
  .wrap{max-width:none;padding:0}
  .sketch,.menu{display:none}
  .photo.hero{aspect-ratio:16/5}
  .photo.mid,.photo.small{aspect-ratio:16/6}
  .story h1{font-size:28pt}
  .lead{font-size:13pt}
  .body{font-size:10.5pt}
  .detail{font-size:9pt}
  .row{padding:10px 0;gap:14px;break-inside:avoid}
  .row h3,.item h3{font-size:15pt}
  .item{break-inside:avoid}
  .col{gap:14px}
  .club{padding:14px 18px;margin-top:16px;break-inside:avoid}
  .more{margin-top:18px}
  a{text-decoration:none}
}
.detail > div{margin:0 0 10px;break-inside:avoid}

/* ---------- the four heart pages ---------- */
.heartnav{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.heartnav a{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:15px;color:var(--purple);padding:6px 14px 6px 8px;border-radius:30px;border:2px solid var(--rule);background:#fff}
.heartnav a.here{border-color:var(--purple)}
.heartnav img{width:26px;height:26px;object-fit:contain}
img.h-red{rotate:-90deg} img.h-yellow{rotate:90deg} img.h-blue{rotate:180deg}
.proof{margin:30px 0 0;border-radius:18px;padding:24px 26px}
.proof.red{background:#fdecea} .proof.green{background:#eef7e2} .proof.yellow{background:#fdf8d4} .proof.blue{background:#e6f5fc}
.proof h2{font-size:clamp(22px,2.6vw,30px)}
.proof table{width:100%;border-collapse:collapse;margin-top:14px;font-size:16px}
.proof th,.proof td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(66,16,82,.15)}
.proof th{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--purple)}
.big-number{font-family:"Archivo Black",Arial,sans-serif;font-size:clamp(46px,7vw,84px);color:var(--purple);line-height:1;margin-top:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:14px}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 10px;border-radius:20px;color:#fff;margin-top:14px}
.tag.red{background:var(--red)} .tag.green{background:#4f8a14} .tag.yellow{background:#a88f00} .tag.blue{background:#1d7fb0}

/* ---------- real photographs, once they arrive ---------- */
/* Photographs live on the Desktop (WEBSITE/FOR THE SKETCH) while the site is a sketch,
   so faces stay off the backup until everyone in them has said yes. */
img.pic{display:block;width:100%;object-fit:cover;border-radius:14px;background:#efe8d8}
img.pic.hero{aspect-ratio:16/8;margin-top:26px;object-position:50% 55%}
img.pic.mid{aspect-ratio:16/9}
img.pic.small{aspect-ratio:4/3}
@media (max-width:760px){img.pic.hero{aspect-ratio:4/3}}
@media print{img.pic.hero{aspect-ratio:16/6}}
img.pic.fit{object-fit:contain;background:#fff;border:1px solid var(--rule)}
/* four small photos in one product row */
.four{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.four img.pic{aspect-ratio:4/3}
.row.solo{grid-template-columns:1fr}
.more > h2.big{font-size:clamp(34px,5.5vw,60px);letter-spacing:-.5px;text-transform:none;margin-bottom:8px}
/* a big statement at the foot of a page */
.statement{margin:60px 0 0}
.statement h2{font-size:clamp(34px,5.5vw,62px);margin-top:22px}
.statement .lead{max-width:60ch}
video.pic{display:block;width:100%;object-fit:cover;border-radius:14px;background:#000}
.map{display:block;width:100%;aspect-ratio:4/3;border:0;border-radius:12px;margin-top:10px}
/* the way home, at the foot of every page */
.homeback{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:40px 0 0;padding-top:16px;border-top:3px solid var(--purple)}
.homeback a{font-family:"Archivo Black",Arial,sans-serif;font-size:18px;color:var(--purple);text-decoration:none}
.homeback a:hover{text-decoration:underline}
/* nine in a block: three by three, to show the range in a small space */
.block{padding:26px 0;border-bottom:1px solid var(--rule)}
.block h3{font-size:30px}
.block .lead{font-size:20px;margin-top:8px}
.nine{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0 10px;max-width:760px}
.nine img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.nine figure{margin:0;position:relative}
.nine figcaption{position:absolute;left:6px;bottom:6px;right:6px;background:rgba(66,16,82,.85);color:#fff;font-size:12.5px;font-weight:700;padding:3px 7px;border-radius:6px}
@media print{.nine{gap:3px;max-width:none}.nine figcaption{font-size:7pt}}
/* the Snooze You Lose week: six day cards */
.snooze-h{font-family:"Archivo Black",Arial,sans-serif;font-size:20px;color:var(--purple);margin:22px 0 4px}
.snooze{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 6px}
.snooze img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.snooze-wrap{padding:0 0 26px;border-bottom:1px solid var(--rule)} .snooze-wrap .snooze{max-width:760px}
.row .snooze{grid-template-columns:repeat(2,1fr);gap:5px;margin:0}
.heartkick{display:flex;align-items:center;gap:12px}.heartkick img{width:52px;height:52px;object-fit:contain}
.col.two{grid-template-columns:1fr 1fr;align-items:start} @media (max-width:760px){.col.two{grid-template-columns:1fr}}
/* two columns that flow down: left first, then right, so a short story sits snug under the one above */
.col.two{display:block;column-count:2;column-gap:28px}
.col.two .item{break-inside:avoid;margin-bottom:34px;display:inline-block;width:100%}
@media (max-width:760px){.col.two{column-count:1}}
/* stories without a photo sit below the photographed ones and stretch across */
.col .item.wide{grid-column:1 / -1;border-top:1px solid var(--rule);padding-top:12px}
.col .item.wide h3{font-size:22px}
.col.pair{grid-template-columns:1fr 1fr} @media (max-width:760px){.col.pair{grid-template-columns:1fr}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:6px}.duo img.pic{aspect-ratio:3/4;object-fit:cover}
/* two explicit columns for stories of different heights */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.twocol .item{margin-bottom:34px}
@media (max-width:760px){.twocol{grid-template-columns:1fr}}
.hours{margin-top:14px;font-size:18px;line-height:1.6;background:#fff;border-left:8px solid var(--yellow);border-radius:10px;padding:12px 18px;max-width:420px}
/* everything we make: a list grouped by kind */
.makelist{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px;margin-top:18px}
.makelist h4{font-family:"Archivo Black",Arial,sans-serif;color:var(--purple);font-size:17px;margin:0 0 4px}
.makelist p{margin:0;font-size:15.5px;line-height:1.55}
@media (max-width:760px){.makelist{grid-template-columns:1fr}}

/* the better way: the question in yellow, the answer in purple */
.bw-q{background:var(--yellow);border-radius:20px;padding:24px 30px 22px;margin-top:22px}
.bw-q .kicker{font-size:14px;letter-spacing:5px;font-weight:700;color:var(--purple);text-transform:uppercase;margin:0 0 6px}
.bw-q h1{font-size:clamp(28px,4vw,48px);color:var(--purple)}
.bw-q p{font-size:clamp(18px,2vw,24px);color:var(--purple);font-weight:600;margin:6px 0 0}
.bw-a{background:var(--purple);border-radius:20px;padding:20px 30px;margin-top:12px}
.bw-a .answer{font-family:"Archivo Black",Archivo,Arial,sans-serif;font-size:clamp(22px,3vw,36px);line-height:1.12;color:#fff}

/* the footer carries the numbers: tap to call on a phone */
footer{line-height:1.9}
footer a{color:var(--purple);font-weight:700;text-decoration:none;white-space:nowrap}
footer a:hover{text-decoration:underline}

/* a short highlighted promise inside a product block */
.flatpack b{color:var(--purple)}
.flatpack{position:relative;margin:16px 0 4px;font-size:18px;line-height:1.5;background:#fff;border-radius:10px;padding:12px 18px 12px 46px;max-width:640px}
.flatpack::before{content:"";position:absolute;left:17px;top:18px;width:17px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23421052' d='M12 21.6 10.3 20C4.2 14.5 0 10.7 0 6.1 0 2.6 2.7 0 6.2 0c2 0 3.9.9 5.8 2.9C13.9.9 15.8 0 17.8 0 21.3 0 24 2.6 24 6.1c0 4.6-4.2 8.4-10.3 13.9z'/%3E%3C/svg%3E") center/contain no-repeat;animation:packbeat 2.4s ease-in-out infinite}
@keyframes packbeat{0%,60%,100%{transform:scale(1)}8%{transform:scale(1.28)}16%{transform:scale(1)}24%{transform:scale(1.15)}32%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.flatpack::before{animation:none}}
a.flatpack{display:block;color:inherit;text-decoration:none}
a.flatpack:hover{box-shadow:0 0 0 2px var(--purple)}
.packgo{color:var(--purple);font-weight:800;white-space:nowrap}

/* the enquiry forms: a submit lands on thank-you.html, which Analytics counts as a lead */
.enq{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-width:760px;margin-top:18px;background:#fff;border-radius:16px;padding:22px}
.enq label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--purple);font-size:17px}
.enq .wide{grid-column:1/-1}
.enq input,.enq select,.enq textarea{font:inherit;font-weight:400;color:var(--ink);border:2px solid #d9cfe0;border-radius:10px;padding:10px 12px;background:#fff}
.enq input:focus,.enq select:focus,.enq textarea:focus{outline:none;border-color:var(--purple)}
.enq .opt{font-weight:400;color:#6b5a75}
.enq button{justify-self:start;border:0;cursor:pointer}
.enq .hp{display:none}
@media (max-width:640px){.enq{grid-template-columns:1fr;padding:16px}}

/* the quote buttons glide down to the form */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* three photos side by side, each named: Start your own business shows the three kinds of business */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.three figure{margin:0;position:relative}
.three img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;background:#efe8d8}
.three figcaption{position:absolute;left:8px;bottom:8px;right:8px;background:rgba(66,16,82,.88);color:#fff;font-weight:800;font-size:15px;padding:5px 9px;border-radius:8px;text-align:center}
@media (max-width:640px){.three{gap:6px}.three figcaption{font-size:12px;padding:3px 5px;left:4px;right:4px;bottom:4px}}

/* a tick-box line in a form: box and words side by side */
.enq .tick{flex-direction:row;align-items:flex-start;gap:10px;font-weight:600;font-size:16px}
.enq .tick input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--purple)}
/* the cell-signal apology on Visit: the flat-pack heart line, not a link itself (Stewart, 2026-10-11) */
.signal a{color:var(--purple);font-weight:600}
/* Made with our wood: one card per maker, photo on top, a tap goes straight to the maker (Stewart, 2026-10-12) */
.makers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.maker{background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.maker img,.maker .nopic{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#efe8d8}
.maker .nopic{display:grid;place-items:center;color:var(--purple);font-weight:700;font-size:15px;border:2px dashed var(--purple);border-radius:16px 16px 0 0;box-sizing:border-box}
.maker .in{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.maker h3{font-size:22px}
.maker p{margin:0;font-size:16px}
.maker .since{font-size:14px;color:#5b4a66}
.maker .go{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.maker .go .act{font-size:16px;padding:9px 14px}
.maker .go .act.ghost{padding:6px 11px}
@media (max-width:900px){.makers{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.makers{grid-template-columns:1fr}}
/* Beneficiaries: the circle, and who qualifies (Stewart, 2026-10-13) */
.circle-wrap{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:30px;align-items:center;margin-top:8px}
.circle-wrap svg{width:100%;height:auto;display:block}
.quals{counter-reset:q;list-style:none;padding:0;margin:8px 0 0;display:grid;gap:12px;max-width:760px}
.quals li{counter-increment:q;position:relative;background:#fff;border-radius:14px;padding:14px 18px 14px 64px;font-size:18px}
.quals li::before{content:counter(q);position:absolute;left:16px;top:12px;width:34px;height:34px;border-radius:50%;background:var(--purple);color:#fff;font-family:"Archivo Black",Arial,sans-serif;font-size:18px;display:grid;place-items:center}
.quals li b{color:var(--purple)}
.prize{margin:18px 0 0;background:var(--yellow);border-radius:16px;padding:18px 22px;max-width:760px;font-size:19px;font-weight:600;color:var(--purple)}
.maker.wide{max-width:520px}
@media (max-width:760px){.circle-wrap{grid-template-columns:1fr}.circle-wrap svg{max-width:300px;margin:0 auto}}
/* Partner with us: you give, you get back, side by side */
.give{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:6px 0 18px}
.give h3{font-size:22px}
.give ul{margin:8px 0 0;padding-left:20px}
.give li{font-size:16px;margin:6px 0}
@media (max-width:760px){.give{grid-template-columns:1fr;gap:12px}}

/* the phone menu: three lines, open to a full-screen list (Stewart, 2026-10-16) */
.navtoggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.burger,.navclose{display:none}
@media (max-width:760px){
  .burger{display:inline-flex;align-items:center;gap:12px;margin-left:auto;cursor:pointer;color:var(--purple);font-weight:700;font-size:17px;padding:10px 14px;border:3px solid var(--purple);border-radius:12px;background:#fff;-webkit-tap-highlight-color:transparent}
  .burger i{position:relative;display:block;width:24px;height:3px;border-radius:2px;background:var(--purple)}
  .burger i::before,.burger i::after{content:"";position:absolute;left:0;width:24px;height:3px;border-radius:2px;background:var(--purple)}
  .burger i::before{top:-8px} .burger i::after{top:8px}
  .menu{display:none}
  .navtoggle:checked ~ .menu,body:has(.navtoggle:checked) .menu{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;position:fixed;inset:0;z-index:60;background:var(--paper);padding:18px 24px 40px;overflow-y:auto;border:0}
  body:has(.navtoggle:checked){overflow:hidden}
  .menu .navclose{display:block;align-self:flex-end;cursor:pointer;color:var(--purple);font-weight:700;font-size:17px;padding:10px 14px;border:3px solid var(--purple);border-radius:12px;margin-bottom:10px}
  .menu a,.menu a.here{font-size:21px;padding:14px 0;border-bottom:1px solid rgba(66,16,82,.15)}
  .menu a.here{font-weight:800}
  .menu a.join{margin-top:16px;text-align:center;padding:14px;border-radius:12px;border:0}
}
@media print{.burger,.navtoggle,.navclose{display:none}}
/* the next Saturday workshop, with its date (Stewart, 2026-10-16) */
.nextws{background:#fff;border:3px solid var(--purple);border-radius:16px;padding:20px 24px 24px;margin:24px 0 0;max-width:760px}
.nextws .kicker{margin-top:0}
.nextws h3{font-size:clamp(24px,3vw,32px);color:var(--purple);margin:0 0 8px}

/* A better way: nine tiles, the B word big, tap to open (2026-10-16) */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.way{background:#fff;border:2px solid #e6dcea;border-top:12px solid var(--purple);border-radius:16px;overflow:hidden}
.way.red{border-top-color:var(--red)} .way.yellow{border-top-color:var(--yellow)} .way.green{border-top-color:var(--green)} .way.blue{border-top-color:var(--blue)}
.way summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:16px 20px 18px;min-height:190px;box-sizing:border-box}
.way summary::-webkit-details-marker{display:none}
.way .no{font-weight:800;font-size:14px;letter-spacing:3px;color:var(--purple)}
.way .word{font-family:"Archivo Black",Arial,sans-serif;font-size:clamp(34px,3vw,40px);line-height:1;color:var(--purple)}
.way.red .word{color:var(--red)} .way.yellow .word{color:#a88f00} .way.green .word{color:#4f8a14} .way.blue .word{color:#1d7fb0}
.way .says{font-size:17px;font-style:italic;line-height:1.4;color:var(--ink)}
.way .open{margin-top:auto;font-weight:700;font-size:15px;color:var(--purple)}
.way .open::after{content:" +"}
.way[open] .open::after{content:" \2212"}
.way[open]{grid-column:1/-1}
.way[open] summary{min-height:0}
.way .inner{padding:0 20px 22px}
.way .inner h3{font-size:clamp(22px,2.6vw,30px);margin:4px 0 8px}
@media (max-width:900px){.ways{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ways{grid-template-columns:1fr}.way summary{min-height:0}}
.way .cta{margin-top:auto;padding-top:8px}
.way .cta .act{font-size:16px;padding:10px 16px}
.way .open{margin-top:6px}
.way:not([open]) summary{height:100%}