/*
  Skyscape Brand System — Landing Pages v4
  Single canonical stylesheet. Add new rules HERE, never in a per-property file.

  Display: Roboto Slab Light 300  |  Body: Nunito
  Sky #009ad1 · Action #d91e43 · Ink #2A3D50 · Slate #4A5A6B
  Mist #E4EDF3 · Light #F6F9FB · Gold #FFD166

  USAGE — one line, no Google Fonts link needed:
    <link rel="stylesheet" href="/brand/skyscape.css">
    <div class="ss-page"> ... </div>

  COMPONENTS
    .ss-masthead .ss-hero (.ss-hero--photo) .ss-kicker .ss-signals .ss-statbar
    .ss-btn (.sky .outline .outline-hero .sm) .ss-textlink .ss-section .ss-eyebrow
    .ss-list .ss-checks .ss-pills .ss-table .ss-tag .ss-deeper .ss-pgrid
    .ss-ucgrid .ss-product-grid .ss-grid .ss-steps .ss-testimonials .ss-agenda
    .ss-fasttrack .ss-urgent .ss-highlight .ss-faq-item .ss-reg .ss-footer-sig
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400&family=Nunito:wght@400;600;700&display=swap');

:root {
  --sky:#009ad1; --sky-dk:#0080b0; --red:#d91e43; --red-dk:#b81836;
  --ink:#2A3D50; --slate:#4A5A6B; --mist:#E4EDF3; --light:#F6F9FB;
  --white:#ffffff; --gold:#FFD166;
  --r-card:16px; --r-btn:12px; --radius:16px;
  --shadow:0 2px 16px rgba(18,32,46,.07);
  --display:'Roboto Slab',Georgia,serif; --dw:300;
  --body:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font:var(--body);
}

.ss-page { font-family:var(--body); color:var(--ink); line-height:1.6; max-width:1080px; margin:0 auto; padding:0 20px 64px; }
.ss-page *, .ss-page *::before, .ss-page *::after { box-sizing:border-box; }

/* ── MASTHEAD ── */
.ss-masthead { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; }
.ss-masthead img { width:150px; height:auto; display:block; }
.ss-masthead a { text-decoration:none; }
.ss-masthead-contact { font-size:14px; color:var(--slate); white-space:nowrap; }
.ss-masthead-contact:hover { color:var(--sky); }

