:root {
  color-scheme: light;
  --ink: #102b3c;
  --navy: #0a2435;
  --blue-dark: #123b52;
  --mint: #88e8ca;
  --muted: #496473;
  --teal: #107261;
  --paper: #f7f9f7;
  --line: #d5e2e2;
  --radius: 18px;
  --max: 1260px;
  font: 100%/1.5 "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
body, figure, h1, h2, h3, h4, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #108275; outline-offset: 4px; }
.hero :focus-visible, .closing :focus-visible, .header :focus-visible { outline-color: #a2f5de; }
.wrap { width: min(calc(100% - 80px), var(--max)); margin-inline: auto; }
.skip { position: fixed; z-index: 10; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 16px; border-radius: 8px; color: var(--navy); background: white; }
.skip:focus { transform: none; }

.header {
  color: #e8f1f4;
  background: var(--navy);
  border-bottom: 1px solid #ffffff26;
}
.header-inner {
  min-height: 79px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; font-weight: 700; font-size: 1.125rem; }
.brand img { border-radius: 9px; }
.header nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 36px); }
.header nav a { text-decoration: none; color: #c9dae2; font-size: .93rem; font-weight: 600; }
.header nav a:hover { color: white; text-decoration: underline; text-underline-offset: .25em; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 49px;
  padding: 11px 19px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: .95rem;
  line-height: 1.25;
  font-weight: 750;
  text-decoration: none;
}
.button span { font-size: 1.2em; }
.button-primary { color: #092e28; background: var(--mint); }
.button-primary:hover { background: #b1f3dd; }
.button-nav { min-height: 42px; color: #e8f1f4; border-color: #688795; }
.button-nav:hover { background: #244859; border-color: #93b4bd; }
.button-dark { color: #f0faf7; background: var(--navy); }
.button-dark:hover { background: #1e475b; }

.hero {
  color: #edf6f8;
  background:
    radial-gradient(ellipse at 90% 10%, #26607888, transparent 45%),
    linear-gradient(125deg, #0a2435 30%, #102f44 62%, #12453f);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding-block: clamp(54px, 7vw, 107px) clamp(44px, 6vw, 83px);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aeedda;
}
.eyebrow.ink { color: #176859; }
.signal { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #57d9b4; }
.eyebrow.ink .signal { background: #1f9e81; }
.hero h1 {
  margin-top: 19px;
  max-width: 13ch;
  color: #f8fdfd;
  font-size: clamp(2.55rem, 5.1vw, 4.75rem);
  line-height: 1.02;
  font-weight: 720;
  letter-spacing: -.055em;
}
.lead { margin-top: 23px; max-width: 46ch; color: #c9dce4; font-size: clamp(1rem, 1.45vw, 1.2rem); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 21px; margin-top: 30px; }
.text-link { padding-block: 8px; font-weight: 700; font-size: .94rem; color: #f1faf9; text-decoration-color: #7aabac; text-underline-offset: .28em; }
.text-link span { margin-left: 5px; }
.text-link:hover { color: var(--mint); }
.hero-note { margin-top: 20px; max-width: 46ch; color: #b7ced6; font-size: .84rem; }
.hero-visual { min-width: 0; }
.hero-window { overflow: hidden; border: 1px solid #92b8bd66; border-radius: 16px; background: #f1f6f7; color: var(--ink); box-shadow: 0 28px 56px #00121d65; }
.hero-visual figcaption { margin-top: 12px; color: #b5cdd3; text-align: right; font-size: .75rem; }

.section { padding-block: clamp(52px, 6.7vw, 95px); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); align-items: end; gap: 20px 45px; margin-bottom: 35px; }
.section h2, .closing h2 { margin-top: 10px; font-size: clamp(2rem, 3.6vw, 3.3rem); font-weight: 720; line-height: 1.08; letter-spacing: -.045em; }
.section-head > p, .questions p, .steps p { max-width: 50ch; color: var(--muted); }
.resources { background: white; }
.resources-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.resources-grid article { min-width: 0; padding: clamp(20px, 2.5vw, 36px); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.feature-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: #126956; background: #e5f5ee; font-size: 1.25rem; font-weight: 700; }
.resources-grid h3, .steps h3 { margin-top: 15px; font-size: 1.16rem; font-weight: 730; line-height: 1.25; letter-spacing: -.018em; }
.resources-grid p { margin-top: 8px; color: var(--muted); font-size: .94rem; }

.gallery { border-block: 1px solid #dee8e7; background: #edf3f1; }
.gallery-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; }
.gallery-controls button { padding: 9px 15px; min-height: 42px; color: var(--ink); background: white; border: 1px solid #b6ccce; border-radius: 8px; font-size: .91rem; font-weight: 700; cursor: pointer; }
.gallery-controls button:hover { border-color: #1a8b76; }
.gallery-controls button[aria-selected="true"] { color: #effaf6; border-color: #0e594d; background: #0e594d; }
.gallery-panel { overflow: hidden; border: 1px solid #c9dcdb; border-radius: var(--radius); background: white; }
.gallery-panel + .gallery-panel { margin-top: 17px; }
.gallery-controls:not([hidden]) ~ .gallery-panel { margin-top: 0; }
.gallery-panel figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 17px; padding: 15px clamp(14px, 4vw, 38px) 18px; color: var(--muted); font-size: .91rem; }
.gallery-panel figcaption strong { color: var(--ink); font-weight: 750; }

.guides { background: white; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0 0 30px; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps li { min-width: 0; padding: 23px clamp(15px, 2.8vw, 35px) 23px 0; }
.steps li + li { border-left: 1px solid var(--line); padding-left: clamp(15px, 2.8vw, 35px); }
.step-num { color: #177963; font-size: 1.95rem; font-weight: 750; line-height: 1; letter-spacing: -.04em; }
.steps h3 { margin-top: 12px; }
.steps p { margin-top: 7px; font-size: .94rem; }
.ownership { padding-block: clamp(24px, 4vw, 60px); background: white; }
.ownership-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: center; gap: 17px 42px; padding: clamp(21px, 4.2vw, 52px); border: 1px solid #c4ded7; border-radius: var(--radius); background: #eaf6f0; }
.ownership h2 { max-width: 24ch; font-size: clamp(1.65rem, 3.2vw, 2.65rem); }
.ownership-inner > p { max-width: 52ch; color: #345863; }
.questions { border-top: 1px solid #dbe8e4; }
.questions-grid { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1fr); gap: 24px 48px; }
.questions details { border-bottom: 1px solid var(--line); }
.questions details:first-child { border-top: 1px solid var(--line); }
.questions summary { padding: 16px 2px; font-weight: 730; cursor: pointer; }
.questions summary::marker { color: #168571; }
.questions details p { padding: 0 2px 16px; font-size: .94rem; }
.closing { color: white; background: linear-gradient(130deg, #0a2435, #154e51); }
.closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px 36px; padding-block: clamp(48px, 6vw, 74px); }
.closing h2 { max-width: 26ch; font-size: clamp(1.95rem, 3.8vw, 3.2rem); }
.closing p:not(.eyebrow) { margin-top: 14px; color: #d0e2e7; }
.closing .button { flex: none; }
.footer { color: var(--muted); background: #f5f8f6; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 13px 25px; min-height: 80px; padding-block: 15px; font-size: .86rem; }
.footer .brand { color: var(--ink); font-size: 1rem; }
.footer-inner > a:last-child { text-underline-offset: .22em; }

@media (max-width: 880px) {
  .wrap { width: min(calc(100% - 48px), var(--max)); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .hero h1 { max-width: 16ch; font-size: clamp(2.45rem, 7.3vw, 4.5rem); }
  .hero-visual { width: min(100%, 655px); }
  .hero-visual figcaption { text-align: left; }
  .section-head { grid-template-columns: 1fr; gap: 13px; margin-bottom: 25px; }
  .resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: 13px; border-left: 0; padding: 18px 0; }
  .steps li + li { border-top: 1px solid var(--line); }
  .steps h3 { margin-top: 1px; }
}

@media (max-width: 620px) {
  .wrap { width: calc(100% - 34px); }
  .header-inner { min-height: 67px; gap: 7px; }
  .header nav { display: none; }
  .header .brand { font-size: 1rem; gap: 7px; }
  .header .brand img { width: 34px; height: 34px; }
  .header .button { min-height: 40px; padding-inline: 11px; gap: 7px; font-size: .83rem; }
  .hero-grid { padding-block: 45px 35px; }
  .hero h1 { max-width: 13ch; }
  .hero-actions { gap: 7px 17px; margin-top: 22px; }
  .hero-note { margin-top: 14px; }
  .resources-grid { grid-template-columns: 1fr; }
  .questions-grid, .ownership-inner { grid-template-columns: 1fr; }
  .closing-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 405px) {
  .gallery-controls button { padding-inline: 11px; font-size: .81rem; }
  .gallery-panel figcaption { font-size: .86rem; }
}

.gallery .gallery-wrap { width: min(calc(100% - 32px), 1540px); }
.capture-link { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 8; background: #edf3f5; cursor: zoom-in; }
.capture-link:focus-visible { outline-offset: -4px; }
.capture-link img { display: block; width: 100%; height: auto; }
.hero-window.capture-link { aspect-ratio: 16 / 9; }
.capture-action { position: absolute; right: 10px; bottom: 10px; padding: 7px 12px; border-radius: 7px; background: #103347; color: white; font-size: .85rem; font-weight: 700; }
.mobile-demo { border-bottom: 1px solid #dee8e7; background: #edf5f3; }
.operation-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 clamp(24px, 4vw, 44px); padding: 0; list-style: none; counter-reset: operation-step; }
.operation-flow li { position: relative; min-width: 0; padding: 43px 18px 0 0; counter-increment: operation-step; }
.operation-flow li::before { position: absolute; z-index: 1; top: 0; left: 0; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #0e594d; color: white; font-size: .85rem; font-weight: 750; content: counter(operation-step); }
.operation-flow li:not(:last-child)::after { position: absolute; top: 15px; left: 32px; right: 0; height: 2px; background: #80aaa4; content: ""; }
.operation-flow strong, .operation-flow span { display: block; }
.operation-flow span { margin-top: 4px; color: var(--muted); font-size: .9rem; }
.mobile-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.mobile-demo-card { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(14px, 2vw, 24px); border: 1px solid #c9dcdb; border-radius: var(--radius); background: white; }
.mobile-demo-card h3 { color: var(--ink); }
.mobile-demo-card p { margin-top: 7px; color: var(--muted); }
.mobile-capture { display: grid; justify-items: center; gap: 12px; text-decoration: none; cursor: zoom-in; }
.phone-frame { position: relative; display: block; width: min(100%, 290px); padding: 19px 7px 10px; border-radius: 27px; background: #0a2435; box-shadow: 0 10px 20px #0a243529; }
.phone-frame::before { position: absolute; top: 7px; left: 50%; width: 30px; height: 4px; border-radius: 4px; background: #57727d; transform: translateX(-50%); content: ""; }
.phone-frame img { width: 100%; height: auto; aspect-ratio: 888 / 1600; object-fit: contain; border-radius: 16px; background: #f6f7f9; }
.mobile-capture-action { display: block; padding: 8px 12px; color: #0e594d; font-size: .9rem; font-weight: 750; }
.mobile-capture:hover .mobile-capture-action { text-decoration: underline; }
.finance-demo { margin-top: clamp(35px, 6vw, 72px); }
.finance-demo .section-head h3 { font-size: clamp(1.4rem, 3vw, 2.05rem); line-height: 1.15; }
.finance-capture { display: grid; justify-items: center; gap: 8px; text-decoration: none; cursor: zoom-in; }
.finance-capture img { width: 100%; height: auto; max-height: 235px; object-fit: contain; border: 1px solid #c9dcdb; border-radius: 8px; background: #f1f5f7; }
.finance-capture:hover .mobile-capture-action { text-decoration: underline; }
.training-note { margin-bottom: 22px; padding: 15px 19px; border-left: 4px solid #0e594d; border-radius: 6px; background: #edf5f3; color: var(--ink); }
.screen-dialog { width: min(98vw, 2560px); max-width: none; max-height: 96vh; padding: 0; border: 1px solid #c9dcdb; border-radius: 12px; color: var(--ink); }
.screen-dialog.is-phone { width: min(96vw, 580px); }
.screen-dialog[open] { display: flex; flex-direction: column; }
.screen-dialog::backdrop { background: #071c2ad9; }
body:has(.screen-dialog[open]) { overflow: hidden; }
.screen-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: white; }
.screen-toolbar h2 { margin-right: auto; font-size: 1rem; }
.screen-toolbar button { min-height: 44px; padding: 6px 10px; border: 1px solid #b6ccce; border-radius: 7px; background: #edf5f3; color: var(--ink); cursor: pointer; }
.screen-scroll { overflow: auto; min-height: 0; overscroll-behavior: contain; background: #edf3f5; }
.screen-scroll img { display: block; width: 100%; height: auto; }
.screen-scroll.original img { width: auto; max-width: none; }
@media (max-width: 680px) {
  .operation-flow { grid-template-columns: 1fr; }
  .operation-flow li { padding: 4px 0 20px 46px; }
  .operation-flow li:last-child { padding-bottom: 0; }
  .operation-flow li:not(:last-child)::after { top: 32px; bottom: 0; left: 15px; width: 2px; height: auto; }
  .mobile-demo-grid { grid-template-columns: 1fr; }
  .capture-action { font-size: .75rem; }
}