/* Connect Safe site — page-level styles.
   Component styles (cs- classes) and all tokens come from the design system under _ds/. */

a{text-decoration:none}

@keyframes csRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes csSlide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes csFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation-duration:0ms !important;transition-duration:0ms !important}}

.page{min-height:100vh;background:var(--surface-page);display:flex;flex-direction:column}
.page main{flex:1}
.view{animation:csFade var(--duration-base) var(--ease-standard)}

/* ---------- Shared text roles ---------- */
.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:var(--text-11);font-weight:var(--weight-medium);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-brand)}
.eyebrow--teal{color:var(--teal-400)}
.eyebrow--muted{color:var(--text-muted)}
.mono-label{font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}
.spec-chip{font-family:var(--font-mono);font-size:var(--text-12);letter-spacing:var(--tracking-wide);color:var(--text-secondary);border:1px solid var(--border-default);border-radius:var(--radius-xs);padding:5px 9px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface-page) 88%,transparent);backdrop-filter:saturate(140%) blur(18px);-webkit-backdrop-filter:saturate(140%) blur(18px);border-bottom:1px solid var(--border-subtle)}
.site-header__inner{max-width:var(--container-wide);margin:0 auto;padding:0 32px;height:68px;display:flex;align-items:center;gap:28px}
.brand{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-display);font-size:19px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-tightest);color:var(--text-primary)}
.brand em{font-style:normal;color:var(--teal-700)}
.site-nav{display:flex;gap:22px;align-items:center}
.site-nav__link{background:none;border:0;padding:6px 0;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-14);font-weight:var(--weight-medium);color:var(--text-secondary);transition:var(--transition-control)}
.site-nav__link:hover,.site-nav__link--active{color:var(--text-primary)}
.site-header__actions{margin-left:auto;display:flex;gap:12px;align-items:center}
.kit-summary{font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}

/* ---------- Dark bands, grid texture, placeholders ---------- */
.band-dark{position:relative;background:var(--carbon-950);color:var(--carbon-25);overflow:hidden}
.band-dark--top{border-bottom:1px solid rgba(255,255,255,.08)}
.band-dark--framed{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;pointer-events:none}

.ph{display:grid;place-items:center;text-align:center;padding:24px}
.ph span{font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--carbon-400);line-height:1.6}
.ph--dark{border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-panel);background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 9px),var(--carbon-900)}
.ph--light{border:1px solid var(--border-subtle);border-radius:var(--radius-panel);background:repeating-linear-gradient(135deg,rgba(13,17,20,.045) 0 2px,transparent 2px 10px),linear-gradient(160deg,var(--carbon-50),var(--carbon-150))}
.ph--thumb{aspect-ratio:1;border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:repeating-linear-gradient(135deg,rgba(13,17,20,.045) 0 2px,transparent 2px 10px),var(--carbon-50)}

/* Illustration fills: the ph frame keeps its border/background as a loading backdrop */
.ph--img{padding:0;position:relative;overflow:hidden}
.ph--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ph--thumb{position:relative;overflow:hidden}
.ph--thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph--thumb .thumb-zoom-a{transform:scale(1.9);transform-origin:36% 40%}
.ph--thumb .thumb-zoom-b{transform:scale(2.3);transform-origin:58% 62%}

.phone{aspect-ratio:9/19.5;border:1px solid rgba(255,255,255,.14);border-radius:34px;padding:10px;background:var(--carbon-900)}
.phone__screen{position:relative;overflow:hidden;width:100%;height:100%;border-radius:26px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 9px),var(--carbon-850);display:grid;place-items:center;text-align:center;padding:18px}
.phone__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone__screen span{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--carbon-400);line-height:1.6}
.phone__caption{font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--carbon-300);margin-top:14px}

/* ---------- Home: hero ---------- */
.hero__inner{position:relative;max-width:var(--container-wide);margin:0 auto;padding:96px 32px 88px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero__title{margin:16px 0 0;font-size:var(--text-64);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tightest);color:var(--white);text-wrap:balance}
.hero__lede{margin:20px 0 0;max-width:52ch;font-size:var(--text-18);line-height:var(--leading-relaxed);color:var(--carbon-200)}
.hero__cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero__stats{display:flex;gap:44px;margin-top:48px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:4px}
.stat__value{font-family:var(--font-mono);font-size:var(--text-28);color:var(--white)}
.stat__label{font-size:var(--text-13);color:var(--carbon-300)}
.hero__media{aspect-ratio:4/3}