/* ── HERO ── */
.ss-hero { background:var(--ink); color:var(--white); border-radius:var(--r-card); padding:64px 52px; position:relative; overflow:hidden; }
.ss-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--sky),var(--red)); }
.ss-hero > * { position:relative; z-index:1; }
.ss-hero--photo { min-height:480px; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(to right,rgba(42,61,80,.96) 0%,rgba(42,61,80,.88) 35%,rgba(42,61,80,.55) 65%,rgba(42,61,80,.20) 100%), var(--hero-img) center/cover no-repeat; }
.ss-hero--photo .ss-hero-content { max-width:600px; }
.ss-kicker { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--sky); margin:0 0 14px; }
.ss-kicker a { color:var(--sky); text-decoration:none; }
.ss-kicker a:hover { text-decoration:underline; }
.ss-hero h1 { font-family:var(--display); font-size:clamp(28px,4.4vw,48px); font-weight:var(--dw); line-height:1.1; margin:0 0 18px; color:var(--white); max-width:17ch; }
.ss-hero .ss-sub { font-size:17px; color:#B8CDD9; margin:0 0 28px; max-width:58ch; line-height:1.6; }
.ss-hero-note { font-size:13px; color:#8FB4C9; margin:18px 0 0; }
.ss-meta { font-size:15px; color:var(--white); margin:0 0 28px; }
.ss-meta strong { color:var(--gold); }

/* ── TRUST SIGNALS ── */
.ss-signals { display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 28px; }
.ss-signal { display:flex; align-items:center; gap:7px; font-size:13px; color:#B8CDD9; }
.ss-signal::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--sky); flex-shrink:0; }

/* ── STAT BAR ── */
.ss-statbar { background:var(--light); border:1px solid var(--mist); border-radius:var(--r-card); padding:28px 36px; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-around; text-align:center; margin:20px 0; }
.ss-stat-num { font-family:var(--display); font-size:38px; font-weight:var(--dw); color:var(--sky); line-height:1; margin-bottom:4px; }
.ss-stat-label { font-size:12px; color:var(--slate); font-weight:600; }

/* ── BUTTONS ── */
.ss-btn { display:inline-flex; align-items:center; justify-content:center; background:var(--red); color:var(--white);
  font-family:var(--body); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:2px;
  padding:15px 34px; border-radius:var(--r-btn); text-decoration:none; border:none; cursor:pointer;
  transition:filter .15s,background .15s; white-space:nowrap; line-height:1.2; }
.ss-btn:hover { filter:brightness(.93); color:var(--white); }
.ss-btn.sky { background:var(--sky); }
.ss-btn.outline { background:transparent; border:1.5px solid var(--mist); color:var(--ink); }
.ss-btn.outline:hover { background:var(--mist); filter:none; color:var(--ink); }
.ss-btn.outline-hero { background:transparent; border:1.5px solid rgba(255,255,255,.45); color:rgba(255,255,255,.9); }
.ss-btn.outline-hero:hover { background:rgba(255,255,255,.08); filter:none; }
.ss-btn.sm { font-size:11px; padding:9px 20px; }
.ss-btns { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.ss-textlink { display:inline-block; color:var(--white); font-weight:700; font-size:15px; text-decoration:none; border-bottom:2px solid var(--red); padding-bottom:3px; }
.ss-textlink:hover { opacity:.85; }
.ss-inline { color:var(--sky); font-weight:700; text-decoration:none; }
.ss-inline:hover { text-decoration:underline; }

/* ── SECTION ── */
.ss-section { padding:52px 0; }
.ss-section + .ss-section { border-top:1px solid var(--mist); }
.ss-section h2 { font-family:var(--display); font-size:clamp(23px,3vw,32px); font-weight:var(--dw); color:var(--ink); margin:0 0 8px; line-height:1.2; }
.ss-section h2 span { color:var(--sky); }
.ss-section .ss-section-sub { font-size:15px; color:var(--slate); margin:0 0 26px; max-width:62ch; }
.ss-eyebrow { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--sky); margin:0 0 6px; }
.ss-body { font-size:15px; color:var(--slate); max-width:70ch; margin:0 0 26px; }

/* ── LISTS ── */
.ss-list { list-style:none; padding:0; margin:0; }
.ss-list li { padding:12px 0 12px 36px; position:relative; font-size:16px; border-bottom:1px solid var(--mist); color:var(--slate); }
.ss-list li:last-child { border-bottom:none; }
.ss-list li b { color:var(--ink); }
.ss-list li::before { content:''; position:absolute; left:0; top:18px; width:14px; height:14px; border-radius:50%; background:var(--sky); }
.ss-checks { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.ss-checks li { display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--slate); }
.ss-checks li::before { content:''; flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center/13px no-repeat; margin-top:2px; }

/* ── PILLS ── */
.ss-pills { display:flex; flex-wrap:wrap; gap:10px; }
.ss-pill { background:var(--white); border:1.5px solid var(--mist); border-radius:999px; padding:8px 18px; font-size:14px; font-weight:600; color:var(--ink); }
a.ss-pill { text-decoration:none; display:inline-block; transition:border-color .15s,color .15s; }
a.ss-pill:hover { border-color:var(--sky); color:var(--sky); }

/* ── DATA TABLE ── */
.ss-tscroll { overflow-x:auto; }
.ss-table { width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
.ss-table th, .ss-table td { text-align:left; vertical-align:top; padding:15px 16px 15px 0; border-bottom:1px solid var(--mist); }
.ss-table thead th { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--slate); border-bottom:1.5px solid var(--ink); }
.ss-table tbody th a { font-family:var(--display); font-size:18px; font-weight:400; color:var(--ink); text-decoration:none; }
.ss-table tbody th a:hover { color:var(--sky); }
.ss-table td { color:var(--slate); }
.ss-num { white-space:nowrap; color:var(--ink); font-weight:700; }
.ss-num-note { font-weight:400; color:var(--slate); font-size:12px; }
.ss-tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 9px; border-radius:5px; white-space:nowrap; }
.ss-tag-open { background:#FDECEF; color:var(--red); }
.ss-tag-impl { background:var(--mist); color:var(--slate); }

/* ── DEEPER-DIVE CARDS ── */
.ss-deeper { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.ss-deeper-card { display:block; background:var(--white); border:1px solid var(--mist); border-radius:var(--r-card); padding:28px 26px; box-shadow:var(--shadow); text-decoration:none; color:inherit; transition:border-color .15s,transform .15s; }
.ss-deeper-card:hover { border-color:var(--sky); transform:translateY(-2px); }
.ss-deeper-eyebrow { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--sky); }
.ss-deeper-card h3 { font-family:var(--display); font-size:21px; font-weight:400; margin:8px 0; }
.ss-deeper-card p { font-size:14px; color:var(--slate); margin:0 0 14px; }
.ss-deeper-go { font-size:13px; font-weight:700; color:var(--red); }

/* ── SPEC COLUMNS ── */
.ss-pgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:22px; }
.ss-pcol h4 { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); padding-bottom:8px; border-bottom:1.5px solid var(--ink); margin:0 0 10px; }
.ss-pcol ul { list-style:none; padding:0; margin:0; }
.ss-pcol li { font-size:14px; color:var(--slate); padding:7px 0 7px 16px; position:relative; border-bottom:1px solid var(--mist); }
.ss-pcol li:last-child { border-bottom:none; }
.ss-pcol li::before { content:''; position:absolute; left:0; top:15px; width:6px; height:1px; background:var(--sky); }

