/* ============================================================
   Beepings — Composants (dérivés des composants Figma :
   button, button-S, button-slide, mode, menu-header, menu-footer,
   icons, icons-extended, card-buy, card-list, FAQ, celda-1..6,
   ficha, Store download button, tag, info…)
   Toutes les cotes viennent du Figma (1920 px).
   ============================================================ */

/* ---- Icônes ----------------------------------------------------- */
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--solid { fill: currentColor; stroke: none; }
.icon--lg { width: 44px; height: 44px; stroke-width: 1.25; }
.icon--md { width: 30px; height: 30px; }
.icon--sm { width: 16px; height: 16px; }

/* ---- Boutons (Figma : button / button-S / button-slide) ----------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 45px; padding: 10px 20px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--fs-lg); font-weight: var(--fw-regular); line-height: var(--lh-normal);
  text-transform: uppercase; white-space: nowrap;
  background: var(--c-primary); color: var(--c-white);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--c-primary-600); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--md { font-size: var(--fs-md); }
.btn--white { background: var(--c-white); color: var(--c-primary); }
.btn--white:hover { background: #F2F8FC; }
.btn--white-text { background: var(--c-white); color: var(--c-text); }
.btn--white-text:hover { background: #F2F8FC; }
.btn--outline { background: transparent; color: var(--c-text); border-color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: var(--c-white); }
.btn--outline-white { background: transparent; color: var(--c-white); border-color: var(--c-white); }
.btn--outline-white:hover { background: var(--c-white); color: var(--c-text); }
.btn--dark { background: var(--c-text); color: var(--c-white); }
/* button-S : 36 px, 14 px, sans capitales */
.btn--sm { min-height: 36px; padding: 8px 20px; font-size: var(--fs-sm); text-transform: none; }
.btn--sm.btn--md { font-size: var(--fs-md); }
/* bouton lien (texte + flèche) */
.btn--link { min-height: 0; padding: 0; background: none; color: var(--c-primary); text-transform: none; text-decoration: underline; text-underline-offset: 3px; white-space: normal; }
.btn--link:hover { background: none; transform: none; color: var(--c-primary-600); }
/* bouton rond dégradé (support) */
.btn--round { width: 77px; height: 77px; min-height: 0; padding: 0; border-radius: 50%; background: var(--g-button); filter: drop-shadow(0 19px 13px rgba(0,0,0,.08)); }
.btn--round .icon { width: 45px; height: 45px; }
/* button-arrow : rond 30 px plein */
.btn--arrow { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; }
.btn--arrow .icon { width: 16px; height: 16px; }

.btn-group { display: flex; flex-wrap: wrap; gap: 20px; }
.btn-group--tight { gap: 10px; }

/* Puces de filtre (button-S outline) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 20px; border-radius: var(--r-md); border: 1px solid var(--c-primary); font-size: var(--fs-sm); color: var(--c-text); background: transparent; transition: all var(--t-fast); }
.chip:hover { background: var(--c-primary-100); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--c-primary); color: var(--c-white); }

/* Tags techniques (SIGFOX, LoRa…) — Figma : tag */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--c-text); border-radius: var(--r-md); font-size: var(--fs-xs); line-height: 1.4; }

/* Sélecteur Particuliers / Entreprises (Figma : mode + button-slide) */
.segmented { display: inline-flex; gap: 6px; padding: 4px; border: 1px solid currentColor; border-radius: var(--r-lg); }
.segmented__item { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-md); font-size: var(--fs-xs); line-height: 1.4; color: inherit; transition: all var(--t-fast); }
.segmented__item.is-active { background: var(--c-white); color: var(--c-primary); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-s); font-size: var(--fs-sm); line-height: 1.4; }
.badge--gold { background: var(--c-gold); color: var(--c-text); }
.badge--sage { background: var(--c-sage); color: var(--c-text); }
.badge--dark { background: var(--c-text); color: var(--c-white); font-size: var(--fs-xs); text-transform: uppercase; border-radius: var(--r-md); padding: 10px 20px; white-space: nowrap; }
.badge--sky { background: var(--c-primary-100); color: var(--c-primary); }

/* Note étoiles */
.rating { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-md); }
.rating__stars { display: inline-flex; gap: 0; color: currentColor; }
.rating__stars .icon { width: 16px; height: 16px; }
.rating__sep { width: 1px; height: 19px; background: currentColor; opacity: .7; }
.rating--lg .rating__stars { gap: 4px; }
.rating--lg .rating__stars .icon { width: 37px; height: 37px; }
.rating--gold .rating__stars { color: var(--c-gold); }