/* ---------- Sections (shared) ---------- */
.section{max-width:var(--container-wide);margin:0 auto;padding:96px 32px 0}
.section--last{padding-bottom:96px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.section .grid-3{margin-top:32px}

/* ---------- Home: hub split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split__media{aspect-ratio:5/4}
.split h2{margin:14px 0 0;font-size:var(--text-42);font-weight:var(--weight-semibold);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}
.split p{margin:16px 0 0;max-width:48ch;font-size:var(--text-16);line-height:var(--leading-relaxed);color:var(--text-secondary)}
.split .chip-row{margin-top:24px}
.split__cta{margin-top:28px}

/* ---------- Home: range teaser ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--border-subtle);padding-bottom:20px}
.section-head h2{margin:12px 0 0;font-size:var(--text-42);font-weight:var(--weight-semibold);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}

/* ---------- Home: app band ---------- */
.app-band__inner{max-width:var(--container-wide);margin:0 auto;padding:88px 32px;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.app-band__phone{display:flex;justify-content:center}
.app-band__phone .phone{width:280px}
.app-band h2{margin:14px 0 0;font-size:var(--text-42);font-weight:var(--weight-semibold);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--white)}
.app-band__lede{margin:16px 0 0;max-width:50ch;font-size:var(--text-16);line-height:var(--leading-relaxed);color:var(--carbon-200)}
.app-band__rows{display:grid;gap:14px;margin-top:28px}
.app-row{display:flex;gap:12px;align-items:flex-start;border-top:1px solid rgba(255,255,255,.10);padding-top:14px}
.app-row .cs-icon{color:var(--teal-400);flex:none;margin-top:2px}
.app-row__title{font-family:var(--font-display);font-size:var(--text-16);font-weight:var(--weight-medium);color:var(--white)}
.app-row__text{font-size:var(--text-14);color:var(--carbon-300);line-height:var(--leading-relaxed)}
.app-band__cta{margin-top:32px}

/* ---------- Home: why cards ---------- */
.why h2{margin:12px 0 0;font-size:var(--text-42);font-weight:var(--weight-semibold);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);max-width:20ch}
.why .grid-3{margin-top:36px}
.feature-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-1);padding:28px}
.feature-card .cs-icon{color:var(--teal-700)}
.feature-card h3{margin:16px 0 0;font-size:var(--text-21);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}
.feature-card p{margin:10px 0 0;font-size:15px;line-height:var(--leading-relaxed);color:var(--text-secondary)}

/* ---------- Home: CTA panel ---------- */
.cta-panel{background:var(--carbon-900);border-radius:var(--radius-2xl);padding:64px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-panel h2{margin:0;font-size:var(--text-42);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--white);max-width:18ch;line-height:var(--leading-snug)}
.cta-panel p{margin:14px 0 0;font-size:var(--text-16);color:var(--carbon-300);max-width:46ch;line-height:var(--leading-relaxed)}
.cta-panel__actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Range ---------- */
.range-head{border-bottom:1px solid var(--border-subtle);background:var(--surface-card)}
.range-head__inner{max-width:var(--container-wide);margin:0 auto;padding:56px 32px 32px}
.range-head h1{margin:12px 0 0;font-size:var(--text-52);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tightest);line-height:var(--leading-tight)}
.range-head p{margin:14px 0 0;max-width:56ch;font-size:var(--text-16);line-height:var(--leading-relaxed);color:var(--text-secondary)}
.range-head .chip-row{margin-top:28px}
.chip{cursor:pointer;font-family:var(--font-mono);font-size:var(--text-12);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:7px 13px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-secondary);transition:var(--transition-control)}
.chip:hover{border-color:var(--border-strong);color:var(--text-primary)}
.chip--on{border-color:var(--teal-500);background:var(--surface-brand);color:var(--text-on-brand)}
.chip--on:hover{border-color:var(--teal-500);color:var(--text-on-brand)}
.range-grid{max-width:var(--container-wide);margin:0 auto;padding:28px 32px 96px}
.result-line{font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);padding-bottom:20px}