/* ── USE-CASE CARDS ── */
.ss-ucgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.ss-uc { background:var(--white); border:1px solid var(--mist); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow); }
.ss-uc h3 { font-family:var(--display); font-size:18px; font-weight:400; margin:0 0 10px; line-height:1.25; }
.ss-uc-scenario { font-size:14px; color:var(--slate); margin:0 0 12px; }
.ss-uc-outcome { font-size:13px; color:var(--sky); font-weight:700; padding-top:10px; border-top:1px solid var(--mist); margin:0; }

/* ── STANDARD CARDS ── */
.ss-grid { display:flex; flex-wrap:wrap; gap:16px; }
.ss-card { flex:1 1 280px; background:var(--white); border:1px solid var(--mist); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow); }
.ss-card h3 { margin:0 0 8px; font-family:var(--display); font-size:17px; font-weight:var(--dw); color:var(--ink); }
.ss-card p { margin:0; font-size:14px; color:var(--slate); }
.ss-card .ss-card-num { font-family:var(--display); font-size:36px; font-weight:var(--dw); color:var(--sky); margin-bottom:8px; line-height:1; }

/* ── PRODUCT CARDS ── */
.ss-product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.ss-product-card { background:var(--white); border:1px solid var(--mist); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:box-shadow .18s,transform .18s; }
.ss-product-card:hover { box-shadow:0 6px 24px rgba(18,32,46,.13); transform:translateY(-2px); }
.ss-product-card-img { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--mist); display:block; }
.ss-product-card-body { padding:20px; flex:1; display:flex; flex-direction:column; gap:6px; }
.ss-product-badge { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--sky); }
.ss-product-card h3 { margin:0; font-family:var(--display); font-size:17px; font-weight:var(--dw); color:var(--ink); line-height:1.2; }
.ss-product-card p { margin:0; font-size:13px; color:var(--slate); flex:1; }
.ss-product-price { font-size:14px; color:var(--slate); margin-top:4px; }
.ss-product-price strong { font-size:18px; color:var(--ink); font-weight:700; }
.ss-product-actions { display:flex; gap:8px; margin-top:12px; }
.ss-product-actions .ss-btn { flex:1; text-align:center; font-size:11px; padding:10px 12px; }