/* Icône + libellé (Figma : icons) */
.icon-label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: var(--fw-medium); text-transform: uppercase; }
.icon-label .icon { color: var(--c-primary); width: 20px; height: 20px; }
.icon-label-list { display: grid; gap: 20px; }
.icon-label-list > li + li { border-top: 1px solid var(--c-text); padding-top: 20px; }
.icon-label-list--row { display: flex; flex-wrap: wrap; gap: 20px 30px; }
.icon-label-list--row > li + li { border: 0; padding: 0; }

/* Liste à coches (Figma : Frame 65…69 + Line) */
.checklist { display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-md); line-height: 1.4; }
.checklist li + li { border-top: 1px solid var(--c-text); padding-top: 10px; }
.checklist .icon { color: var(--c-primary); width: 16px; height: 16px; margin-top: 3px; }
.checklist--arrow .icon { color: var(--c-text); }

/* ---- Barre promo (bandeau défilant) -------------------------------- */
.promo-bar { overflow: hidden; background: var(--c-white); color: var(--c-text); }
.promo-bar__track { display: flex; width: max-content; animation: promo-scroll 40s linear infinite; }
.promo-bar__track:hover { animation-play-state: paused; }
.promo-bar__item { display: inline-flex; align-items: center; gap: 36px; padding: 27px 18px 18px; font-size: var(--fs-lg); font-weight: var(--fw-medium); text-transform: uppercase; white-space: nowrap; }
.promo-bar__item .icon { width: 14px; height: 14px; color: var(--c-primary); }
@keyframes promo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-bar__track { animation: none; } }

/* ---- En-tête de site (Figma : Group 45 / mode / menu / espace) ------- */
.site-header { position: relative; z-index: 20; color: var(--c-white); }
.site-header--on-hero { position: absolute; inset: 0 auto auto 0; width: 100%; }
.site-header__inner { display: flex; align-items: center; gap: clamp(20px, 3vw, 55px); min-height: 113px; padding-block: 20px; }
.site-header__logo { color: inherit; display: block; width: 186px; }
.site-header__logo svg { width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav__item { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-md); text-transform: uppercase; white-space: nowrap; }
.nav__item .icon { width: 12px; height: 12px; }
.site-header__tools { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.site-header__tool { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-md); text-transform: uppercase; }
.site-header__tool .icon { width: 12px; height: 12px; }
.site-header .btn--outline-white { min-height: 38px; padding: 8px 20px; font-size: var(--fs-md); text-transform: none; }
@media (max-width: 1100px) { .nav, .site-header__tools { display: none; } }