/* ---------- Product ---------- */
.back-strip{max-width:var(--container-wide);margin:0 auto;padding:24px 32px 0}
.back-link{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);transition:var(--transition-control)}
.back-link:hover{color:var(--text-primary)}
.product-top{max-width:var(--container-wide);margin:0 auto;padding:28px 32px 0;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.product-gallery{display:grid;gap:12px}
.product-gallery__main{aspect-ratio:4/3}
.product-gallery__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.product-id{display:flex;align-items:center;gap:10px}
.product-id .mono-label{font-size:var(--text-12)}
.product-info h1{margin:10px 0 0;font-size:var(--text-42);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug)}
.product-info__blurb{margin:14px 0 0;max-width:50ch;font-size:17px;line-height:var(--leading-relaxed);color:var(--text-secondary)}
.product-info .chip-row{margin-top:22px}
.buy-row{display:flex;align-items:center;gap:16px;margin-top:28px;padding-top:24px;border-top:1px solid var(--border-subtle);flex-wrap:wrap}
.buy-row__price{font-family:var(--font-mono);font-size:var(--text-34);color:var(--text-primary)}
.buy-row__note{font-size:var(--text-13);color:var(--text-muted)}
.hub-note{margin-top:24px;background:var(--surface-brand-subtle);border:1px solid var(--teal-200);border-radius:var(--radius-card);padding:16px 18px;display:flex;gap:12px;align-items:flex-start}
.hub-note .cs-icon{color:var(--teal-700);flex:none;margin-top:1px}
.hub-note__text{font-size:var(--text-14);line-height:var(--leading-relaxed);color:var(--text-secondary)}
.product-detail{max-width:var(--container-wide);margin:0 auto;padding:72px 32px 0;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.product-detail h2{margin:0 0 20px;font-size:var(--text-24);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}
.included-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-1);padding:24px;display:grid;gap:12px}
.included-card__row{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:var(--leading-relaxed);color:var(--text-secondary)}
.included-card__row .cs-icon{color:var(--teal-700);flex:none;margin-top:2px}
.product-related{max-width:var(--container-wide);margin:0 auto;padding:72px 32px 96px}
.product-related h2{margin:0 0 24px;font-size:var(--text-24);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}