/* ── STEPS ── */
.ss-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.ss-step { background:var(--white); border:1px solid var(--mist); border-radius:var(--r-card); padding:26px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.ss-step-num { width:34px; height:34px; background:var(--sky); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
.ss-step h3 { margin:0; font-family:var(--display); font-size:17px; font-weight:400; }
.ss-step p { margin:0; font-size:14px; color:var(--slate); }

/* ── TESTIMONIALS ── */
.ss-testimonials { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.ss-testimonial { background:var(--white); border:1px solid var(--mist); border-radius:var(--r-card); padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.ss-testimonial-stars { color:#F5A623; font-size:16px; letter-spacing:2px; }
.ss-testimonial-text { font-size:14px; color:var(--slate); line-height:1.65; flex:1; }
.ss-testimonial-author { font-size:13px; font-weight:700; color:var(--ink); }
.ss-testimonial-badge { font-size:11px; color:var(--sky); font-weight:600; }

/* ── AGENDA / LABEL ROWS ── */
.ss-agenda { display:flex; flex-direction:column; }
.ss-arow { display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--mist); font-size:15px; color:var(--slate); }
.ss-arow:last-child { border-bottom:none; }
.ss-atime { flex:0 0 80px; color:var(--sky); font-weight:700; font-size:13px; }
.ss-alabel { flex:0 0 190px; color:var(--slate); font-weight:700; font-size:13px; }
.ss-anum { width:30px; height:30px; flex-shrink:0; background:var(--sky); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-top:1px; }

/* ── FAST-TRACK BAND ── */
.ss-fasttrack { background:var(--ink); border-radius:var(--r-card); padding:28px 32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin:20px 0; }
.ss-fasttrack-text { flex:1 1 420px; }
.ss-fasttrack-kicker { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#8FD3EE; margin:0 0 8px; }
.ss-fasttrack-title { font-family:var(--display); font-size:22px; font-weight:var(--dw); line-height:1.3; color:var(--white); margin:0 0 6px; }
.ss-fasttrack-body { font-size:15px; line-height:1.6; color:#D7EEF8; margin:0; }
.ss-fasttrack .ss-btn { flex-shrink:0; }

/* ── URGENCY ── */
.ss-urgent { background:#FFF8E1; border-left:4px solid var(--red); border-radius:0 var(--r-card) var(--r-card) 0; padding:18px 22px; font-size:15px; color:#5a3a0a; margin:20px 0; }
.ss-urgent strong { color:var(--red); }

/* ── HIGHLIGHT ── */
.ss-highlight { background:var(--sky); color:var(--white); border-radius:var(--r-card); padding:44px 48px; text-align:center; }
.ss-highlight h2 { font-family:var(--display); font-weight:var(--dw); font-size:clamp(23px,3vw,32px); color:var(--white); margin:0 0 12px; line-height:1.2; }
.ss-highlight p { color:rgba(255,255,255,.92); font-size:16px; max-width:54ch; margin:0 auto 10px; }
.ss-highlight .ss-btn { background:var(--white); color:var(--ink); margin-top:18px; }
.ss-highlight .ss-btn:hover { background:var(--light); color:var(--ink); }
.ss-hl-fine { font-size:13px; color:rgba(255,255,255,.75); margin-top:14px; }

/* ── FAQ ── */
details.ss-faq-item { border-bottom:1px solid var(--mist); }
details.ss-faq-item summary { font-family:var(--display); font-weight:400; font-size:17px; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 0; list-style:none; user-select:none; }
details.ss-faq-item summary::-webkit-details-marker { display:none; }
details.ss-faq-item summary::after { content:'+'; font-size:22px; color:var(--sky); flex-shrink:0; transition:transform .2s; }
details.ss-faq-item[open] summary::after { transform:rotate(45deg); }
.ss-faq-body { font-size:15px; color:var(--slate); padding-bottom:18px; line-height:1.7; max-width:72ch; }

/* ── REGISTRATION PANEL ── */
.ss-reg { background:var(--light); border:1px solid var(--mist); border-radius:var(--r-card); padding:40px 44px; }
.ss-reg h2 { font-family:var(--display); font-weight:var(--dw); margin-bottom:6px; }
.ss-reg .ss-reg-sub { font-size:15px; color:var(--slate); margin:0 0 28px; }
.ss-form-row { display:flex; gap:14px; flex-wrap:wrap; }
.ss-form-row .ss-field { flex:1 1 200px; }
.ss-field { margin-bottom:16px; }
.ss-field label { display:block; font-size:12px; font-weight:700; color:var(--slate); letter-spacing:.5px; text-transform:uppercase; margin-bottom:6px; }
.ss-field input, .ss-field select, .ss-field textarea { width:100%; padding:11px 14px; border:1.5px solid var(--mist); border-radius:8px; font-size:15px; font-family:var(--body); color:var(--ink); background:var(--white); transition:border-color .15s; outline:none; }
.ss-field input:focus, .ss-field select:focus, .ss-field textarea:focus { border-color:var(--sky); }
.ss-checkbox { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--slate); margin-bottom:20px; }
.ss-checkbox input { width:auto; margin-top:3px; }
.ss-fine { font-size:12px; color:var(--slate); margin-top:12px; line-height:1.6; }

/* ── FOOTER ── */
.ss-footer-sig { text-align:center; padding:28px 0 0; font-size:13px; color:var(--slate); border-top:1px solid var(--mist); margin-top:48px; }
.ss-footer-sig strong { color:var(--sky); }
.ss-footer-sig a { color:var(--slate); }
.ss-updated { font-size:12px; color:var(--slate); opacity:.8; }

/* ── RESPONSIVE ── */
@media (max-width:680px) {
  .ss-hero { padding:44px 26px; }
  .ss-hero--photo { min-height:auto; background:linear-gradient(to bottom,rgba(42,61,80,.97) 0%,rgba(42,61,80,.85) 60%,rgba(42,61,80,.6) 100%), var(--hero-img) center/cover no-repeat; }
  .ss-hero--photo .ss-hero-content { max-width:100%; }
  .ss-highlight { padding:32px 24px; }
  .ss-reg { padding:28px 20px; }
  .ss-section { padding:38px 0; }
  .ss-steps, .ss-product-grid { grid-template-columns:1fr; }
  .ss-fasttrack { padding:22px 20px; }
  .ss-arow { flex-direction:column; gap:4px; }
  .ss-alabel, .ss-atime { flex:none; }
}
@media (max-width:440px) { .ss-product-grid { grid-template-columns:1fr; } }