/* Subpages on the homepage design. Builds on home.css, home-app.css and home-sections.css; only what the homepage lacks lives here. */

/* hero */
.page-hero .hero-wrap{padding-bottom:clamp(48px,6vw,88px)}
.page-hero .hero-copy{max-width:860px}
.page-hero .hero-title{text-wrap:balance}
.page-hero .hero-lead{max-width:640px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:rgba(255,255,250,.6)}
.crumbs a{color:rgba(255,255,250,.84);text-decoration:underline;text-decoration-color:rgba(255,255,250,.3);text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
.crumbs a:hover{color:var(--paper);text-decoration-color:var(--paper)}

/* heading beside text */
.duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.duo+.duo{margin-top:clamp(56px,7vw,96px)}
@media (max-width:900px){.duo{grid-template-columns:minmax(0,1fr)}}
.prose{display:flex;flex-direction:column;gap:16px;font-size:clamp(16px,1.3vw,17px);line-height:1.65;font-weight:500;color:var(--muted);text-wrap:pretty}
.prose p,.prose ul{margin:0}
.prose ul{padding-left:20px;display:flex;flex-direction:column;gap:8px}
.prose strong{font-weight:800;color:var(--ink)}
.prose .note{margin-top:4px}

/* cards in threes */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.g3>*{min-width:0}
@media (max-width:1060px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g3{grid-template-columns:minmax(0,1fr)}}

/* numbered steps */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:step}
.steps li{counter-increment:step;display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius-md);background:var(--card);box-shadow:0 0 0 1px var(--line);font-size:15.5px;line-height:1.55;font-weight:600;color:var(--ink-3)}
.steps li::before{content:counter(step);flex:none;width:32px;height:32px;margin-top:-4px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:var(--cta);font-size:14px;font-weight:800}

/* comparison tables */
.cmp-wrap{border-radius:var(--radius-lg);overflow:clip;box-shadow:0 0 0 1px var(--line-2)}
.cmp{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
.cmp th,.cmp td{padding:14px 18px;text-align:left;vertical-align:middle}
.cmp thead th{background:var(--green);color:var(--paper);font-size:14.5px;font-weight:800}
.cmp thead small{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:rgba(255,255,250,.66)}
.cmp thead .is-pick small{color:var(--cta)}
.cmp tbody tr{background:var(--paper);box-shadow:inset 0 1px 0 var(--line)}
.cmp tbody th{font-weight:700;color:var(--ink)}
.cmp tbody td{font-weight:600;color:var(--muted)}
.cmp .grp th{background:var(--card);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.cmp .mark{text-align:center;width:16%}
.cmp .mark svg{margin-inline:auto}
.cmp .no{display:block;width:14px;height:2px;margin-inline:auto;border-radius:2px;background:var(--line-4)}
@media (max-width:700px){
  .cmp{table-layout:fixed;font-size:13.5px}
  .cmp th,.cmp td{padding:12px 4px}
  .cmp th:first-child{padding-left:14px;padding-right:8px}
  .cmp tbody th{overflow-wrap:anywhere}
  .cmp thead th{font-size:11.5px}
  .cmp thead small{display:none}
  .cmp .mark{width:20%}
}

/* related links */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{height:44px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;background:var(--card);box-shadow:0 0 0 1px var(--line-2);font-size:14.5px;font-weight:800;color:var(--ink);transition:background .15s,box-shadow .15s}
.chips a:hover{background:var(--hover);box-shadow:0 0 0 1px var(--line-3);color:var(--ink)}
.chips svg{color:var(--green)}

/* legal text */
.legal{display:flex;flex-direction:column;gap:clamp(28px,3vw,40px);max-width:760px}
.legal section{display:flex;flex-direction:column;gap:10px}