/* Innovadata additions on top of the developer's design files (base/app/selection/
   checkout/portal.css stay as delivered, so they can be diffed against later
   deliveries). Tokens only from tokens.css; no new colours here. */

/* Design-system sample page (/kit). */
.kit-section{padding-block:var(--s12);border-top:var(--rule) solid var(--border)}
.kit-section:first-of-type{border-top:0}
.kit-section>h2{margin-bottom:var(--s6)}
.kit-grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kit-swatch{display:grid;gap:var(--s2)}
.kit-swatch span:first-child{display:block;height:72px;border-radius:var(--radius-panel);border:var(--rule) solid var(--border)}
.kit-swatch code{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.kit-row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.kit-type>*+*{margin-top:var(--s4)}
.kit-type .display{font-family:var(--font-display);font-size:var(--text-display);line-height:1.12;letter-spacing:-.025em;font-weight:700}
.kit-type .page{font-family:var(--font-display);font-size:var(--text-number);line-height:1.12;letter-spacing:-.025em;font-weight:700}
.kit-type .lead{font-size:var(--text-lead);font-weight:500}
.kit-type .small{font-size:var(--text-sm);color:var(--muted)}
.kit-type .mono{font-family:var(--font-mono);font-size:13px}
.kit-logo{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.kit-logo div{padding:var(--s8);border-radius:var(--radius-panel);border:var(--rule) solid var(--border)}
.kit-logo div.on-dark{background:var(--carbon);border-color:var(--carbon)}
.kit-logo img{width:184px;height:auto;display:block}
.kit-form{display:grid;gap:var(--s6);max-width:560px}
.kit-loader{display:flex;gap:var(--s4);align-items:center}
@media(max-width:767px){.kit-type .display{font-size:40px}}

/* The delivered .data-table fixes four column widths (24/34/22/20 %), which
   squeezes any fifth column to one letter. Tables with another shape opt in. */
.data-table--auto{table-layout:auto}
.data-table--auto th:nth-child(n){width:auto}

/* .field>legend is bold in app.css; a legend inside .field>fieldset matches it. */
.field fieldset>legend{font-weight:500;padding:0;margin-bottom:var(--s2)}

/* ---------- Home (step 3) ---------- */
.hero-points{list-style:none;margin:0;padding:0;--od-gap:var(--s2) var(--s6)}
.hero-points li{display:inline-flex;align-items:center;gap:var(--s2);font-weight:500}
.hero-points svg{width:var(--s4);height:var(--s4);flex:none}
.panel-summary{--od-gap:var(--s1)}
.panel-summary strong{font-family:var(--font-display);font-size:var(--text-section);line-height:1.15;font-weight:700}
.panel-summary span{color:var(--muted);font-size:var(--text-sm)}
.panel-alt{border-top:var(--rule) solid var(--border);padding-top:var(--s4);color:var(--muted)}
.panel-alt a{color:var(--carbon);font-weight:500}

.country-grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:var(--s12)}
.country-card{position:relative;display:flex;flex-direction:column;gap:var(--s4);min-width:0;padding:var(--s6);background:var(--surface);border:var(--rule) solid var(--border);border-radius:var(--radius-panel)}
.country-card::after{content:"";position:absolute;bottom:0;left:0;width:var(--s3);height:var(--s3);background:var(--lime);clip-path:polygon(0 0,100% 100%,0 100%);border-bottom-left-radius:var(--radius-panel)}
.country-head{display:grid;gap:var(--s1)}
.country-head h3{font-size:var(--text-lead)}
.country-source{font-size:var(--text-sm);color:var(--muted)}
.country-count{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.country-count [data-count]{font-family:var(--font-display);font-size:var(--text-number);line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}
.country-count span:last-child{color:var(--muted)}
.country-cov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:0;padding-block:var(--s3);border-block:var(--rule) solid var(--border)}
.country-cov div{display:grid;gap:2px}
.country-cov dt{font-size:var(--text-sm);color:var(--muted)}
.country-cov dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.country-price{font-weight:500}
.country-card .app-button{width:100%}
.country-links{display:flex;flex-wrap:wrap;gap:0 var(--s6)}
.country-links .text-link{font-size:var(--text-sm)}
.country-fields{margin-top:auto}
.country-fields summary{font-size:var(--text-sm);font-weight:500;min-height:44px;display:flex;align-items:center}
.country-fields p{font-size:var(--text-sm);color:var(--muted)}
.countries-note{margin-top:var(--s6)}

.price-grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:var(--s12)}
.price-group{display:grid;gap:var(--s2);padding-top:var(--s6);border-top:var(--rule) solid var(--control-rule)}
.price-group strong{font-family:var(--font-display);font-size:var(--text-number);line-height:1.1;font-weight:700}
.price-group span{color:var(--muted)}
.price-terms{display:grid;gap:var(--s6);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s12)}
.price-terms div{display:grid;gap:var(--s2)}
.price-terms strong{font-weight:500}
.price-terms p{color:var(--muted)}
.section-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s12)}

