:root {
  color-scheme: light;
  --ink: #101820;
  --ink-soft: #20303a;
  --slate: #4c5b63;
  --muted: #66757e;
  --line: #d8e0e4;
  --mist: #eef2f4;
  --paper: #fafbfb;
  --white: #ffffff;
  --teal: #1597a8;
  --teal-dark: #0b7381;
  --teal-light: #d8f3f5;
  --aqua: #62ced8;
  --shadow-sm: 0 1px 2px rgb(16 24 32 / 7%), 0 8px 24px rgb(16 24 32 / 6%);
  --shadow-lg: 0 24px 70px rgb(9 20 28 / 18%);
  --radius: 18px;
  --radius-lg: 28px;
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -6rem; z-index: 1000; padding: .8rem 1rem; border-radius: 8px; color: var(--white); background: var(--ink); }
.skip-link:focus { top: 1rem; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.narrow { width: min(calc(100% - 40px), 780px); margin-inline: auto; }
.section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.section-tight { padding: clamp(3.5rem, 6vw, 5rem) 0; }
.section-mist { background: var(--mist); }
.section-dark { color: var(--white); background: var(--ink); }
.eyebrow { margin: 0 0 1rem; color: var(--teal-dark); font-size: .78rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.section-dark .eyebrow { color: var(--aqua); }
h1, h2, h3 { margin: 0; font-weight: 760; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 6.7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.1vw, 3.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
p { margin: 0; }
.lede { max-width: 720px; color: var(--slate); font-size: clamp(1.08rem, 1.7vw, 1.3rem); line-height: 1.6; }
.section-dark .lede, .on-dark { color: #c5d0d5; }
.header-row { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.header-row > div { max-width: 760px; }
.header-row .lede { margin-top: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .55rem; padding: .76rem 1.15rem; border: 1px solid transparent; border-radius: 10px; font-weight: 760; line-height: 1.2; text-decoration: none; transition: transform .18s ease, background .18s ease, border-color .18s ease; cursor: pointer; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: var(--white); background: var(--teal-dark); }
.btn-primary:hover { background: #075f6b; }
.btn-secondary { border-color: #aebbc1; color: var(--ink); background: transparent; }
.btn-secondary:hover { border-color: var(--teal-dark); background: var(--white); }
.section-dark .btn-primary { color: var(--ink); background: var(--aqua); }
.section-dark .btn-primary:hover { background: #8ee1e7; }
.section-dark .btn-secondary { border-color: #52616a; color: var(--white); }
.section-dark .btn-secondary:hover { border-color: var(--aqua); background: #182630; }
.text-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.25rem; color: var(--teal-dark); font-weight: 760; text-decoration: none; }
.text-link::after { content: "→"; transition: transform .18s ease; }
.text-link:hover::after { transform: translateX(4px); }

.site-header { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid rgb(216 224 228 / 80%); background: rgb(250 251 251 / 92%); backdrop-filter: blur(16px); }
.nav-shell { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 276px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 1.4rem; }
.desktop-nav > a:not(.btn) { position: relative; color: var(--ink-soft); font-size: .93rem; font-weight: 680; text-decoration: none; }
.desktop-nav > a:not(.btn)::after { content: ""; position: absolute; right: 0; bottom: -.45rem; left: 0; height: 2px; transform: scaleX(0); background: var(--teal); transition: transform .18s ease; }
.desktop-nav > a[aria-current="page"]::after, .desktop-nav > a:hover::after { transform: scaleX(1); }
.menu-button { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--white); cursor: pointer; }
.menu-button svg { width: 24px; }
.mobile-menu { display: none; }

.hero { position: relative; overflow: hidden; color: var(--white); background: var(--ink); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 8% 5%, rgb(21 151 168 / 25%), transparent 32%), linear-gradient(115deg, #101820 24%, #142630 72%, #0c141a); }
.hero-grid { position: relative; display: grid; min-height: 690px; grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(4.5rem, 9vw, 8rem); }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { max-width: 760px; }
.hero-copy .lede { max-width: 660px; margin-top: 1.5rem; color: #ced7dc; }
.hero-kicker { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.25rem; color: var(--aqua); font-size: .8rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.hero-kicker::before { content: ""; width: 36px; height: 2px; background: var(--aqua); }
.hero-media { position: relative; min-height: 480px; align-self: stretch; }
.hero-photo { position: absolute; inset: 0 calc((100vw - min(100vw - 40px, var(--max))) / -2) 0 0; width: calc(100% + (100vw - min(100vw - 40px, var(--max))) / 2); height: 100%; object-fit: cover; object-position: 63% center; border-radius: var(--radius-lg) 0 0 var(--radius-lg); filter: saturate(.82) contrast(1.02); }
.hero-media::after { content: ""; position: absolute; inset: 0 -10vw 0 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: linear-gradient(90deg, #101820 0%, rgb(16 24 32 / 28%) 32%, transparent 68%); }
.product-stamp { position: absolute; z-index: 2; right: 1rem; bottom: 1.2rem; width: min(290px, 82%); padding: 1rem 1.15rem; border: 1px solid rgb(255 255 255 / 24%); border-radius: 12px; background: rgb(9 20 28 / 82%); box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); }
.product-stamp small { display: block; color: var(--aqua); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.product-stamp strong { display: block; margin-top: .2rem; font-size: 1.2rem; }
.trust-strip { border-bottom: 1px solid var(--line); background: var(--white); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { position: relative; padding: 1.35rem 1.4rem; border-left: 1px solid var(--line); color: var(--ink-soft); font-size: .9rem; font-weight: 750; text-align: center; text-decoration: none; transition: color .18s ease, background .18s ease; }
.trust-item::after { content: "→"; margin-left: .4rem; color: var(--teal-dark); }
.trust-item:hover { color: var(--teal-dark); background: var(--teal-light); }
.trust-item:last-child { border-right: 1px solid var(--line); }

.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 8vw, 7rem); align-items: start; }
.statement { position: sticky; top: 120px; }
.statement p { margin-top: 1.5rem; }
.stack { display: grid; gap: 1rem; }
.card { padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.card-icon { display: grid; width: 46px; height: 46px; margin-bottom: 1.25rem; place-items: center; border-radius: 10px; color: var(--teal-dark); background: var(--teal-light); }
.card-icon svg { width: 24px; height: 24px; }
.card h3 + p { margin-top: .75rem; color: var(--slate); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
.card-grid .card { height: 100%; }
.principle-stack { display: grid; gap: 1rem; }
.principle-card { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.principle-card .card-icon { margin: 0; }
.principle-card h3 { margin-top: .35rem; }
.principle-card h3 + p { margin-top: .7rem; color: var(--slate); }
.principle-name, .screen-kicker { color: var(--teal-dark); font-size: .78rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.plain-list { display: grid; gap: .4rem; margin: 1rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .94rem; }

.product-panel { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); border: 1px solid #34434d; border-radius: var(--radius-lg); background: linear-gradient(145deg, #152630, #0c141a 68%); box-shadow: var(--shadow-lg); }
.product-panel::after { content: ""; position: absolute; width: 440px; height: 440px; right: -200px; bottom: -260px; border: 1px solid rgb(98 206 216 / 24%); border-radius: 50%; box-shadow: 0 0 0 54px rgb(98 206 216 / 4%), 0 0 0 108px rgb(98 206 216 / 3%); }
.product-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: center; }
.product-label { display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .62rem; border: 1px solid #3f5662; border-radius: 999px; color: var(--aqua); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-panel h2 { margin-top: 1.2rem; }
.product-panel .lede { margin-top: 1.1rem; }
.ui-window { overflow: hidden; border: 1px solid #43545e; border-radius: 16px; background: #f8fbfc; box-shadow: 0 24px 60px rgb(0 0 0 / 30%); transform: rotate(1.2deg); }
.ui-top { display: flex; align-items: center; gap: .42rem; height: 40px; padding: 0 .9rem; background: #162630; }
.ui-dot { width: 7px; height: 7px; border-radius: 50%; background: #53646d; }
.ui-body { display: grid; min-height: 320px; grid-template-columns: 72px 1fr; }
.ui-rail { padding: .9rem .7rem; background: #edf2f4; }
.ui-rail i { display: block; width: 100%; height: 8px; margin-bottom: .8rem; border-radius: 4px; background: #c6d1d6; }
.ui-rail i:first-child { background: var(--teal); }
.ui-content { padding: 1.2rem; }
.ui-title { width: 42%; height: 14px; margin-bottom: 1.2rem; border-radius: 5px; background: #1f3039; }
.ui-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
.ui-field { height: 54px; border: 1px solid #d9e1e4; border-radius: 8px; background: #fff; }
.ui-field.wide { grid-column: 1 / -1; height: 76px; }
.ui-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.ui-button { width: 94px; height: 34px; border-radius: 7px; background: var(--teal-dark); }

.product-intro { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.product-intro h2 { margin-top: 1.15rem; }
.product-intro .lede { margin-top: 1rem; }
.real-product-showcase { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: stretch; }
.product-image-frame { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid #40515b; border-radius: var(--radius-lg); background: #0b141a; box-shadow: var(--shadow-lg); }
.product-image-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 8%); border-radius: inherit; pointer-events: none; }
.product-image-frame > img { width: 100%; height: 100%; min-height: 530px; object-fit: cover; }
.product-image-frame figcaption { position: absolute; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .55rem; padding: .62rem .78rem; border: 1px solid rgb(255 255 255 / 24%); border-radius: 9px; color: var(--ink); background: rgb(216 243 245 / 92%); box-shadow: 0 10px 30px rgb(0 0 0 / 24%); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); }
.product-image-frame figcaption img { width: 24px; height: 24px; }
.ui-insight-list { display: grid; gap: .8rem; }
.ui-insight-list article { padding: 1.35rem; border: 1px solid #34444d; border-radius: 14px; background: #172630; }
.ui-insight-list span { color: var(--aqua); font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.ui-insight-list h3 { margin-top: .45rem; font-size: clamp(1.2rem, 2vw, 1.45rem); }
.ui-insight-list p { margin-top: .65rem; color: #c5d0d5; font-size: .92rem; }
.section-dark .view-note { color: #aebdc4; }
.product-explorer { overflow: hidden; border: 1px solid #34444d; border-radius: var(--radius-lg); background: #13212a; box-shadow: var(--shadow-lg); }
.product-tabs { display: flex; gap: .25rem; padding: .6rem; border-bottom: 1px solid #34444d; background: #0d171d; }
.product-tabs button { flex: 1; min-height: 48px; padding: .7rem 1rem; border: 1px solid transparent; border-radius: 9px; color: #b9c7cd; background: transparent; font-weight: 760; cursor: pointer; }
.product-tabs button[aria-selected="true"] { border-color: #35515c; color: var(--white); background: #1a2d37; box-shadow: inset 0 -2px var(--aqua); }
.product-tabs button:hover { color: var(--white); }
.product-view { display: grid; min-height: 500px; grid-template-columns: .68fr 1.32fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem); }
.product-view[hidden] { display: none; }
.screen-copy h3 { margin-top: .7rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.screen-copy > p:not(.screen-kicker) { margin-top: 1rem; color: #c7d2d7; }
.section-dark .screen-copy .text-link { color: var(--aqua); }
.app-shell { overflow: hidden; border: 1px solid #60717a; border-radius: 16px; color: var(--ink); background: #f6f9fa; box-shadow: 0 28px 70px rgb(0 0 0 / 32%); }
.app-top { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 1.1rem; color: var(--white); background: #132630; }
.app-top span { color: #b9cbd2; font-size: .78rem; }
.app-body { display: grid; min-height: 330px; grid-template-columns: 120px 1fr; }
.app-rail { display: grid; align-content: start; gap: .4rem; padding: 1rem .7rem; background: #e9eff1; }
.app-rail span { padding: .55rem .65rem; border-radius: 7px; color: #53636b; font-size: .78rem; font-weight: 720; }
.app-rail span.active { color: #075f6b; background: var(--teal-light); }
.app-canvas { display: flex; min-width: 0; flex-direction: column; padding: 1.2rem; }
.app-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.app-heading small { display: block; color: var(--teal-dark); font-size: .66rem; font-weight: 850; letter-spacing: .12em; }
.app-heading strong { display: block; margin-top: .2rem; font-size: 1.1rem; }
.status-pill { display: inline-flex; width: fit-content; padding: .28rem .55rem; border-radius: 999px; color: #0d5a3a; background: #dff3e8; font-size: .7rem; font-weight: 800; }
.status-pill.neutral { color: #604910; background: #f5ebc9; }
.field-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-top: 1.2rem; }
.field-preview-grid > span { display: grid; min-height: 66px; align-content: center; padding: .7rem .8rem; border: 1px solid #d9e1e4; border-radius: 8px; background: var(--white); }
.field-preview-grid small, .metric-row small { color: var(--muted); font-size: .68rem; }
.field-preview-grid b { margin-top: .15rem; font-size: .78rem; }
.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; color: var(--muted); font-size: .72rem; }
.app-footer b { padding: .55rem .7rem; border-radius: 7px; color: var(--white); background: var(--teal-dark); }
.phone-scene { display: grid; min-height: 400px; place-items: center; border-radius: 18px; background: radial-gradient(circle at 50% 32%, rgb(98 206 216 / 28%), transparent 38%), linear-gradient(135deg, #172a34, #0b1419); }
.phone-frame-ui { width: min(270px, 78%); padding: 8px; border: 1px solid #647780; border-radius: 34px; color: var(--ink); background: #091117; box-shadow: 0 26px 60px rgb(0 0 0 / 40%); }
.phone-top { display: flex; justify-content: space-between; padding: .55rem .8rem; border-radius: 26px 26px 0 0; color: #c9d6dc; background: #172832; font-size: .65rem; }
.phone-content { padding: 1.2rem; border-radius: 0 0 26px 26px; background: #f7fafb; }
.phone-content > small { color: var(--teal-dark); font-size: .66rem; font-weight: 850; letter-spacing: .1em; }
.phone-content h4 { margin: .3rem 0 1rem; font-size: 1.35rem; }
.phone-summary { display: grid; gap: .2rem; }
.phone-summary span { margin-top: .5rem; color: var(--muted); font-size: .68rem; }
.phone-summary strong { font-size: .82rem; }
.signature-box { display: grid; height: 76px; margin-top: 1rem; place-items: center; border: 1px dashed #9caeb7; border-radius: 8px; color: var(--muted); font-size: .72rem; background: var(--white); }
.phone-content button { width: 100%; min-height: 42px; margin-top: 1rem; border: 0; border-radius: 8px; color: var(--white); background: var(--teal-dark); font-size: .78rem; font-weight: 800; opacity: 1; }
.office-canvas { min-height: 330px; padding: 1.2rem; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.metric-row span { display: grid; padding: .8rem; border: 1px solid #d9e1e4; border-radius: 8px; background: var(--white); }
.metric-row strong { margin-top: .15rem; }
.queue-list { display: grid; margin-top: 1rem; overflow: hidden; border: 1px solid #d9e1e4; border-radius: 8px; background: var(--white); }
.queue-list > div { display: flex; align-items: center; justify-content: space-between; min-height: 54px; gap: 1rem; padding: .7rem .9rem; border-bottom: 1px solid #e2e8ea; font-size: .78rem; }
.queue-list > div:last-child { border-bottom: 0; }
.queue-list > div:first-child { color: var(--muted); background: #eef3f5; }

.photo-split { display: grid; grid-template-columns: 1.03fr .97fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.photo-frame { position: relative; overflow: hidden; min-height: 480px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.photo-frame img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.photo-note { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; padding: 1rem 1.1rem; border: 1px solid rgb(255 255 255 / 22%); border-radius: 12px; color: var(--white); background: rgb(16 24 32 / 80%); backdrop-filter: blur(10px); }
.photo-note strong { display: block; }
.photo-note span { color: #d5dee2; font-size: .9rem; }
.check-list { display: grid; gap: .9rem; padding: 0; margin: 1.7rem 0 0; list-style: none; }
.check-list li { position: relative; padding-left: 2rem; color: var(--ink-soft); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: .05rem; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; color: var(--teal-dark); background: var(--teal-light); font-size: .8rem; font-weight: 900; }
.section-dark .check-list li { color: #d7e0e4; }

.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.role-card { display: flex; min-height: 270px; flex-direction: column; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.role-card:hover { transform: translateY(-4px); border-color: #89bcc3; box-shadow: 0 18px 36px rgb(16 24 32 / 10%); }
.role-icon, .workflow-icon, .belief-word { display: inline-flex; width: fit-content; padding: .32rem .55rem; border-radius: 999px; color: var(--teal-dark); background: var(--teal-light); font-size: .68rem; font-weight: 850; letter-spacing: .1em; }
.role-card h3 { margin-top: 1rem; }
.role-card p { margin-top: .7rem; color: var(--slate); }
.role-action { margin-top: auto; padding-top: 1.2rem; color: var(--teal-dark); font-weight: 800; }
.security-story { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.security-layers { display: grid; gap: .75rem; }
.security-layers div { display: grid; padding: 1rem 1.1rem; border: 1px solid #34444d; border-radius: 12px; background: #172630; }
.security-layers strong { color: var(--aqua); }
.security-layers span { margin-top: .2rem; color: #c5d0d5; font-size: .9rem; }

.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; counter-reset: flow; }
.flow-step { position: relative; min-height: 170px; padding: 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.flow-step::after { content: ""; position: absolute; top: 31px; right: -.77rem; width: .77rem; height: 1px; background: var(--teal); }
.flow-step:last-child::after { display: none; }
.flow-step small { color: var(--teal-dark); font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.flow-step strong { display: block; margin-top: 1rem; line-height: 1.3; }
.flow-step p { margin-top: .5rem; color: var(--slate); font-size: .92rem; line-height: 1.5; }
.jump-nav { position: sticky; z-index: 80; top: 88px; overflow-x: auto; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 95%); backdrop-filter: blur(12px); }
.jump-nav .container { display: flex; min-width: max-content; align-items: center; gap: 1.4rem; }
.jump-nav a { padding: 1rem 0 .9rem; color: var(--ink-soft); font-size: .86rem; font-weight: 760; text-decoration: none; }
.jump-nav a:hover { color: var(--teal-dark); }
.workflow-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.workflow-track article { position: relative; min-height: 215px; padding: 1.3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.workflow-track article::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -.75rem; display: grid; width: 1.4rem; height: 1.4rem; place-items: center; border-radius: 50%; color: var(--white); background: var(--teal-dark); font-size: .75rem; }
.workflow-track article:last-child::after { display: none; }
.workflow-track strong { display: block; margin-top: 1rem; line-height: 1.3; }
.workflow-track p { margin-top: .55rem; color: var(--slate); font-size: .9rem; line-height: 1.5; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-top: 1.7rem; }
.detail-grid div { display: grid; padding: 1rem; border-left: 2px solid var(--teal); background: var(--white); }
.detail-grid span { margin-top: .25rem; color: var(--slate); font-size: .9rem; }
.view-note { margin-top: 1.3rem; color: var(--muted); font-size: .84rem; }
.dark-detail-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.dark-detail-list article { padding: 1.3rem; border: 1px solid #34444d; border-radius: 12px; background: #172630; }
.dark-detail-list article:last-child { grid-column: 1 / -1; }
.dark-detail-list p { margin-top: .55rem; color: #c5d0d5; }
.accordion-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.accordion-grid details { border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow-sm); }
.accordion-grid summary { position: relative; padding: 1.2rem 3rem 1.2rem 1.2rem; font-weight: 800; cursor: pointer; list-style: none; }
.accordion-grid summary::-webkit-details-marker { display: none; }
.accordion-grid summary::after { content: "+"; position: absolute; top: 1rem; right: 1rem; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; color: var(--teal-dark); background: var(--teal-light); font-size: 1.2rem; }
.accordion-grid details[open] summary::after { content: "−"; }
.accordion-grid details p { padding: 0 1.2rem 1.2rem; color: var(--slate); }
.security-domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.security-domain { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.security-domain p { margin-top: .7rem; color: var(--slate); }
.security-domain .security-purpose { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
.control-family-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.control-family-grid article { padding: 1.4rem; border: 1px solid #34444d; border-radius: 14px; background: #172630; }
.control-family-grid strong { color: var(--aqua); }
.control-family-grid p { margin-top: .55rem; color: #c5d0d5; }
.policy-reference { margin-top: 1.5rem; color: #aebdc4; font-size: .88rem; }
.policy-reference a { color: var(--white); }
.security-disclosure { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 7vw, 6rem); }
.disclosure-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.disclosure-columns article { padding: 1.4rem; border: 1px solid #34444d; border-radius: 14px; background: #172630; }
.disclosure-label { display: inline-flex; padding: .32rem .55rem; border-radius: 999px; color: var(--ink); background: var(--aqua); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.disclosure-label.private { color: var(--white); background: #38515e; }
.disclosure-columns ul { display: grid; gap: .7rem; margin: 1.1rem 0 0; padding-left: 1.15rem; color: #d5dfe3; }
.story-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 7rem); }
.story-lead { position: sticky; top: 126px; align-self: start; }
.story-copy { display: grid; gap: 1.3rem; }
.story-copy > p:not(.lede) { color: var(--ink-soft); font-size: 1.08rem; }
.quote-card { margin-top: .8rem; padding: 1.5rem; border-left: 4px solid var(--teal); border-radius: 0 14px 14px 0; color: var(--white); background: var(--ink); }
.quote-card p { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 720; line-height: 1.45; }
.belief-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.belief-grid article { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.belief-grid h3 { margin-top: 1rem; }
.belief-grid p { margin-top: .7rem; color: var(--slate); }
.conversation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.conversation-grid a { display: grid; padding: 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.conversation-grid a:hover { transform: translateY(-3px); border-color: #89bcc3; }
.conversation-grid span { margin-top: .5rem; color: var(--slate); }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.audience-card { padding: 2rem; border-top: 3px solid var(--teal); background: #182630; }
.audience-card p { margin-top: .8rem; color: #bfcbd1; }

.cta-band { position: relative; overflow: hidden; padding: clamp(2.3rem, 5vw, 4rem); border-radius: var(--radius-lg); color: var(--white); background: var(--ink); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgb(21 151 168 / 18%)); }
.cta-band-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.cta-band h2 { max-width: 720px; }

.page-hero { position: relative; overflow: hidden; padding: clamp(4.5rem, 9vw, 8rem) 0; color: var(--white); background: var(--ink); }
.page-hero::after { content: ""; position: absolute; top: -20%; right: -8%; width: 48vw; height: 48vw; border: 1px solid rgb(98 206 216 / 16%); border-radius: 50%; box-shadow: 0 0 0 70px rgb(98 206 216 / 3%), 0 0 0 140px rgb(98 206 216 / 2%); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { max-width: 930px; font-size: clamp(2.7rem, 5.6vw, 5rem); }
.page-hero .lede { margin-top: 1.5rem; color: #ced7dc; }
.hero .btn-secondary, .page-hero .btn-secondary { border-color: #71818a; color: var(--white); }
.hero .btn-secondary:hover, .page-hero .btn-secondary:hover { border-color: var(--aqua); color: var(--white); background: #182630; }
.breadcrumb { margin-bottom: 1.5rem; color: #aebcc3; font-size: .85rem; }
.breadcrumb a { color: inherit; }
.feature-band { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.mini-feature { padding: 1.35rem; border-left: 2px solid var(--teal); background: var(--white); }
.mini-feature p { margin-top: .45rem; color: var(--slate); }
.architecture { display: grid; gap: .8rem; max-width: 920px; margin: 2.5rem auto 0; }
.architecture-row { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; border: 1px solid #34444d; border-radius: 12px; background: #172630; }
.architecture-row strong { color: var(--aqua); }
.architecture-row span { color: #c5d0d5; }
.security-callout { padding: 1.4rem; border-left: 4px solid var(--teal); border-radius: 0 12px 12px 0; background: var(--teal-light); }
.security-callout strong { display: block; }
.security-callout p { margin-top: .4rem; color: var(--ink-soft); }

.form-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.form-card { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field.full { grid-column: 1 / -1; }
.field label, .field legend { color: var(--ink-soft); font-size: .9rem; font-weight: 760; }
.required { color: #a33f32; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: .72rem .82rem; border: 1px solid #aebbc1; border-radius: 8px; color: var(--ink); background: var(--white); }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal-dark); outline: 3px solid rgb(21 151 168 / 18%); }
.field-help { color: var(--muted); font-size: .82rem; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { margin-top: 1rem; color: var(--muted); font-size: .84rem; }
.form-status { min-height: 1.7rem; margin-top: 1rem; padding: 0; color: var(--slate); }
.form-status.is-success, .form-status.is-error { padding: .8rem 1rem; border-radius: 8px; }
.form-status.is-success { color: #0d5a3a; background: #e2f5eb; }
.form-status.is-error { color: #7c3027; background: #f9e7e3; }
.sidebar-card { padding: 1.6rem; border-radius: var(--radius); color: var(--white); background: var(--ink); }
.sidebar-card + .sidebar-card { margin-top: 1rem; }
.sidebar-card p { margin-top: .7rem; color: #c5d0d5; }
.sidebar-card ul { margin: 1rem 0 0; padding-left: 1.2rem; color: #dce4e7; }

.legal h2 { margin-top: 2.8rem; font-size: 1.65rem; }
.legal h3 { margin-top: 1.8rem; font-size: 1.2rem; }
.legal p, .legal ul { margin-top: 1rem; color: var(--ink-soft); }
.legal li + li { margin-top: .4rem; }
.legal .notice { padding: 1rem 1.1rem; border-radius: 10px; background: var(--mist); }

.site-footer { color: #c2cdd2; background: #0b1217; }
.footer-main { display: grid; grid-template-columns: 1.3fr .7fr .7fr; gap: 3rem; padding: 4rem 0 3rem; }
.footer-brand img { width: 245px; }
.footer-brand p { max-width: 420px; margin-top: 1.2rem; }
.footer-column strong { display: block; margin-bottom: .9rem; color: var(--white); }
.footer-column a { display: block; width: fit-content; margin-top: .55rem; color: #c2cdd2; text-decoration: none; }
.footer-column a:hover { color: var(--aqua); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid #2a3841; color: #92a2aa; font-size: .82rem; }

@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .menu-button { display: inline-flex; }
  .mobile-menu { position: fixed; z-index: 99; inset: 88px 0 auto; display: grid; max-height: calc(100dvh - 88px); padding: 1rem 20px calc(1rem + env(safe-area-inset-bottom)); overflow-y: auto; border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: 0 20px 40px rgb(16 24 32 / 16%); transform: translateY(-130%); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; }
  .mobile-menu[data-open="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-menu a { padding: .85rem 0; border-bottom: 1px solid var(--line); font-weight: 720; text-decoration: none; }
  .mobile-menu .btn { margin-top: .7rem; border-bottom: 0; }
  body.menu-open { overflow: hidden; }
  .hero-grid { min-height: auto; grid-template-columns: 1fr; }
  .hero-media { min-height: 460px; }
  .hero-photo { inset: 0; width: 100%; border-radius: var(--radius-lg); }
  .hero-media::after { inset: 0; border-radius: var(--radius-lg); background: linear-gradient(0deg, rgb(16 24 32 / 72%), transparent 55%); }
  .split, .product-grid, .photo-split, .feature-band, .form-layout, .security-story, .security-disclosure, .story-grid, .real-product-showcase { grid-template-columns: 1fr; }
  .statement { position: static; }
  .story-lead { position: static; }
  .card-grid.four { grid-template-columns: repeat(2, 1fr); }
  .role-grid, .belief-grid { grid-template-columns: repeat(2, 1fr); }
  .security-domain-grid, .control-family-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow-track { grid-template-columns: repeat(2, 1fr); }
  .workflow-track article::after { display: none; }
  .workflow-track article:last-child { grid-column: 1 / -1; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow-step::after { display: none; }
  .flow-step:last-child { grid-column: 1 / -1; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .container, .narrow { width: min(calc(100% - 32px), var(--max)); }
  .brand img { width: 228px; }
  .nav-shell { min-height: 76px; }
  .mobile-menu { inset-block-start: 76px; max-height: calc(100dvh - 76px); }
  .jump-nav { top: 76px; }
  .hero-grid { padding-block: 3.8rem; }
  .hero-media { min-height: 360px; }
  .product-stamp { right: .7rem; bottom: .7rem; left: .7rem; width: auto; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(3) { border-top: 1px solid var(--line); }
  .trust-item:nth-child(4) { border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
  .card-grid, .card-grid.four, .audience-grid, .feature-list, .form-grid, .role-grid, .belief-grid, .security-domain-grid, .control-family-grid, .conversation-grid, .accordion-grid, .disclosure-columns, .dark-detail-list { grid-template-columns: 1fr; }
  .dark-detail-list article:last-child { grid-column: auto; }
  .product-intro { align-items: flex-start; flex-direction: column; }
  .product-image-frame > img { min-height: 390px; }
  .product-image-frame figcaption { right: .7rem; bottom: .7rem; left: .7rem; justify-content: center; }
  .product-tabs { overflow-x: auto; }
  .product-tabs button { min-width: 155px; }
  .product-view { min-height: 0; grid-template-columns: 1fr; }
  .app-body { grid-template-columns: 84px 1fr; }
  .app-rail span { padding-inline: .35rem; }
  .field-preview-grid, .metric-row, .detail-grid { grid-template-columns: 1fr; }
  .app-footer { align-items: flex-start; flex-direction: column; }
  .workflow-track { grid-template-columns: 1fr; }
  .workflow-track article:last-child { grid-column: auto; }
  .principle-card { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .flow { grid-template-columns: 1fr; }
  .flow-step:last-child { grid-column: auto; }
  .header-row, .cta-band-inner, .footer-bottom { align-items: flex-start; flex-direction: column; }
  .photo-frame { min-height: 360px; }
  .architecture-row { grid-template-columns: 1fr; gap: .3rem; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}

@media (max-width: 390px) {
  .brand img { width: 202px; }
  .btn-row .btn { width: 100%; }
  .trust-item { padding: 1rem .7rem; font-size: .82rem; }
  .ui-body { grid-template-columns: 52px 1fr; }
  .ui-content { padding: .9rem; }
  .ui-fields { grid-template-columns: 1fr; }
  .ui-field.wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}