@font-face{font-family:'Cabin';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cabin-600.ttf') format('truetype')}
@font-face{font-family:'Cabin';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/cabin-700.ttf') format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.ttf') format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.ttf') format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.ttf') format('truetype')}
:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --ink: #1d1d1f;
  --muted: #626267;
  --line: #dcdce1;
  --blue: #0066cc;
  --blue-deep: #0b3f84;
  --blue-soft: #eef5ff;
  --orange: #ef4c07;
  --orange-soft: #fff2eb;
  --green: #167353;
  --red: #a32121;
  --shadow: 0 24px 70px rgba(21, 31, 48, 0.13);
  --radius: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; overflow-wrap: anywhere; }
button, a { touch-action: manipulation; }

.skip {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 20;
  background: var(--surface);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.skip:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245, 245, 247, 0.88);
  border-bottom: 1px solid rgba(220, 220, 225, 0.85);
  backdrop-filter: blur(16px);
}

.support-ribbon {
  min-height: 34px;
  display: flex;
  justify-content: center;
  gap: 18px;
  align-items: center;
  padding: 7px 18px;
  border-bottom: 1px solid rgba(220, 220, 225, 0.7);
  color: var(--muted);
  font-size: 12px;
}

.support-ribbon a { color: var(--blue); font-weight: 650; }

.header-inner,
.section,
.site-footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  font-weight: 720;
  letter-spacing: -0.8px;
  white-space: nowrap;
}

.brand-mark { width: 32px; height: 32px; }

.desktop-nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.desktop-nav a,
.button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 15px;
  color: var(--muted);
  font-weight: 650;
}