.monitor-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s16);align-items:start}
.monitor-prices{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.monitor-prices li{display:flex;justify-content:space-between;gap:var(--s4);padding-block:var(--s2);border-bottom:var(--rule) solid var(--border)}
.monitor-prices li span:last-child{font-weight:500;font-variant-numeric:tabular-nums}
.monitor-example{position:relative;background:var(--surface);border:var(--rule) solid var(--border);border-radius:var(--radius-panel);padding:var(--s6);display:grid;gap:var(--s4)}
.monitor-example header{display:grid;gap:var(--s1)}
.monitor-example header span{font-size:var(--text-sm);color:var(--muted)}
.monitor-example ul{list-style:none;margin:0;padding:0;display:grid}
.monitor-example li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:baseline;padding-block:var(--s3);border-top:var(--rule) solid var(--border)}
.monitor-tag{font-size:13px;font-weight:500;padding:2px var(--s2);background:var(--lime);border-radius:var(--radius-control)}
.monitor-example footer{font-size:var(--text-sm);color:var(--muted)}

.example-request{margin-top:var(--s8);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;gap:var(--s8);padding-top:var(--s8);border-top:var(--rule) solid var(--border)}
.example-request blockquote{margin:0;font-size:var(--text-lead);font-weight:500}
.example-request small{display:block;margin-top:var(--s2);color:var(--muted)}

@media(max-width:1023px){
  .price-terms{grid-template-columns:1fr}
  .monitor-grid{grid-template-columns:1fr;gap:var(--s8)}
  .example-request{grid-template-columns:1fr;gap:var(--s4)}
}
@media(max-width:479px){.country-card{padding:var(--s4)}.country-count [data-count]{font-size:var(--text-section)}}

/* Hero: the most readable version of the developer's hero. Lead in Carbon, a
   short measure, the panel hint as plain body text. */
.hero .hero-lead{color:var(--carbon);max-width:44ch;line-height:1.5}
.hero .purchase-hint{color:var(--carbon);min-height:1.5em}
.hero .purchase-assurance{color:var(--muted)}

/* Font trial (2026-10-05). Default headings stay Onest (owner). For comparison:
   ?font=dc   the supplied Data Corner A (special O, D and digits 0 6 8 9)
   ?font=dcd  Markus's variant: Data Corner with Onest's D and d, O and digits kept.
   See /font-test. */
@font-face{font-family:DataCorner;src:url('../fonts/datacorner-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:DataCornerD;src:url('../fonts/datacorner-d-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
html[data-font="dc"]{--font-display:DataCorner,Plex,system-ui,sans-serif}
html[data-font="dcd"]{--font-display:DataCornerD,Plex,system-ui,sans-serif}
.font-test{display:grid;gap:var(--s12)}
.font-test section{display:grid;gap:var(--s4);padding-top:var(--s8);border-top:var(--rule) solid var(--border)}
.font-test .ft-label{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);align-items:baseline}
.font-test .ft-label strong{font-size:var(--text-lead);font-weight:500}
.font-test .ft-h1{font-size:var(--text-display);line-height:1.12;letter-spacing:-.025em;font-weight:700}
.font-test .ft-sub{font-size:var(--text-number);line-height:1.15;letter-spacing:-.02em;font-weight:700}
@media(max-width:767px){.font-test .ft-h1{font-size:40px}.font-test .ft-sub{font-size:28px}}

/* Phone: the country panel (the primary action) right after the lead, the help
   line after it; on a phone the panel used to start below the first screen. */
@media(max-width:767px){
  .hero .hero-copy{display:contents}
  .hero #hero-title{order:1}
  .hero .hero-lead{order:2}
  .hero .purchase-panel{order:3}
  .hero .hero-support{order:4}
}
.hero .panel-sample{font-size:var(--text-sm)}