/* ---- Piliers de réassurance (Figma : 4 blocs + Line 16) -------------- */
.pillars { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.pillar { display: grid; grid-template-columns: auto 1fr; column-gap: 27px; align-items: center; }
.pillar .icon--lg { grid-row: span 2; color: var(--c-primary); }
.pillar__title { font-size: var(--fs-lg); font-weight: var(--fw-medium); text-transform: uppercase; line-height: 1.2; }
.pillar__sub { font-size: var(--fs-lg); color: var(--c-primary); line-height: 1.2; }
.pillar__sep { width: 1px; height: 53px; background: var(--c-text); }

/* ---- Carte produit (Figma : card-buy, 460 px) ------------------------ */
.cards-row { display: grid; grid-template-columns: repeat(3, 460px); justify-content: space-between; gap: 30px; padding-top: 90px; }
.card-buy { position: relative; display: flex; flex-direction: column; height: 656px; border-radius: var(--r-md); background: var(--c-white); box-shadow: var(--shadow-card); }
.card-buy__media { position: relative; height: 300px; border-radius: var(--r-md); background: var(--g-primary); }
.card-buy__media img { position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 520px; transform: translateX(-50%) translateY(-12%) scale(1.15); transform-origin: bottom center; filter: drop-shadow(0 20px 30px rgba(0,0,0,.25)); }
.card-buy__body { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 14px; padding: 30px; }
.card-buy__head { display: grid; gap: 10px; }
.card-buy__eyebrow { font-size: var(--fs-sm); text-transform: uppercase; }
.card-buy__name { font-size: var(--fs-h1); font-weight: var(--fw-light); color: var(--c-primary); line-height: 1.15; }
.card-buy__desc { font-size: var(--fs-md); }
.card-buy__price { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1; }
.card-buy__meta { font-size: var(--fs-md); }
.card-buy__footer { display: grid; gap: 10px; justify-items: start; }
.card-buy__note { font-size: var(--fs-xs); }
.swatches { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.swatch { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.swatch::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--swatch, #39434A); border: 1px solid var(--c-grey); }
.swatch.is-active { border: 1px solid var(--c-primary); }
.swatch--white { --swatch: #fff; }
@media (max-width: 1500px) { .cards-row { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }

/* ---- Avis clients (Figma : Rectangle 39 + Ellipse 9 + Frame 98, 853×327) -- */
.reviews { display: flex; gap: 31px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 0 30px; scrollbar-width: none; }
.reviews::-webkit-scrollbar { display: none; }
.review { flex: 0 0 min(853px, 86vw); min-height: 327px; scroll-snap-align: start; padding: 39px 68px 40px 62px; border-radius: 55px; background: var(--c-sand); display: grid; grid-template-columns: 110px 1fr auto; column-gap: 24px; row-gap: 30px; align-items: center; }
.review__avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; }
.review__name { font-size: 26px; font-weight: var(--fw-light); line-height: 1.1; }
.review__product { font-size: var(--fs-xl); font-weight: var(--fw-light); color: var(--c-primary); text-transform: uppercase; }
.review__quote { grid-column: 1 / -1; font-size: var(--fs-xl); font-weight: var(--fw-light); line-height: 1.4; }

/* ---- Tuiles de fonctionnalités (Figma : icons-extended) --------------- */
.feature-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.feature-tile { display: grid; gap: 10px; align-content: start; padding: 20px; border: 1px solid currentColor; border-radius: var(--r-sm); }
.feature-tile .icon { width: 30px; height: 30px; }
.feature-tile__title { font-size: var(--fs-xl); font-weight: var(--fw-medium); text-transform: uppercase; line-height: 1.2; }
.feature-tile__text { font-size: var(--fs-lg); }

/* ---- Cartes « Pourquoi » / problématiques (bord fin sur beige) -------- */
.why-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.why-card { display: grid; gap: 14px; align-content: start; padding: 30px; border: 1px solid var(--c-text); border-radius: var(--r-sm); }
.why-card .icon { width: 28px; height: 28px; color: var(--c-primary); }
.why-card__title { font-size: var(--fs-lg); font-weight: var(--fw-medium); text-transform: uppercase; line-height: 1.3; }
.why-card__text { font-size: var(--fs-md); }
.why-card__text a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Panneau arrondi ---------------------------------------------------- */
.panel { border-radius: var(--r-xl); padding: 80px 120px; }
.panel--sand { background: var(--c-sand); }
.panel--sky { background: var(--c-primary-100); }
.panel--mist { background: var(--c-mist); }
.panel--top { border-radius: var(--r-xl) var(--r-xl) 0 0; }

/* ---- Bannière arrondie (quiz, B2B, Made in France) ---------------------- */
.banner { position: relative; overflow: hidden; border-radius: var(--r-xl); color: var(--c-white); isolation: isolate; min-height: 455px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 76px 116px; }
.banner__media { position: absolute; inset: 0; z-index: -2; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
.banner__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,25,30,.92) 20%, rgba(20,25,30,.55) 60%, rgba(20,25,30,.2) 100%); }
.banner__content { display: grid; gap: 20px; max-width: 760px; min-width: 0; }
.banner--blue .banner__shade { background: linear-gradient(90deg, rgba(0,144,214,.95) 30%, rgba(0,144,214,.35) 70%, rgba(0,144,214,0) 100%); }
.banner--light { color: var(--c-text); }
.banner--light .banner__shade { background: linear-gradient(90deg, rgba(223,229,229,0) 0%, rgba(223,229,229,.85) 40%, #DFE5E5 60%); }
.banner--light .banner__content { margin-left: auto; }

/* ---- Cartes histoires / cas d'usage ------------------------------------- */
.stories { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.story { position: relative; min-height: 664px; border-radius: var(--r-lg); overflow: hidden; color: var(--c-white); display: flex; align-items: flex-end; isolation: isolate; }
.story__media { position: absolute; inset: 0; z-index: -2; }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.75) 100%); }
.story__content { display: grid; gap: 14px; padding: 40px; }
.story__title { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: 1.2; }
.story__text { font-size: var(--fs-xl); }

/* ---- FAQ (Figma : FAQ / question / answer) ------------------------------ */
.faq { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--c-text); border-radius: var(--r-sm); }
.faq__q { display: flex; width: 100%; gap: 70px; align-items: center; justify-content: space-between; padding: 30px; text-align: left; font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.4; list-style: none; cursor: pointer; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { width: 20px; height: 20px; }
.faq__q .icon-minus { display: none; }
.faq__item[open] .faq__q .icon-plus { display: none; }
.faq__item[open] .faq__q .icon-minus { display: block; }
.faq__a { padding: 0 30px 30px; font-size: var(--fs-md); }

/* ---- Appel à l'action sur image + carte blanche --------------------------- */
.cta-visual { position: relative; min-height: 588px; border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; display: grid; align-items: center; isolation: isolate; }
.cta-visual__media { position: absolute; inset: 0; z-index: -1; }
.cta-visual__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-card { display: grid; gap: 20px; width: min(582px, 100%); padding: 60px; background: var(--c-white); border-radius: var(--r-md); }

/* ---- Pied de page (Figma : up / menu-footer / Frame 2) ------------------- */
.footer { background: var(--c-primary); color: var(--c-white); }
.footer__inner { display: flex; justify-content: space-between; gap: 60px; min-height: 252px; padding: 27px 0 60px; flex-wrap: wrap; }
.footer__brand { display: grid; gap: 30px; align-content: start; width: 223px; font-size: var(--fs-sm); }
.footer__brand svg { width: 141px; height: auto; }
.footer__cols { display: flex; gap: 113px; flex-wrap: wrap; }
.footer__col { display: grid; gap: 6px; align-content: start; font-size: var(--fs-sm); }
.footer__col strong { font-weight: var(--fw-bold); }
.footer__col a:hover { text-decoration: underline; }
.footer__bottom { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 60px; padding: 20px; background: var(--c-white); color: var(--c-text); font-size: var(--fs-sm); text-align: center; flex-wrap: wrap; }
.footer__bottom img { width: 16px; height: 16px; }

/* ---- Tableau comparatif (Figma : table / celda-1..4) ----------------------- */
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; min-width: 760px; border-radius: var(--r-md); overflow: hidden; font-size: var(--fs-md); border: 1px solid var(--c-grey); }
.compare th, .compare td { padding: 10px 20px; height: 44px; text-align: center; border: 1px solid var(--c-grey); vertical-align: middle; }
.compare th:first-child, .compare td:first-child { text-align: left; font-weight: var(--fw-bold); background: var(--c-mist); width: 25%; }
.compare thead th { font-weight: var(--fw-bold); }
.compare thead .th--primary { background: var(--c-primary); color: var(--c-white); }
.compare thead .th--accent { background: var(--c-terracotta); }
.compare .icon { width: 14px; height: 14px; margin-inline: auto; }
.compare-cta { display: grid; grid-template-columns: 25% 1fr 1fr 1fr; margin-top: 30px; min-width: 760px; }
.compare-cta > div { display: flex; justify-content: center; }

/* ---- Fiche technique (Figma : ficha / celda-6 / celda-3) ------------------ */
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.spec { border-radius: var(--r-s); overflow: hidden; font-size: var(--fs-sm); background: var(--c-white); }
.spec__head { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--c-primary); border: 1px solid var(--c-primary); color: var(--c-white); font-weight: var(--fw-medium); text-transform: uppercase; font-size: var(--fs-md); border-radius: var(--r-s) var(--r-s) 0 0; }
.spec__head .icon { width: 20px; height: 20px; }
.spec table { width: 100%; }
.spec td { padding: 10px 20px; border: 1px solid var(--c-text); vertical-align: top; }
.spec td:first-child { width: 170px; }
.spec td:last-child { font-weight: var(--fw-bold); }

