/* ---------- generic hero without the product screen ---------- */
.hero.lite{padding:92px 0 0}
.hero.lite h1{max-width:20ch}
.badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:42px}
.badges span{font-family:'Sora';font-size:12.5px;font-weight:600;color:#D7CFC8;border:1px solid var(--line2);
 border-radius:999px;padding:8px 15px;background:rgba(255,255,255,.04);display:inline-flex;align-items:center;gap:8px}
.badges span i{width:6px;height:6px;border-radius:50%;background:var(--red);display:block;font-style:normal}
.herofig{margin:52px auto 0;max-width:960px}

/* ---------- big three-up figure band ---------- */
.bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
/* when the stats are the first thing in a band there is no heading for them to clear,
   and the margin just stacks onto the hero's padding and the band's own */
.wrap > .bigstats:first-child{margin-top:0}
.bigstat{border:1px solid var(--line2);border-radius:18px;padding:28px 26px;background:rgba(255,255,255,.04)}
.bigstat b{display:block;font-family:'Sora';font-weight:800;font-size:clamp(28px,3.4vw,40px);color:#fff;line-height:1.05;
 letter-spacing:-.02em}
.bigstat em{display:block;font-style:normal;font-family:'Sora';font-size:12px;letter-spacing:.14em;text-transform:uppercase;
 color:#FF8A6B;font-weight:700;margin-top:10px}
.bigstat p{font-size:13.8px;color:var(--muted);margin-top:10px;line-height:1.6}
@media(max-width:860px){.bigstats{grid-template-columns:1fr}}

/* ---------- numbered steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;position:relative}
.steps.three{grid-template-columns:repeat(3,1fr)}
.step{background:var(--l-card);border:1px solid var(--l-line);border-radius:16px;padding:24px 22px;position:relative}
.step b{font-family:'Sora';font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#C62F34}
.step h5{font-family:'Sora';font-size:16.5px;font-weight:600;color:var(--l-ink);margin:12px 0 9px;line-height:1.3}
.step p{font-size:13.8px;color:var(--l-muted);line-height:1.6}
.step .sn{position:absolute;right:18px;top:14px;font-family:'Sora';font-weight:800;font-size:40px;
 color:var(--l-ink);opacity:.07;line-height:1}
@media(max-width:1000px){.steps,.steps.three{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps,.steps.three{grid-template-columns:1fr}}

/* ---------- comparison matrix ---------- */
.mxwrap{margin-top:38px;overflow-x:auto;border:1px solid var(--l-line);border-radius:16px;background:var(--l-card)}
.mx{width:100%;border-collapse:collapse;min-width:720px;font-size:14px}
.mx th,.mx td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--l-line);vertical-align:middle}
.mx thead th{position:sticky;top:0;background:#EFEAE6;font-family:'Sora';font-size:13px;font-weight:700;
 color:var(--l-ink);white-space:nowrap;z-index:2}