.desktop-nav a:hover { color: var(--ink); background: #ededf0; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.button.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.button.secondary { background: #242428; border-color: #242428; color: #fff; }
.button.ghost { background: transparent; }
.button.large { min-height: 50px; padding: 13px 20px; }
.text-link { color: var(--blue); font-weight: 700; display: inline-flex; margin-top: 22px; }

.section { padding: 80px 0; }

.hero {
  min-height: calc(100vh - 106px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
  gap: 40px;
  align-items: center;
  padding-top: 46px;
}

.eyebrow {
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

h1 {
  max-width: 790px;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -3px;
  font-weight: 760;
  overflow-wrap: normal;
}

h2 {
  max-width: 840px;
  font-size: clamp(31px, 4.8vw, 56px);
  line-height: 1.04;
  letter-spacing: -2px;
  font-weight: 720;
  overflow-wrap: normal;
}

h3 {
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

.lead {
  max-width: 680px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.55;
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero-line {
  margin-top: 22px;
  color: var(--ink);
  font-weight: 650;
}

.door-grid { display: grid; gap: 12px; }

.answer-card,
.price-box,
.product-stage,
.flow-grid article,
.integration-failure,
.import-card,
.support-grid article,
.compliance-card,
.content-card,
.comparison-table,
.article-list article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.answer-card,
.price-box,
.integration-failure,
.import-card,
.support-grid article,
.compliance-card,
.content-card,
.article-list article {
  padding: 24px;
}

.answer-card span,
.price-box span,
.integration-failure span,
.import-card span,
.product-heading span,
.panel-header span,
.course-card p,
.metric-grid small,
.metric-grid span {
  color: var(--muted);
  font-size: 13px;
}

.answer-card strong,
.price-box strong {
  display: block;
  margin-top: 7px;
  font-size: 30px;
  letter-spacing: -1px;
}

.answer-card p,
.price-box p,
.integration-failure p,
.import-card p,
.content-card p,
.article-list p {
  margin-top: 10px;
  color: var(--muted);
}

.answer-card a { display: inline-flex; margin-top: 12px; color: var(--blue); font-weight: 700; }
.price-card { background: linear-gradient(180deg, #fff, var(--blue-soft)); border-color: rgba(0, 102, 204, 0.28); }

.founder-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: center;
}

.founder-photo {
  width: 76px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--orange);
  font-weight: 760;
}

.product-proof { padding-top: 24px; }

.product-stage {
  box-shadow: var(--shadow);
  overflow: hidden;
}

.browser-bar {
  height: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfbfd;
}

.browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9c9cf;
}

.browser-bar span:nth-child(2) { background: #dad8d1; }
.browser-bar span:nth-child(3) { background: #b8d9ca; }
.browser-bar p { margin-left: 10px; color: var(--muted); font-size: 13px; }

.product-shell {
  min-height: 470px;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  background: var(--bg);
}

.product-sidebar {
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background: #fff;
}

.mini-brand {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 11px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-weight: 760;
}

.product-sidebar b { display: block; margin-bottom: 18px; font-size: 13px; }
.product-sidebar nav { display: grid; gap: 6px; }
.product-sidebar span:not(.mini-brand) {
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px;
}
.product-sidebar .active { background: var(--bg); color: var(--ink); font-weight: 650; }

.product-main { padding: 30px; }

.product-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.product-heading h2 { margin-top: 3px; font-size: 36px; letter-spacing: -1.2px; }
.product-heading button,
.integration-failure button {
  border: 0;
  border-radius: 10px;
  padding: 11px 14px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 650;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.metric-grid article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.metric-grid strong { display: block; margin: 8px 0 2px; font-size: 25px; letter-spacing: -0.8px; }

.course-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.course-card span {
  align-self: start;
  padding: 5px 9px;
  border-radius: 6px;
  background: #eef8f4;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}

.workflow-preview {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
}

.workflow-preview span {
  padding: 8px 11px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.workflow-preview i {
  height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
}

.section-heading { max-width: 780px; margin-bottom: 34px; }
.section-heading p:not(.eyebrow),
.feature-split p,
.compliance-card p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.pricing-grid,
.flow-grid,
.support-grid,
.article-list {
  display: grid;
  gap: 14px;
}

.pricing-grid { grid-template-columns: repeat(3, 1fr); }
.flow-grid { grid-template-columns: repeat(4, 1fr); }
.support-grid { grid-template-columns: repeat(3, 1fr); }
.article-list { grid-template-columns: repeat(2, 1fr); }

.price-box.preferred {
  border-color: rgba(239, 76, 7, 0.35);
  background: linear-gradient(180deg, #fff, var(--orange-soft));
}

.flow-grid article { padding: 24px; }
.flow-grid span {
  display: inline-block;
  margin-bottom: 42px;
  color: var(--orange);
  font-weight: 760;
}
.flow-grid p { margin-top: 11px; color: var(--muted); }

.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: 44px;
  align-items: center;
}

.feature-split.reverse { grid-template-columns: minmax(360px, 1.08fr) minmax(0, 0.92fr); }

.integration-failure {
  box-shadow: var(--shadow);
}
.integration-failure h3,
.import-card h3 {
  margin-top: 12px;
  font-size: 32px;
  letter-spacing: -1px;
}
.integration-failure button { margin-top: 20px; background: var(--red); }

.support-grid strong {
  display: block;
  font-size: 25px;
  letter-spacing: -0.8px;
}
.support-grid span { display: block; margin-top: 6px; color: var(--muted); }

.compliance-card {
  max-width: 920px;
  background: linear-gradient(180deg, #fff, var(--blue-soft));
}

.final-cta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  padding-top: 72px;
  border-top: 1px solid var(--line);
}

.final-cta h2 { max-width: 760px; }

.site-footer {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 30px 0 42px;
  color: var(--muted);
}

.gateway-body {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(14, 99, 234, 0.075) 0 50%, rgba(239, 76, 7, 0.085) 50% 100%),
    var(--bg);
}

.gateway-header {
  width: min(1180px, calc(100% - 40px));
  margin: 22px auto 0;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.gateway-header.app-like {
  width: min(1040px, calc(100% - 40px));
  padding: 15px 18px;
  border-radius: 24px;
  background: #2f394b;
  color: #fff;
  box-shadow: 0 18px 50px rgba(21, 31, 48, 0.16);
}

.gateway-header.app-like .brand-mark {
  padding: 6px;
  border-radius: 13px;
  background: #142033;
  color: #fff;
  box-shadow: 0 2px 14px rgba(14, 99, 234, 0.38);
}

.gateway-header p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 470px;
  text-align: right;
}

.gateway-main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 58px 0 52px;
}

.gateway-intro {
  max-width: 780px;
  margin: 0 auto 42px;
  text-align: center;
}

.gateway-intro h1 {
  margin: 0 auto;
  font-size: clamp(44px, 7vw, 84px);
}

.gateway-intro p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.gateway-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: min(640px, calc(100vh - 285px));
  gap: clamp(22px, 3vw, 34px);
}

.choice-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 30px;
  overflow: hidden;
  border-radius: 30px;
  padding: clamp(30px, 4vw, 50px);
  color: #fff;
  box-shadow: var(--shadow);
}

.choice-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}

.crm-panel::before {
  background:
    linear-gradient(145deg, rgba(10, 22, 54, 0.18), rgba(255, 255, 255, 0.1)),
    #0e63ea;
}

.edu-panel::before {
  background:
    linear-gradient(145deg, rgba(78, 18, 0, 0.18), rgba(255, 255, 255, 0.12)),
    #ef4c07;
}

.choice-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.choice-kicker,
.choice-price {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.choice-price {
  text-transform: none;
  letter-spacing: 0;
}

.choice-body {
  align-self: end;
}

.choice-body h2 {
  color: #fff;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 0.98;
  letter-spacing: -2px;
}

.choice-body p {
  max-width: 520px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
  line-height: 1.55;
}

.choice-product {
  min-height: 255px;
  display: flex;
  align-items: end;
}

.phone-frame,
.course-frame {
  width: min(385px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 26px;
  padding: 0 14px 14px;
  background: #f8fafc;
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.phone-appbar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 -14px 12px;
  background: #2f394b;
  color: #fff;
  font-size: 13px;
}

.phone-appbar span {
  width: 22px;
  height: 22px;
  border-radius: 9px;
  background: #142033;
  box-shadow: 0 1px 10px rgba(14, 99, 234, 0.45);
}

.edu-panel .phone-appbar span {
  box-shadow: 0 1px 10px rgba(239, 76, 7, 0.45);
}

.phone-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 999px;
  background: #eef1f6;
  color: #667085;
  font-size: 11px;
  font-weight: 650;
  text-align: center;
}

.phone-tabs span:first-child {
  border-radius: 999px;
  background: #fff;
  color: #232b39;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.phone-top {
  margin-bottom: 12px;
  color: #182132;
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -0.5px;
}

.phone-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.phone-metrics span {
  min-height: 64px;
  display: grid;
  align-content: center;
  padding: 10px;
  border: 1px solid #e6e9ef;
  border-radius: 13px;
  background: #fff;
  color: #8290a5;
  font-size: 10px;
}

.phone-metrics b {
  display: block;
  color: #151d2f;
  font-size: 20px;
  line-height: 1.05;
}

.phone-card,
.course-row-mini {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 13px;
  border: 1px solid #e6e9ef;
  background: #fff;
  color: #142033;
  font-weight: 650;
}

.phone-card + .phone-card,
.course-row-mini + .course-row-mini {
  margin-top: 9px;
}

.crm-panel .phone-card.strong {
  color: #0e63ea;
}

.edu-panel .course-row-mini span {
  color: #ef4c07;
}

.edu-metrics b {
  color: #ef4c07;
}

.choice-cta {
  width: max-content;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  padding: 13px 18px;
  background: #fff;
  color: var(--ink);
  font-weight: 760;
}

.crm-panel .choice-cta { color: #0e63ea; }
.edu-panel .choice-cta { color: #ef4c07; }

.gateway-footnote {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 32px;
  color: var(--muted);
}

.gateway-footnote a {
  font-weight: 650;
}

.edu-body .site-header {
  background: #2f394b;
  border-bottom: 0;
  box-shadow: 0 10px 34px rgba(21, 31, 48, 0.16);
}

.edu-body .support-ribbon {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.edu-body .support-ribbon a,
.edu-body .desktop-nav a {
  color: rgba(255, 255, 255, 0.72);
}

.edu-body .brand {
  color: #fff;
}

.edu-body .brand-mark {
  padding: 6px;
  border-radius: 13px;
  background: #142033;
  box-shadow: 0 2px 14px rgba(239, 76, 7, 0.38);
}

.edu-body .desktop-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.edu-body .header-actions .button.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.edu-body .header-actions .button.primary,
.edu-body .button.primary {
  background: var(--orange);
  border-color: var(--orange);
}

.edu-body .eyebrow {
  color: var(--orange);
}

.edu-body .price-card,
.edu-body .price-box.preferred,
.edu-body .compliance-card {
  border-color: rgba(239, 76, 7, 0.28);
  background: linear-gradient(180deg, #fff, var(--orange-soft));
}

.edu-body .mini-brand {
  background: var(--orange-soft);
  color: var(--orange);
}

.edu-body .product-heading button {
  background: var(--orange);
}

.edu-body .workflow-preview i {
  background: linear-gradient(90deg, var(--orange), var(--blue));
}

.edu-body .door {
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.72fr);
  gap: 54px;
}

.edu-body .door h1 {
  max-width: 780px;
  font-size: clamp(44px, 6.2vw, 76px);
  line-height: 1.03;
}

.subpage-hero {
  padding-top: 64px;
  padding-bottom: 56px;
}

.subpage-hero h1 {
  font-size: clamp(42px, 6vw, 72px);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.55fr);
  gap: 18px;
  align-items: start;
}

.content-card h2 {
  font-size: clamp(26px, 3.5vw, 42px);
  margin-bottom: 16px;
}

.content-card + .content-card { margin-top: 18px; }
.content-card ul, .content-card ol { margin: 14px 0 0; padding-left: 22px; color: var(--muted); }
.content-card li + li { margin-top: 10px; }

.comparison-table { overflow: hidden; }
.comparison-row {
  display: grid;
  grid-template-columns: 0.75fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.comparison-row > * {
  padding: 17px;
  background: var(--surface);
}
.comparison-row.header > * {
  background: var(--surface-2);
  font-weight: 760;
}
.comparison-row b { display: block; }
.comparison-row span { color: var(--muted); }
.honest-gap { color: var(--red); font-weight: 700; }
.good { color: var(--green); font-weight: 700; }

.cookie-banner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  width: min(420px, calc(100% - 36px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.cookie-banner p { color: var(--muted); margin-top: 7px; }
.cookie-banner button { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .header-actions { margin-left: auto; }
  .gateway-choices {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero,
  .feature-split,
  .feature-split.reverse,
  .content-grid {
    grid-template-columns: 1fr;
  }
  .pricing-grid { grid-template-columns: 1fr; }
  .flow-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .header-inner,
  .section,
  .site-footer,
  .gateway-header,
  .gateway-main {
    width: min(100% - 28px, 1180px);
  }

  .gateway-body {
    background:
      linear-gradient(180deg, rgba(14, 99, 234, 0.1) 0 50%, rgba(239, 76, 7, 0.11) 50% 100%),
      var(--bg);
  }
  .gateway-header {
    min-height: auto;
    padding: 18px 0;
    align-items: flex-start;
    flex-direction: column;
  }
  .gateway-header p {
    text-align: left;
  }
  .gateway-main {
    padding-top: 24px;
  }
  .gateway-intro h1 {
    font-size: clamp(38px, 12vw, 58px);
    letter-spacing: -2px;
  }
  .choice-panel {
    min-height: 520px;
    border-radius: 22px;
  }
  .choice-body h2 {
    font-size: clamp(34px, 11vw, 52px);
    letter-spacing: -1.6px;
  }
  .choice-body p {
    font-size: 16px;
  }
  .choice-cta {
    width: 100%;
    justify-content: center;
  }

  .site-header { position: static; }
  .support-ribbon { justify-content: flex-start; flex-wrap: wrap; gap: 8px 14px; }
  .header-inner { min-height: auto; padding: 14px 0; flex-wrap: wrap; gap: 12px; }
  .brand { font-size: 21px; }
  .header-actions { width: 100%; margin-left: 0; }
  .header-actions .button { flex: 1; padding-left: 10px; padding-right: 10px; }
  .section { padding: 54px 0; }
  .hero { min-height: auto; padding-top: 42px; gap: 32px; }
  h1 { font-size: clamp(40px, 12vw, 62px); letter-spacing: -2px; }
  h2 { font-size: clamp(30px, 10vw, 44px); letter-spacing: -1.4px; }
  .lead { font-size: 18px; }
  .cta-row .button { width: 100%; }
  .founder-card { grid-template-columns: 64px 1fr; }
  .founder-photo { width: 64px; }
  .product-shell { grid-template-columns: 1fr; min-height: auto; }
  .product-sidebar { display: none; }
  .product-main { padding: 20px; }
  .product-heading { display: block; }
  .product-heading button { margin-top: 14px; width: 100%; }
  .metric-grid,
  .flow-grid,
  .support-grid,
  .article-list {
    grid-template-columns: 1fr;
  }
  .course-card { display: block; }
  .course-card span { display: inline-block; margin-top: 14px; }
  .workflow-preview { grid-template-columns: 1fr; }
  .workflow-preview i { height: 20px; width: 1px; justify-self: center; }
  .comparison-row { grid-template-columns: 1fr; }
}

/* Creatori Edu — coherent desktop-first marketing, isolated from /admin and /demo. */
:root{--ink:#172337;--muted:#596477;--orange:#c43d06;--orange-soft:#fff2eb;--blue:#25476e;--blue-deep:#173149;--shadow:0 18px 54px rgba(21,31,48,.09)}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
h1,h2,h3,.brand{font-family:Cabin,Inter,sans-serif;font-weight:700}
h1,h2,h3{overflow-wrap:break-word}
button,a,input{font:inherit}
a:focus-visible,button:focus-visible{outline:3px solid #b43a08;outline-offset:5px}
.header-inner,.section,.site-footer{width:min(calc(100% - 64px),1280px)}
.edu-body .site-header{background:#172337;box-shadow:none}
.edu-body .brand-mark{box-shadow:none}
.support-ribbon{font-size:12px}
.desktop-nav{gap:4px}
.desktop-nav a{padding:9px 10px}
.header-actions{gap:10px}
.header-actions .button{font-size:13px;white-space:nowrap}
.edu-body .hero{grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:48px;min-height:0;padding-top:72px;padding-bottom:76px}
.edu-body .hero h1{font-size:clamp(42px,4.5vw,66px);line-height:1.08;letter-spacing:-2px;max-width:630px}
.hero-copy,.hero-visual{min-width:0}
.hero-copy .lead{font-size:18px;line-height:1.7;max-width:590px;margin-top:24px}
.hero-copy .hero-line{font-size:13px;line-height:1.65;margin-top:18px;max-width:550px}
.hero-copy .cta-row{gap:12px;margin-top:26px}
.hero-copy .cta-row .button{font-size:14px;padding:13px 18px}
.hero-visual .product-stage{width:100%;transform:none;box-shadow:var(--shadow);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.hero-visual .browser-bar{padding:13px 16px}
.hero-visual .browser-bar p{font-size:11px}
.hero-visual .product-shell{grid-template-columns:104px minmax(0,1fr);min-height:395px}
.hero-visual .product-sidebar{padding:20px 10px}
.hero-visual .product-sidebar b,.hero-visual .product-sidebar span:not(.mini-brand){font-size:10px;overflow-wrap:break-word;padding-left:6px;padding-right:6px}
.hero-visual .product-main{padding:20px 16px}
.hero-visual .product-heading{display:block;margin-bottom:20px}
.hero-visual .product-heading h2{font-size:25px;letter-spacing:-.6px;line-height:1.2}
.hero-visual .product-heading span{font-size:11px}
.hero-visual .metric-grid{gap:8px}
.hero-visual .metric-grid article{padding:12px 9px;border-radius:10px;min-width:0}
.hero-visual .metric-grid span,.hero-visual .metric-grid small{font-size:10px}
.hero-visual .metric-grid strong{font-size:20px;line-height:1.3;letter-spacing:-.6px;overflow-wrap:break-word}
.hero-visual .course-card{display:block;padding:14px;font-size:11px}
.hero-visual .course-card p{margin-top:5px}
.hero-visual .course-card span{display:inline-block;margin-top:10px;font-size:10px}
.hero-visual .workflow-preview{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.hero-visual .workflow-preview span{font-size:10px;padding:5px 7px}
.hero-visual .workflow-preview i{display:none}
.hero-visual>p,.illustration-note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.6}
.eyebrow{letter-spacing:1.2px;font-weight:600}
.section{padding-top:64px;padding-bottom:64px}
.section-heading{max-width:790px}
h2{font-size:clamp(30px,3.1vw,44px);line-height:1.16;letter-spacing:-1px}
h3{line-height:1.3}
.button.secondary{background:#fff;color:var(--ink);border-color:#b6bec9}
.button.secondary:hover{background:#edf0f3}
.button.primary:hover{background:#a83405;border-color:#a83405}
.text-link,.answer-card a{color:var(--orange)}
.section-heading p{max-width:740px}
.flow-grid{gap:18px}
.flow-card,.content-card,.compliance-card,.support-card,.price-box{box-shadow:none}
.content-card a:not(.button),.content-card li a,.content-card p a{color:#9a3309;text-decoration:underline;text-underline-offset:3px}
.status-label{display:inline-block;font-size:12px;font-weight:600;color:#854011;background:#fff0de;padding:5px 10px;border-radius:7px;margin-bottom:12px}
.site-footer{gap:20px}
@media(max-width:1080px){
 .edu-body .hero{grid-template-columns:minmax(0,1fr);gap:38px;padding-top:46px;padding-bottom:48px}
 .hero-visual{width:100%;max-width:780px}
 .edu-body .hero h1{max-width:750px;font-size:clamp(42px,7vw,64px)}
 .hero-visual .product-shell{grid-template-columns:130px minmax(0,1fr)}
 .hero-visual .product-main{padding:26px}
 .hero-visual .product-heading h2{font-size:30px}
 .hero-visual .metric-grid strong{font-size:25px}
}
@media(max-width:720px){
 .header-inner,.section,.site-footer{width:calc(100% - 32px)}
 .edu-body .hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:34px;padding-bottom:40px}
 .edu-body .hero h1{font-size:clamp(35px,9.5vw,50px);letter-spacing:-1px;line-height:1.12;overflow-wrap:break-word}
 .hero-copy .lead{font-size:16px;line-height:1.65;margin-top:18px}
 .hero-copy .cta-row{gap:10px;margin-top:22px}
 .header-actions .button{font-size:12px;padding:10px 8px}
 .hero-visual .product-shell{grid-template-columns:minmax(0,1fr);min-height:0}
 .hero-visual .product-sidebar{display:none}
 .hero-visual .product-main{padding:17px}
 .hero-visual .product-heading h2{font-size:25px}
 .hero-visual .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .hero-visual .metric-grid strong{font-size:19px}
 .hero-visual .metric-grid article{padding:10px 7px}
 .section{padding-top:42px;padding-bottom:42px}
 .support-ribbon{padding:9px 16px;font-size:11px}
 .content-grid,.feature-split,.feature-split.reverse{grid-template-columns:minmax(0,1fr)}
 .content-card{min-width:0;padding:22px}
 .content-card h2{font-size:29px}
 .subpage-hero h1{font-size:clamp(34px,10vw,48px);letter-spacing:-1px}
 .site-footer{align-items:flex-start}
 .site-footer nav{flex-wrap:wrap}
}

.mockup-label{padding:10px 16px;background:#fff2eb;color:#8c380f;font-size:11px;font-weight:600;border-bottom:1px solid #efdfd2}
.mockup-badge{display:inline-block;margin-top:10px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted)}
.pricing-grid{grid-template-columns:minmax(0,1fr);max-width:850px}
.price-box strong{font-family:Cabin,Inter,sans-serif;font-size:30px;letter-spacing:-.5px}
@media(max-width:720px){.final-cta{flex-direction:column;align-items:stretch;gap:24px}.final-cta .cta-row{display:grid;grid-template-columns:1fr}.final-cta .button{width:100%}}
@media(max-width:360px){.edu-body .hero h1{font-size:32px}.hero-visual .metric-grid strong{font-size:17px}}

.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.contact-card{margin-bottom:0}.contact-card h3{font-size:26px}.contact-phone{font-size:21px;white-space:nowrap}.contact-section{scroll-margin-top:130px}@media(max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}

.demo-video-section{scroll-margin-top:120px}.demo-video-section .section-heading{max-width:780px}.demo-video-player{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid #d9dfe5;border-radius:18px;background:#101c2c;box-shadow:0 18px 42px rgba(16,28,44,.09)}.demo-video-note{margin-top:16px;font-size:14px;color:#475569}.demo-video-note a{font-size:inherit}@media(max-width:600px){.demo-video-player{border-radius:12px}}