/* ---- Cartes liste (Figma : card-list, 296 px) ----------------------------- */
.card-list { padding: 30px; border-radius: var(--r-sm); background: var(--c-sand); display: grid; gap: 30px; align-content: start; }
.card-list--mist { background: var(--c-mist); }
.card-list--white { background: var(--c-white); }
.card-list__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); }

/* ---- Offres d'abonnement (Figma : card-list 1 an / 2 ans / 3 ans) --------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.plans__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.plan { position: relative; display: grid; gap: 10px; align-content: center; justify-items: center; text-align: center; padding: 30px; border-radius: var(--r-md); background: var(--c-white); min-height: 266px; }
.plan--best { border: 1px solid var(--c-text); }
.plan__ribbon { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); }
.plan__duration { font-size: var(--fs-md); text-transform: uppercase; }
.plan__price { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1; }
.plan__per { font-size: var(--fs-sm); }

/* ---- Étapes d'installation (Figma : opciones / icons-extended) ------------ */
.steps { display: grid; gap: 15px; }
.step { display: grid; gap: 10px; }
.step + .step { border-top: 1px solid var(--c-text); padding-top: 15px; }
.step__title { font-size: var(--fs-md); font-weight: var(--fw-medium); text-transform: uppercase; }
.step__text { font-size: var(--fs-sm); }