.mx thead th span{display:block;font-family:'Inter';font-size:11.5px;font-weight:400;color:var(--l-muted);margin-top:2px}
.mx tbody th{font-weight:400;color:var(--l-ink);width:44%}
.mx td{text-align:center;width:18.6%;color:var(--l-muted)}
.mx tr.grp th{background:#F7F3F0;font-family:'Sora';font-size:11.5px;font-weight:700;letter-spacing:.13em;
 text-transform:uppercase;color:#8b8079}
.mx tr.grp td{background:#F7F3F0}
.mx .y{color:#2E8B57;font-weight:700}
.mx .n{color:#c9c0b9}
.mx .ad{font-family:'Sora';font-size:11px;font-weight:700;color:#B67816;background:#FCEFD9;border-radius:999px;
 padding:4px 9px;display:inline-block}
.mx tr:last-child td,.mx tr:last-child th{border-bottom:0}
.mx .pr{font-family:'Sora';font-weight:700;color:var(--l-ink);font-size:15px}
.mx .pr span{display:block;font-family:'Inter';font-size:11px;font-weight:400;color:var(--l-muted)}
.mxnote{font-size:12.5px;color:var(--l-muted);margin-top:14px;text-align:center}

/* ---------- price cards ---------- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px;align-items:start}
.pc{position:relative;background:var(--l-card);border:1px solid var(--l-line);border-radius:20px;padding:28px 26px;
 transition:transform .22s,box-shadow .22s}
.pc:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(40,28,24,.5)}
.pc.hot{border-color:rgba(228,58,63,.4);box-shadow:0 26px 60px -34px rgba(228,58,63,.5)}
.pc .rib{position:absolute;top:-11px;left:26px;font-family:'Sora';font-size:10.5px;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#F0484D,#E43A3F);border-radius:999px;padding:5px 12px}
.pc .tn{font-family:'Sora';font-size:20px;font-weight:700;color:var(--l-ink);display:flex;align-items:center;gap:9px}
.pc .tn i{width:10px;height:10px;border-radius:3px;background:var(--t,#E43A3F);font-style:normal;flex:none}
.pc .fit{font-size:13.5px;color:var(--l-muted);margin-top:8px;min-height:42px;line-height:1.5}
.pc .amt{font-family:'Sora';font-weight:800;font-size:36px;color:var(--l-ink);margin-top:16px;letter-spacing:-.02em;
 display:flex;align-items:baseline;gap:7px}
.pc .amt small{font-family:'Inter';font-size:12.5px;font-weight:500;color:var(--l-muted);letter-spacing:0}
.pc .amt .from{font-size:13px;font-weight:600;color:var(--l-muted);font-family:'Inter'}
.pc ul{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--l-line)}
.pc li{position:relative;padding-left:24px;font-size:13.8px;color:#5f5850;line-height:1.55;margin-bottom:11px}
.pc li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:8px;border-left:2px solid var(--t,#E43A3F);
 border-bottom:2px solid var(--t,#E43A3F);transform:rotate(-45deg)}
.pc .go{margin-top:22px;display:block;text-align:center}
@media(max-width:980px){.pcards{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}

/* ---------- assurance / control grid ---------- */
.assur{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:38px}
.as{display:flex;gap:16px;background:var(--l-card);border:1px solid var(--l-line);border-radius:16px;padding:22px}
.as .ai{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:#FCE9E8;
 color:#C62F34;border:1px solid #F6DAD9}
.as .ai svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.as h5{font-family:'Sora';font-size:15.5px;font-weight:600;color:var(--l-ink);margin-bottom:7px;line-height:1.3}
.as p{font-size:13.6px;color:var(--l-muted);line-height:1.6}
@media(max-width:820px){.assur{grid-template-columns:1fr}}

/* ---------- category grid (integrations) ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.cat{background:var(--l-card);border:1px solid var(--l-line);border-radius:16px;padding:24px 22px;transition:.2s}
.cat:hover{box-shadow:0 24px 48px -32px rgba(40,28,24,.5)}
.cat .ci{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#FCE9E8;color:#C62F34;
 border:1px solid #F6DAD9;margin-bottom:14px}
.cat .ci svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.cat b{display:block;font-family:'Sora';font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 color:#B24A2E;margin-bottom:8px}
.cat h5{font-family:'Sora';font-size:16px;font-weight:600;color:var(--l-ink);margin-bottom:9px;line-height:1.3}
.cat p{font-size:13.6px;color:var(--l-muted);line-height:1.6}
@media(max-width:900px){.cats{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cats{grid-template-columns:1fr}}

/* ---------- numbered belief blocks (about) ---------- */
.beliefs{max-width:880px;margin:44px auto 0}
.bel{display:grid;grid-template-columns:110px 1fr;gap:28px;padding:32px 0;border-top:1px solid var(--line2)}
.bel:first-child{border-top:0;padding-top:0}
.bel .bn{font-family:'Sora';font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FF8A6B;
 padding-top:6px}
.bel h4{font-size:clamp(21px,2.5vw,27px);font-weight:700;line-height:1.25;margin-bottom:12px}
.bel p{font-size:16px;color:var(--muted);line-height:1.7}
@media(max-width:760px){.bel{grid-template-columns:1fr;gap:10px}}

/* ---------- tier accent hero ---------- */
.hero.tier .eyebrow.red{color:var(--t,#FF7A5C)}
.hero.tier h1 .acc{background:none;color:var(--t,#E43A3F);-webkit-text-fill-color:var(--t,#E43A3F)}
.tierglow{position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(1100px 620px at 50% -12%,var(--tGlow,rgba(232,62,66,.28)),transparent 62%)}
.tierstrip{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.tierstrip a{font-family:'Sora';font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line2);
 border-radius:999px;padding:9px 17px;transition:.16s}
.tierstrip a:hover{color:var(--ink);border-color:var(--ink)}
.tierstrip a.on{color:#fff;background:var(--t,#E43A3F);border-color:transparent}

/* ---------- two-column checklist ---------- */
.boxlist{display:grid;grid-template-columns:1fr 1fr;gap:10px 34px;margin-top:34px}
.boxlist div{position:relative;padding-left:28px;font-size:14.6px;color:#5f5850;line-height:1.6;
 padding-bottom:11px;border-bottom:1px solid var(--l-line)}
.boxlist div::before{content:"";position:absolute;left:2px;top:7px;width:13px;height:8px;
 border-left:2px solid var(--t,#C62F34);border-bottom:2px solid var(--t,#C62F34);transform:rotate(-45deg)}
@media(max-width:820px){.boxlist{grid-template-columns:1fr}}

/* ---------- fit / recommendation columns ---------- */
.fitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.fitc{border:1px solid var(--l-line);border-radius:16px;background:var(--l-card);padding:24px 22px}
.fitc .ft{font-family:'Sora';font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 color:#fff;background:var(--t,#E43A3F);border-radius:999px;padding:4px 11px;display:inline-block}
.fitc h5{font-family:'Sora';font-size:17px;font-weight:700;color:var(--l-ink);margin:14px 0 10px}
.fitc p{font-size:13.8px;color:var(--l-muted);line-height:1.6;margin-bottom:9px}
.fitc p b{color:var(--l-ink);font-weight:600}
@media(max-width:900px){.fitgrid{grid-template-columns:1fr}}

/* ---------- PSG / promo band ---------- */
.prules{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.prules div{border:1px solid var(--l-line);border-radius:14px;padding:20px 22px;background:#FBF8F6;
 font-size:13.8px;color:#5F5850;line-height:1.65}
.prules b{display:block;font-family:'Sora';font-size:14.5px;color:var(--l-ink);margin-bottom:6px}
@media(max-width:820px){.prules{grid-template-columns:1fr}}

.light .promo{border-color:var(--l-line);background:var(--l-card)}
.light .promo h4{color:var(--l-ink)}
.light .promo p{color:var(--l-muted)}
.light .promo .pflag{background:#F4F0EC;border-color:var(--l-line)}
.promo{border:1px solid var(--line2);border-radius:22px;padding:34px 36px;margin-top:48px;display:flex;
 gap:30px;align-items:center;flex-wrap:wrap;
 background:radial-gradient(700px 300px at 8% 0,rgba(228,58,63,.22),transparent 60%),rgba(255,255,255,.04)}
.promo .pflag{font-size:34px;line-height:1;flex:none}
.promo .ptx{flex:1 1 340px}
.promo h4{font-size:22px;font-weight:700;margin-bottom:9px}
.promo p{font-size:14.5px;color:var(--muted);line-height:1.62;max-width:62ch}
.promolink{font-family:'Sora';font-size:14px;font-weight:600;color:#FF8A6B;white-space:nowrap;flex:none}
.promolink:hover{color:var(--ink)}
/* The promo band is usually the last thing in its section, so the section's own bottom
   padding gave it room. On the compare page the FAQ heading follows it inside the same
   section, and with no bottom margin the two were almost touching. */
.promo + *{margin-top:64px}

/* ---------- five-step variant ----------
   .steps is repeat(4,1fr); the corrected process has five stages. */
.steps.five{grid-template-columns:repeat(5,1fr);gap:14px}
.steps.five .step{padding:22px 18px}
.steps.five .step .sn{font-size:34px;right:14px}
@media(max-width:1180px){.steps.five{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(max-width:860px){.steps.five{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps.five{grid-template-columns:1fr}}

/* ---------- eligibility checklist ---------- */
.eligible{list-style:none;margin:30px 0 0;padding:0;max-width:820px;
 display:grid;gap:10px}
.eligible li{position:relative;padding:14px 18px 14px 46px;
 background:var(--l-card);border:1px solid var(--l-line);border-radius:12px;
 font-size:15px;line-height:1.55;color:var(--l-ink)}
.eligible li::before{content:"";position:absolute;left:19px;top:21px;
 width:11px;height:6px;border-left:2px solid #C62F34;border-bottom:2px solid #C62F34;
 transform:rotate(-45deg)}
.eligible li b{font-weight:700}
.eligible li em{font-style:normal;font-weight:600}
.elignote{margin-top:18px;max-width:820px;font-size:14px;line-height:1.6;
 color:var(--l-muted)}

/* =====================================================================
   EDGE grant page additions (template-edge-grant.php)
   ===================================================================== */
.bigstats.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.bigstats.four{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bigstats.four{grid-template-columns:1fr}}
.edge-fine{max-width:860px;margin:26px auto 0;text-align:center;font-size:14px;line-height:1.65;color:var(--muted)}
.edge-numbers{padding-top:72px}

.edge-2col{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.edge-2col .eligible{margin-top:12px;max-width:none}
.edge-colh{font-family:'Sora';font-size:15px;font-weight:700;color:var(--l-ink)}
.eligible.edge-no li::before{left:20px;top:17px;width:12px;height:12px;border:0;transform:none;
 background:linear-gradient(45deg,transparent 44%,#9A8F88 44%,#9A8F88 56%,transparent 56%),
 linear-gradient(-45deg,transparent 44%,#9A8F88 44%,#9A8F88 56%,transparent 56%)}
@media(max-width:820px){.edge-2col{grid-template-columns:1fr}}
.elignote.edge-warn{max-width:none;margin-top:24px;background:#FCECEA;border:1px solid #F3C9C3;border-radius:12px;
 padding:16px 20px;color:#7A2E28}
.elignote.edge-warn b{color:#C62F34}

/* the IMDA lockup: link target and wording are fixed by IMDA, see the template header */
.edge-lock{display:flex;gap:40px;align-items:center;flex-wrap:wrap;margin:36px auto 0;max-width:1000px;
 border:1px solid var(--line2);border-radius:22px;padding:34px 36px;background:rgba(255,255,255,.04)}
.edge-lockimg{flex:0 0 auto;display:block;max-width:100%}
/* white-on-transparent lockup artwork, for dark backgrounds */
.edge-lockimg img{display:block;width:100%;max-width:430px;height:auto}
.edge-locktx{flex:1 1 320px}
.edge-locktx h4{font-size:21px;font-weight:700;margin-bottom:10px}
.edge-locktx p{font-size:14.6px;color:var(--muted);line-height:1.62}
.edge-writeup{margin:16px 0 18px;border-left:2px solid var(--line2);padding-left:14px;color:#D7CFC8!important}
.edge-writeup b{color:var(--ink)}

.edge-quote{padding-top:24px}
.edge-side h2{font-size:clamp(28px,3.4vw,40px)!important;font-weight:800!important;line-height:1.12;margin:14px 0 18px!important}
.edge-sidep{font-size:16.5px;color:#D7CFC8;line-height:1.6}
.edge-ticks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.edge-ticks li{position:relative;padding-left:28px;font-size:15px;color:var(--ink)}
.edge-ticks li::before{content:"";position:absolute;left:3px;top:6px;width:11px;height:6px;
 border-left:2px solid #FF7A5C;border-bottom:2px solid #FF7A5C;transform:rotate(-45deg)}

.edge-src{padding:20px 0 90px}
.edge-src .wrap{max-width:900px;border-top:1px solid var(--line2);padding-top:30px}
.edge-srch{font-family:'Sora';font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.edge-src p{font-size:13px;color:var(--muted);line-height:1.65;margin-top:10px}
.edge-src a{color:#D7CFC8;text-decoration:underline;text-underline-offset:2px}

/* 4.27.2: line the cards and the steps up. Each card's icon, label, heading and text share
   rows with its neighbours (subgrid), so a heading that wraps to two lines
   pushes the text down in every card of that row, not just its own. Hover no
   longer lifts the card, which knocked it out of line with the others. */
@supports (grid-template-rows: subgrid) {
  .cats { grid-auto-rows: auto; row-gap: 16px; }
  .cat { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .cat > * { align-self: start; }
  /* Steps: the big number is absolutely placed, so label, heading, text = 3 rows. */
  .steps { grid-auto-rows: auto; }
  .step { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .step > * { align-self: start; }
}