/* start/index.html — section styling.
   Loaded after css/site.css and css/start-widgets.css. The widgets file holds
   the bespoke pieces carried over from the old page; everything here is the
   page's own chrome, rebuilt on the current system.

   The old page had 38,823 characters of private CSS, 22 gradients and three
   fonts nothing else on the site used. */

/* Clears the 108px fixed nav, matching every other converted page. */
body.st .start-hero{padding:168px 0 8px}
/* The hero has no inner wrapper — its children sit directly in the section. */
body.st .start-hero{text-align:center}
body.st .start-hero > h1,
body.st .start-hero > p,
body.st .start-hero > .trust-pills{max-width:820px;margin-left:auto;margin-right:auto;padding:0 32px}
body.st .start-hero h1{font-size:44px;font-weight:800;letter-spacing:-.03em;
  line-height:1.12;color:var(--ink);margin:0 auto 16px;text-wrap:balance}
body.st .start-hero p{font-size:17.5px;line-height:1.7;color:var(--body);
  max-width:660px;margin:0 auto;text-wrap:pretty}

/* Was a row of filled pills; now quiet ticked facts, as on pricing. */
body.st .trust-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;
  margin-top:26px;font-size:13.5px;font-weight:600;color:var(--mute);list-style:none;padding:0}
body.st .trust-pill{background:none;border:0;padding:0;color:var(--mute);font-size:13.5px}

/* ── section heads ────────────────────────────────────────────────────────
   site.css left-aligns .sechead; this page is a centred composition. */
body.st section.s > .wrap > h2,
body.st .profit-inner > h2,
body.st .starting-inner > h2,
body.st .advertise-inner > h2,
body.st .resources-inner > h2,
body.st .saas-inner > h2,
body.st .calc-inner h2,
body.st .book-inner h2{font-size:40px;font-weight:800;letter-spacing:-.03em;
  line-height:1.14;color:var(--ink);margin:0 0 14px;text-wrap:balance}
body.st .profit-inner,
body.st .starting-inner,
body.st .advertise-inner,
body.st .resources-inner,
body.st .saas-inner{max-width:1140px;margin:0 auto;padding:0 32px;text-align:center}
body.st .profit-inner > p,
body.st .starting-inner > p,
body.st .advertise-inner > p,
body.st .resources-inner > p,
body.st .saas-inner > p{font-size:17.5px;line-height:1.7;color:var(--body);
  max-width:660px;margin:0 auto 44px;text-wrap:pretty}

body.st .section-badge{display:inline-block;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pu);margin-bottom:14px}

/* ── stat row and item grids ──────────────────────────────────────────────
   Were shadowed cards; now the hairline grid used across the site. */
body.st .profit-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;margin:0 auto;max-width:940px}
body.st .profit-stat{background:#fff;border:0;border-radius:0;box-shadow:none;
  padding:28px 22px;min-width:0}
body.st .profit-stat .stat-value{display:block;font-size:31px;font-weight:800;
  letter-spacing:-.03em;color:var(--ink);line-height:1.1}
body.st .profit-stat .stat-label{font-size:14px;line-height:1.5;color:var(--mute);margin:8px 0 0}

body.st .starting-grid,
body.st .advertise-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;margin:0 auto 28px;max-width:940px;text-align:left}
body.st .starting-item,
body.st .advertise-item{background:#fff;border:0;border-radius:0;box-shadow:none;
  padding:26px 26px;min-width:0}
/* These items are a single label, not a heading-and-body card. Their icons are
   inline fill:white — designed for the old coloured cards, so invisible on a
   white surface. Hidden, and the label carries the row with a purple dot. */
body.st .si-icon,
body.st .ai-icon{display:none}
body.st .starting-item,
body.st .advertise-item{display:flex;align-items:center;gap:12px;padding:18px 24px}
body.st .starting-item span,
body.st .advertise-item span{position:relative;padding-left:20px;
  font-size:16px;font-weight:600;color:var(--ink)}
body.st .starting-item span::before,
body.st .advertise-item span::before{content:"";position:absolute;
  left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--pu)}

/* ── calculator and book blocks ───────────────────────────────────────────
   Two-column feature blocks; the widgets file styles what sits inside them. */
body.st .calc-inner,
body.st .book-inner{max-width:1100px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
body.st .calc-inner > div,
body.st .book-inner > div{min-width:0}
body.st .calc-inner p,
body.st .book-inner p{font-size:16.5px;line-height:1.72;color:var(--body)}
body.st .calc-features,
body.st .book-highlights{display:flex;flex-direction:column;gap:10px;
  margin:22px 0 0;padding:0;list-style:none}
body.st .calc-features li,
body.st .book-highlights li{display:flex;align-items:flex-start;gap:11px;
  font-size:15.5px;line-height:1.65;color:var(--body)}
body.st .calc-features .check,
body.st .book-highlights .check{flex:none;width:7px;height:7px;
  margin-top:8px;border-radius:50%;background:var(--pu);overflow:hidden}
body.st .calc-features .check svg,
body.st .book-highlights .check svg{display:none}

body.st .calc-cta-btn,
body.st .starting-cta{display:inline-block;margin-top:26px;background:var(--grad);
  color:#fff;font-size:15.5px;font-weight:700;padding:15px 28px;border-radius:13px;
  box-shadow:0 6px 18px rgba(102,126,234,.32);transition:transform .2s ease}
body.st .calc-cta-btn:hover,
body.st .starting-cta:hover{transform:translateY(-1px);color:#fff}

/* ── resources ────────────────────────────────────────────────────────────
   The grid fix stays: auto-fit with min-width:0, so a track can shrink. */
body.st .resources-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;text-align:left}
body.st .resource-card{background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:none;padding:28px;min-width:0}
body.st .resource-card h3{font-size:18.5px;font-weight:700;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 10px}
body.st .resource-card p{font-size:15.5px;line-height:1.68;color:var(--body);margin:0 0 18px}
/* Same leftover as the other sections: white icons from the old coloured
   tiles, invisible on the white card but still taking space. Hidden. */
body.st .rc-icon{display:none}

/* ── closing ──────────────────────────────────────────────────────────────
   Was a gradient panel; now the centred close used elsewhere. */
body.st .saas-inner{max-width:680px}
body.st .saas-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;
  max-width:600px;margin:0 auto 30px;text-align:left;list-style:none;padding:0}
body.st .saas-benefit{font-size:15px;line-height:1.6;color:var(--body)}
/* Its icons are inline fill:white, made for the old gradient panel, so
   invisible on white. Hidden, and each label takes the purple dot used by the
   lists above. The button itself is the shared .btn .btn-p from site.css. */
body.st .sb-icon{display:none}
body.st .saas-benefit span{position:relative;padding-left:20px}
body.st .saas-benefit span::before{content:"";position:absolute;
  left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--pu)}
body.st .saas-trust{margin-top:18px;font-size:13.5px;color:var(--mute)}

@media (max-width:900px){
  body.st .start-hero{padding:150px 0 4px}
  body.st .start-hero h1{font-size:31px}
  body.st .calc-inner,body.st .book-inner{grid-template-columns:1fr;gap:32px}
  body.st .starting-grid,body.st .advertise-grid{grid-template-columns:1fr}
  body.st .saas-benefits{grid-template-columns:1fr}
  body.st section.s > .wrap > h2,
  body.st .profit-inner > h2,body.st .starting-inner > h2,
  body.st .advertise-inner > h2,body.st .resources-inner > h2,
  body.st .saas-inner > h2,body.st .calc-inner h2,body.st .book-inner h2{font-size:27px}
}