/* ---------- App page ---------- */
.app-hero__inner{position:relative;max-width:var(--container-wide);margin:0 auto;padding:80px 32px 0;text-align:center}
.app-hero h1{margin:16px auto 0;max-width:16ch;font-size:var(--text-64);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tightest);line-height:var(--leading-tight);color:var(--white)}
.app-hero__lede{margin:18px auto 0;max-width:56ch;font-size:var(--text-18);line-height:var(--leading-relaxed);color:var(--carbon-200)}
.app-hero__cta{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.app-hero__phones{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:64px auto 0}
.app-hero__spacer{height:80px}
.app-features{max-width:var(--container-wide);margin:0 auto;padding:88px 32px 0}
.app-notdo{max-width:var(--container-wide);margin:0 auto;padding:72px 32px 96px}
.notdo-panel{border:1px solid var(--border-subtle);border-radius:var(--radius-panel);padding:36px;background:var(--surface-card)}
.notdo-panel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:20px}
.notdo-panel__grid div{font-size:15px;line-height:var(--leading-relaxed);color:var(--text-secondary)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border-subtle);background:var(--surface-card)}
.site-footer__inner{max-width:var(--container-wide);margin:0 auto;padding:56px 32px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.site-footer__brand p{margin:12px 0 0;font-size:var(--text-14);line-height:var(--leading-relaxed);color:var(--text-secondary);max-width:34ch}
.site-footer__col{display:grid;gap:10px;align-content:start}
.site-footer__col a{font-size:var(--text-14)}
.footer-link{text-align:left;background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-14);color:var(--text-secondary);transition:var(--transition-control)}
.footer-link:hover{color:var(--text-primary)}
.site-footer__legal{border-top:1px solid var(--border-hairline)}
.site-footer__legal-inner{max-width:var(--container-wide);margin:0 auto;padding:20px 32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- Kit drawer ---------- */
.scrim{position:fixed;inset:0;background:var(--surface-overlay);backdrop-filter:blur(2px);z-index:60;animation:csFade var(--duration-base) var(--ease-entrance)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;z-index:61;background:var(--surface-card);border-left:1px solid var(--border-subtle);box-shadow:var(--shadow-4);display:flex;flex-direction:column;animation:csSlide var(--duration-base) var(--ease-entrance)}
.drawer__head{padding:22px 24px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawer__heading{font-family:var(--font-display);font-size:var(--text-21);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);margin-top:4px}
.drawer__close{background:none;border:1px solid var(--border-default);border-radius:var(--radius-control);width:32px;height:32px;cursor:pointer;color:var(--text-secondary);font-size:16px;line-height:1;transition:var(--transition-control)}
.drawer__close:hover{border-color:var(--border-strong);color:var(--text-primary)}
.drawer__body{flex:1;overflow:auto;padding:8px 24px}
.drawer__empty{padding:40px 0;text-align:center}
.drawer__empty p{font-size:15px;line-height:var(--leading-relaxed);color:var(--text-secondary);margin:0 0 20px}
.kit-line{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border-hairline)}
.kit-line__thumb{width:52px;height:52px;flex:none;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:repeating-linear-gradient(135deg,rgba(13,17,20,.045) 0 2px,transparent 2px 10px),var(--carbon-50)}
.kit-line__info{flex:1;min-width:0}
.kit-line__sku{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}
.kit-line__name{font-family:var(--font-display);font-size:15px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);margin-top:2px}
.kit-line__total{font-family:var(--font-mono);font-size:var(--text-13);color:var(--text-secondary);margin-top:2px}
.qty{display:flex;align-items:center;gap:2px;border:1px solid var(--border-default);border-radius:var(--radius-control);overflow:hidden}
.qty button{width:30px;height:30px;border:0;background:var(--surface-card);cursor:pointer;color:var(--text-secondary);font-size:15px;transition:var(--transition-control)}
.qty button:hover{background:var(--surface-sunken);color:var(--text-primary)}
.qty span{min-width:26px;text-align:center;font-family:var(--font-mono);font-size:var(--text-13)}
.hub-notice{margin:16px 0;background:var(--state-caution-subtle);border:1px solid var(--amber-500);border-radius:var(--radius-card);padding:14px 16px}
.hub-notice__title{font-family:var(--font-display);font-size:15px;font-weight:var(--weight-medium);margin-bottom:6px}
.hub-notice__text{font-size:var(--text-14);line-height:var(--leading-relaxed);color:var(--text-secondary);margin-bottom:12px}
.drawer__foot{border-top:1px solid var(--border-subtle);padding:20px 24px;display:grid;gap:14px}
.drawer__total{display:flex;justify-content:space-between;align-items:baseline}
.drawer__total-value{font-family:var(--font-mono);font-size:var(--text-28);color:var(--text-primary)}
.drawer__keep{background:none;border:0;padding:0;cursor:pointer;font-size:var(--text-13);color:var(--text-secondary);font-family:var(--font-sans);transition:var(--transition-control)}
.drawer__keep:hover{color:var(--text-primary)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero__inner,.split,.app-band__inner,.product-top,.product-detail{grid-template-columns:1fr}
  .hero__inner{padding-top:64px;padding-bottom:64px}
  .hero__title,.app-hero h1{font-size:var(--text-42)}
  .section-head h2,.split h2,.app-band h2,.why h2,.cta-panel h2{font-size:var(--text-34)}
  .range-head h1{font-size:var(--text-42)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .site-footer__inner{grid-template-columns:1fr 1fr}
  .cta-panel{padding:40px}
  .app-hero__phones{gap:16px}
}
@media (max-width:640px){
  .site-header__inner,.hero__inner,.section,.app-band__inner,.range-head__inner,.range-grid,.back-strip,.product-top,.product-detail,.product-related,.app-hero__inner,.app-features,.app-notdo,.site-footer__inner,.site-footer__legal-inner{padding-left:var(--gutter-mobile);padding-right:var(--gutter-mobile)}
  .site-header__inner{gap:16px}
  .site-nav{gap:14px}
  .kit-summary,.header-cta{display:none}
  .grid-3,.grid-2,.notdo-panel__grid,.app-hero__phones{grid-template-columns:1fr}
  .app-hero__phones{max-width:280px}
  .site-footer__inner{grid-template-columns:1fr}
}