/* ---- Point d'information (Figma : info / button-arrow) ---------------------- */
.info { display: inline-grid; gap: 10px; padding: 10px; border-radius: var(--r-s); background: var(--c-mist); }
.info__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-primary); }
.info__text { font-size: var(--fs-sm); max-width: 292px; }

/* ---- Badges stores (Figma : Store download button) -------------------------- */
.store-badges { display: flex; flex-wrap: wrap; gap: 16px; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; min-width: 193px; height: 64px; padding: 10px 14px; border: 1px solid #A6A6A6; border-radius: var(--r-xs); background: var(--c-black); color: var(--c-white); }
.store-badge svg { height: 36px; width: auto; }
.store-badge__text { display: grid; line-height: 1; }
.store-badge__text small { font-size: 11px; text-transform: uppercase; }
.store-badge__text strong { font-size: 22px; font-weight: var(--fw-medium); letter-spacing: -0.02em; }

/* ---- Fenêtre modale (page Moto, état « C'est moi ») ---------------------------- */
.modal-overlay { background: var(--g-overlay); }
.modal__panel { position: relative; padding: 60px; border-radius: var(--r-lg); background: var(--c-sand); display: grid; gap: 50px; }
.modal__close { width: 56px; height: 56px; border-radius: 50%; background: var(--c-text); color: var(--c-white); display: grid; place-items: center; }
.modal__close .icon { width: 20px; height: 20px; }

/* ---- Blocs de documentation du design system ------------------------------------ */
.ds-section { padding-block: 60px; border-top: 1px solid var(--c-grey); }
.ds-section h2 { margin-bottom: 8px; }
.ds-section > p { max-width: 70ch; margin-bottom: 30px; }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.ds-swatch { display: grid; gap: 8px; font-size: var(--fs-sm); }
.ds-swatch__chip { height: 90px; border-radius: var(--r-sm); border: 1px solid var(--c-grey); }
.ds-swatch code { font-size: var(--fs-xs); color: #6b7378; }
.ds-type { display: grid; gap: 24px; }
.ds-type__row { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: baseline; border-bottom: 1px solid var(--c-grey); padding-bottom: 16px; }
.ds-type__meta { font-size: var(--fs-xs); color: #6b7378; display: grid; gap: 2px; }
.ds-demo { display: grid; gap: 24px; padding: 30px; border: 1px dashed var(--c-grey); border-radius: var(--r-sm); }
.ds-demo--dark { background: var(--c-text); color: var(--c-white); }
.ds-demo--blue { background: var(--c-primary); color: var(--c-white); }
.ds-demo--sand { background: var(--c-sand); }
.ds-demo--sky { background: var(--c-primary-100); }
.ds-demo--gradient { background: var(--g-primary); color: var(--c-white); }
.ds-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: #6b7378; }
.ds-demo--blue .ds-label, .ds-demo--gradient .ds-label, .ds-demo--dark .ds-label { color: #cfe9f7; }
.ds-code { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: #F7F8F8; border: 1px solid var(--c-grey); border-radius: 8px; padding: 12px 16px; overflow-x: auto; white-space: pre; color: var(--c-text); }
.ds-nav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-grey); }
.ds-nav__inner { display: flex; gap: 20px; flex-wrap: wrap; padding: 14px 0; font-size: var(--fs-sm); }
.ds-nav a:hover { color: var(--c-primary); }
.ds-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px; }
.ds-icon { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--c-grey); border-radius: 10px; font-size: 11px; color: #6b7378; }
.ds-icon .icon { width: 28px; height: 28px; color: var(--c-primary); }

@media (max-width: 900px) {
  .feature-tiles, .why-cards, .spec-grid, .plans, .plans__options { grid-template-columns: 1fr; }
  .stories { grid-template-columns: 1fr 1fr; } .story { min-height: 480px; }
  .panel { padding: 40px 24px; border-radius: var(--r-lg); }
  .banner { padding: 40px 28px; border-radius: var(--r-lg); }
  .review { padding: 30px; grid-template-columns: 80px 1fr; } .review__avatar { width: 80px; height: 80px; } .review .rating--lg { grid-column: 1 / -1; }
  .ds-type__row { grid-template-columns: 1fr; }
  .btn { white-space: normal; text-align: center; }
}