/* =========================================================
   FEATRA DESIGN TOKENS — edit these first to re-theme the site
   ========================================================= */
:root {
  --accent: #ffbf00;
  --accent-strong: #e9aa00;
  --accent-soft: #fff7dc;
  --accent-softer: #fffbef;
  --ink: #262624;
  --ink-strong: #111214;
  --muted: #6d7480;
  --muted-2: #9298a1;
  --line: #e8e9e7;
  --line-strong: #d9dbd9;
  --panel: #ffffff;
  --panel-soft: #f7f8f6;
  --panel-warm: #fbfaf6;
  --success: #2fa665;
  --danger: #e2564b;
  --shadow: 0 22px 70px rgba(31, 35, 32, 0.08);
  --shadow-small: 0 10px 34px rgba(31, 35, 32, 0.07);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --page: 1220px;
  --font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

body.modal-open { overflow: hidden; }

.page-shell { overflow: clip; }
.site-header {
  width: min(calc(100% - 48px), var(--page));
  height: 84px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 30;
}
.brand { display: inline-flex; align-items: center; width: fit-content; }
.brand img { display: block; width: 154px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 34px; }
.desktop-nav a {
  font-size: 14px;
  font-weight: 520;
  color: #454a52;
  transition: color .2s ease;
}
.desktop-nav a:hover { color: var(--ink-strong); }
.header-actions { display: flex; justify-content: flex-end; gap: 10px; }
.button {
  min-height: 44px;
  padding: 0 19px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary {
  background: var(--accent);
  color: #1b1a16;
  box-shadow: 0 8px 20px rgba(255,191,0,.18);
}
.button-primary:hover { background: #ffc516; box-shadow: 0 10px 24px rgba(255,191,0,.25); }
.button-secondary { background: #fff; border-color: var(--line-strong); }
.button-secondary:hover { border-color: #bfc3bf; }
.button-large { min-height: 52px; padding: 0 25px; font-size: 15px; }
.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 13px;
  cursor: pointer;
}
.menu-button span { display: block; height: 2px; background: var(--ink); margin: 5px 0; }

.section {
  width: min(calc(100% - 48px), var(--page));
  margin: 0 auto;
  padding: 108px 0;
  position: relative;
}
.section-bordered::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: var(--line);
}
.eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: .19em;
  text-transform: uppercase;
  font-weight: 650;
  color: #76808f;
}
.section-heading { max-width: 710px; margin-bottom: 52px; }
.section-heading-centered { text-align: center; margin-left: auto; margin-right: auto; }
.section-heading h2 {
  margin: 0;
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1.03;
  letter-spacing: -.045em;
  color: var(--ink-strong);
}
.section-heading p:not(.eyebrow) {
  margin: 20px auto 0;
  max-width: 660px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.58;
}

/* HERO */
.hero { padding-top: 64px; padding-bottom: 118px; }
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  border: 60px solid rgba(255,191,0,.055);
  pointer-events: none;
  z-index: -1;
}
.hero::before { left: -360px; top: 310px; }
.hero::after { right: -380px; top: 310px; }
.hero-copy { text-align: center; max-width: 900px; margin: 0 auto 58px; }
.hero-copy h1 {
  margin: 0;
  font-size: clamp(52px, 6.7vw, 84px);
  line-height: .97;
  letter-spacing: -.065em;
  color: var(--ink-strong);
  font-weight: 680;
}
.hero-copy .hero-body {
  max-width: 790px;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
}
.hero-copy .hero-cta { margin-top: 32px; }

/* PRODUCT PREVIEW */
.product-window {
  background: rgba(255,255,255,.95);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 610px;
}
.mock-topbar {
  height: 64px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 210px 1fr 170px;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  background: rgba(255,255,255,.92);
}
.mock-brand { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; }
.mock-mark { width: 22px; height: 18px; position: relative; }
.mock-mark::before, .mock-mark::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 3px solid var(--accent); transform: rotate(45deg); border-radius: 2px;
}
.mock-mark::before { left: 1px; top: 2px; }
.mock-mark::after { right: 1px; top: 2px; }
.ask-bar {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #9a9fa8;
  font-size: 12px;
  background: #fafbfa;
}
.mock-user { justify-self: end; display: flex; align-items: center; gap: 10px; font-size: 12px; color: #68707c; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #f1f2ef; display: grid; place-items: center; font-weight: 650; color: #232622; }
.mock-body { display: grid; grid-template-columns: 210px 1fr; min-height: 545px; }
.mock-sidebar { border-right: 1px solid var(--line); padding: 19px 13px; background: #fcfcfb; }
.mock-search { height: 38px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; display: flex; align-items: center; padding: 0 11px; color: #999fa6; font-size: 12px; }
.mock-nav-item { display: flex; align-items: center; gap: 10px; min-height: 42px; border-radius: 10px; padding: 0 12px; color: #5d6570; font-size: 13px; margin: 2px 0; }
.mock-nav-item.active { background: var(--accent-soft); color: #9e7100; font-weight: 620; }
.mock-nav-dot { width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 4px; opacity: .8; }
.mock-main { padding: 28px 30px 30px; min-width: 0; }
.feature-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.feature-title-wrap { display: flex; gap: 14px; align-items: flex-start; }
.feature-symbol { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: #b47e00; display: grid; place-items: center; font-weight: 700; font-size: 19px; }
.feature-head h3 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.feature-head p { margin: 7px 0 0; color: var(--muted); font-size: 13px; max-width: 540px; line-height: 1.5; }
.status-pill { padding: 7px 10px; border-radius: 999px; background: #edf8f1; color: #2c8d59; font-size: 12px; font-weight: 650; white-space: nowrap; }
.mock-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-top: 27px; overflow-x: auto; }
.mock-tab { padding: 0 1px 13px; font-size: 12px; color: #7a828e; white-space: nowrap; }
.mock-tab.active { color: #b47e00; border-bottom: 2px solid var(--accent); font-weight: 600; }
.lifecycle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 31px; position: relative; }
.lifecycle::before { content: ""; position: absolute; top: 11px; left: 8%; right: 8%; height: 2px; background: #eceeea; }
.life-step { text-align: center; position: relative; z-index: 1; }
.life-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d8dbd7; margin: 0 auto 10px; background: #fff; }
.life-step.done .life-dot, .life-step.active .life-dot { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 6px var(--accent); }
.life-step.active .life-dot { background: #fff; box-shadow: inset 0 0 0 5px #fff; border-width: 4px; }
.life-label { font-size: 12px; font-weight: 620; color: #32363c; }
.life-date { font-size: 10px; color: #9299a2; margin-top: 4px; }
.metrics-and-signals { display: grid; grid-template-columns: 1fr 255px; gap: 24px; margin-top: 29px; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.metric-card { border: 1px solid var(--line); border-radius: 12px; min-height: 103px; padding: 15px; background: #fff; position: relative; overflow: hidden; }
.metric-card::after { content:""; position:absolute; right:-18px; bottom:-30px; width:90px; height:70px; border:2px solid rgba(255,191,0,.24); border-color: rgba(255,191,0,.24) transparent transparent transparent; border-radius:50%; transform: rotate(-9deg); }
.metric-label { color: #818894; font-size: 11px; }
.metric-value { font-size: 24px; font-weight: 650; margin-top: 9px; letter-spacing: -.035em; }
.metric-delta { font-size: 10px; margin-top: 5px; color: var(--muted); }
.metric-delta.good { color: var(--success); }
.metric-delta.warn { color: var(--danger); }
.signal-panel { border: 1px solid var(--line); border-radius: 14px; padding: 15px; }
.signal-panel-title { font-size: 12px; font-weight: 650; margin-bottom: 7px; }
.signal-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; padding: 10px 0; border-top: 1px solid #f0f1ef; }
.signal-row:first-of-type { border-top: 0; }
.signal-mark { width: 28px; height: 28px; border-radius: 8px; background: #f3f4f2; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #555b63; }
.signal-name { font-size: 11px; font-weight: 600; }
.signal-detail { font-size: 9px; color: #979da5; margin-top: 2px; }
.signal-arrow { color: #a0a5ac; }

/* THREE STEP SECTION */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.step-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(29,33,30,.035);
  display: flex;
  flex-direction: column;
  min-height: 440px;
}
.step-number { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: #a67500; font-weight: 700; font-size: 17px; }
.step-card h3 { margin: 22px 0 10px; font-size: 24px; line-height: 1.12; letter-spacing: -.035em; }
.step-card > p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
.bullet-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 11px; }
.bullet-list li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; font-size: 14px; line-height: 1.45; color: #4f5660; }
.bullet-list li::before { content: "✓"; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #332500; display: grid; place-items: center; font-size: 11px; font-weight: 800; margin-top: 1px; }
.step-group { margin-top: 21px; }
.step-group + .step-group { padding-top: 18px; border-top: 1px solid var(--line); }
.step-group-label { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 650; color: #858c96; }
.step-group .bullet-list { margin-top: 12px; gap: 8px; }
.step-callout { margin-top: auto !important; padding-top: 24px; font-weight: 600; color: #2f3338 !important; }

/* FEATURE PLATFORM */
.feature-section::before {
  content: ""; position: absolute; inset: 0 calc((100vw - min(100vw - 48px, var(--page))) / -2); background: linear-gradient(180deg,#fff 0%, var(--accent-softer) 48%, #fff 100%); z-index: -2;
}
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.feature-card {
  width: 100%; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.9); padding: 22px; display: grid; grid-template-columns: 48px 1fr 38px; gap: 15px; align-items: center; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.feature-card:hover { transform: translateY(-2px); border-color: #d3d5d2; box-shadow: var(--shadow-small); background: #fff; }
.feature-card.active { border-color: #e7bc46; box-shadow: 0 12px 36px rgba(255,191,0,.10); background: #fff; }
.feature-icon { width: 48px; height: 48px; border-radius: 13px; background: var(--accent-soft); display: grid; place-items: center; color: #a67500; }
.feature-card h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.feature-card p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; max-width: 480px; }
.feature-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 19px; color: #666e78; transition: transform .2s ease; }
.feature-card.active .feature-arrow { transform: rotate(90deg); background: var(--accent); border-color: var(--accent); color: #211900; }
.feature-detail { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-small); overflow: hidden; }
.feature-detail-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 455px; }
.feature-detail-copy { padding: 44px; }
.feature-detail-copy .eyebrow { margin-bottom: 13px; }
.feature-detail-copy h3 { margin: 0; font-size: 36px; line-height: 1.05; letter-spacing: -.045em; color: var(--ink-strong); }
.feature-detail-copy > p { color: var(--muted); line-height: 1.6; font-size: 16px; margin: 18px 0 0; }
.feature-detail-copy .bullet-list { margin-top: 26px; }
.feature-detail-visual { background: #f6f7f5; border-left: 1px solid var(--line); padding: 34px; display: flex; align-items: center; }
.visual-shell { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 20px; box-shadow: 0 14px 36px rgba(34,38,35,.05); }
.visual-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.visual-title { font-weight: 650; font-size: 13px; }
.visual-pill { background: var(--accent-soft); color: #946a00; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 650; }
.visual-list { margin-top: 8px; }
.visual-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 15px 0; border-bottom: 1px solid #eff0ee; font-size: 12px; }
.visual-row:last-child { border-bottom: 0; }
.visual-row strong { font-weight: 620; }
.visual-row span { color: var(--muted); }
.visual-lifecycle { display: grid; gap: 12px; margin-top: 16px; }
.visual-life-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; font-size: 11px; }
.visual-bar { height: 8px; background: #eff0ee; border-radius: 999px; overflow: hidden; }
.visual-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* INTEGRATIONS */
.compact-stack { padding-top: 78px; padding-bottom: 78px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
.compact-stack::before { content:""; position:absolute; top:0; left:50%; width:100vw; height:1px; transform:translateX(-50%); background:var(--line); }
.integration-copy h2 { margin: 0; font-size: 37px; letter-spacing: -.04em; line-height: 1.08; }
.integration-copy > p:not(.eyebrow) { margin: 15px 0 0; color: var(--muted); line-height: 1.55; }
.integration-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.integration-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 14px; font-size: 13px; font-weight: 550; color: #4e555e; }

/* FINAL CTA */
.final-cta { text-align: center; padding: 120px 20px 130px; }
.final-cta::before { content:""; position:absolute; width:680px; height:680px; border-radius:50%; background: radial-gradient(circle, rgba(255,191,0,.15), rgba(255,191,0,0) 64%); left:50%; top:50%; transform:translate(-50%,-50%); z-index:-1; }
.final-cta h2 { font-size: clamp(43px,5vw,66px); line-height: 1; letter-spacing: -.055em; margin: 0; color: var(--ink-strong); }
.final-cta > p:not(.eyebrow) { max-width: 620px; margin: 20px auto 0; color: var(--muted); font-size: 18px; line-height: 1.55; }
.cta-row { display: flex; justify-content: center; gap: 10px; margin-top: 29px; }

.site-footer { width:min(calc(100% - 48px),var(--page)); margin:0 auto; border-top:1px solid var(--line); min-height:130px; display:flex; align-items:center; justify-content:space-between; gap:30px; color:var(--muted); font-size:13px; }
.site-footer p { margin:0; max-width:650px; line-height:1.5; }

/* MODALS */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(21,22,20,.48); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 20px; }
.modal { width: min(100%, 630px); max-height: min(90vh, 780px); overflow: auto; background: #fff; border-radius: 24px; box-shadow: 0 35px 100px rgba(0,0,0,.22); position: relative; padding: 40px; }
.modal-close { position:absolute; top:17px; right:17px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:24px; line-height:1; cursor:pointer; color:#60666e; }
.modal h2 { font-size: 38px; line-height: 1.02; letter-spacing: -.045em; margin:0; padding-right:40px; }
.modal-copy { color:var(--muted); line-height:1.55; margin:15px 0 26px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field { display:grid; gap:7px; }
.form-field.full { grid-column:1/-1; }
.form-field label { font-size:12px; font-weight:620; color:#4d535b; }
.form-field input, .form-field textarea, .form-field select { width:100%; border:1px solid var(--line-strong); border-radius:10px; min-height:46px; padding:10px 12px; outline:none; background:#fff; color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease; }
.form-field textarea { min-height:100px; resize:vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color:#cf9d14; box-shadow:0 0 0 4px rgba(255,191,0,.13); }
.form-actions { margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.form-note { color:#999fa6; font-size:11px; line-height:1.4; }
.success-state { text-align:center; padding:30px 4px 18px; }
.success-check { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; margin:0 auto 18px; background:var(--accent-soft); color:#9f7100; font-size:24px; font-weight:800; }
.success-state p { color:var(--muted); line-height:1.6; }

.mobile-drawer { display:none; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav, .header-actions { display:none; }
  .menu-button { display:block; }
  .mobile-drawer { position:fixed; top:76px; left:16px; right:16px; z-index:60; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:14px; }
  .mobile-drawer.open { display:block; }
  .mobile-drawer a, .mobile-drawer button { width:100%; min-height:48px; display:flex; align-items:center; padding:0 14px; border-radius:10px; border:0; background:transparent; font-weight:550; cursor:pointer; }
  .mobile-drawer a:hover, .mobile-drawer button:hover { background:var(--panel-soft); }
  .mobile-drawer .button { margin-top:8px; justify-content:center; }
  .mock-topbar { grid-template-columns: 160px 1fr 80px; }
  .mock-body { grid-template-columns: 160px 1fr; }
  .metrics-and-signals { grid-template-columns: 1fr; }
  .signal-panel { display:none; }
  .steps-grid { grid-template-columns:1fr; }
  .step-card { min-height:0; }
  .feature-detail-inner { grid-template-columns:1fr; }
  .feature-detail-visual { border-left:0; border-top:1px solid var(--line); }
  .compact-stack { grid-template-columns:1fr; gap:28px; }
  .integration-list { justify-content:flex-start; }
}

@media (max-width: 720px) {
  .site-header, .section, .site-footer { width:min(calc(100% - 28px),var(--page)); }
  .site-header { height:74px; }
  .brand img { width:134px; }
  .section { padding:80px 0; }
  .hero { padding-top:48px; padding-bottom:88px; }
  .hero-copy { margin-bottom:40px; }
  .hero-copy h1 { font-size:clamp(45px,13vw,64px); }
  .hero-copy .hero-body { font-size:17px; }
  .product-window { min-height:0; border-radius:18px; }
  .mock-topbar { height:56px; grid-template-columns:1fr auto; padding:0 14px; }
  .ask-bar { display:none; }
  .mock-body { grid-template-columns:1fr; min-height:0; }
  .mock-sidebar { display:none; }
  .mock-main { padding:22px 17px 24px; }
  .feature-head { align-items:center; }
  .feature-title-wrap { gap:10px; }
  .feature-symbol { width:40px; height:40px; }
  .feature-head h3 { font-size:19px; }
  .feature-head p { display:none; }
  .mock-tabs { gap:18px; margin-top:21px; }
  .lifecycle { overflow-x:auto; grid-template-columns:repeat(5, 95px); padding-bottom:5px; }
  .lifecycle::before { left:45px; right:auto; width:390px; }
  .metrics-grid { grid-template-columns:repeat(2,1fr); }
  .metrics-and-signals { margin-top:22px; }
  .section-heading { margin-bottom:34px; }
  .section-heading h2 { font-size:40px; }
  .section-heading p:not(.eyebrow) { font-size:16px; }
  .step-card { padding:23px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { grid-template-columns:44px 1fr 34px; padding:18px; }
  .feature-icon { width:44px; height:44px; }
  .feature-detail-copy, .feature-detail-visual { padding:25px; }
  .feature-detail-copy h3 { font-size:31px; }
  .compact-stack { padding-top:65px; padding-bottom:65px; }
  .final-cta { padding:95px 12px 105px; }
  .cta-row { flex-direction:column; align-items:stretch; max-width:320px; margin-left:auto; margin-right:auto; }
  .site-footer { min-height:150px; flex-direction:column; align-items:flex-start; justify-content:center; }
  .modal { padding:30px 22px 24px; border-radius:19px; }
  .modal h2 { font-size:33px; }
  .form-grid { grid-template-columns:1fr; }
  .form-field.full { grid-column:auto; }
  .form-actions { flex-direction:column; align-items:stretch; }
}