/* Boat Ramp Desk — design system. Premium lakeside operations. */
:root{
  --deep:#0B4046;--deep-2:#0E4F58;--ink:#102A33;--body:#21404A;--muted:#4A626A;
  --teal:#0B7378;--teal-dark:#085A5E;--water:#2CA6AE;--water-soft:#8FE0E3;
  --mist:#EFF6F5;--pale:#DDEDEA;--sand:#F1EBDF;--sand-2:#E4DAC6;--white:#FFFFFF;
  --action:#E96F3D;--action-hover:#F2825A;--action-soft:#FBE7DC;--action-ink:#7A3D14;
  --line:#CFDEDC;--line-soft:#E1ECEA;--line-dark:rgba(255,255,255,.16);
  --on-dark:#CFE3E1;--on-dark-strong:#FFFFFF;--on-dark-muted:#9DBDBB;
  --status-ok-bg:#D6F0EE;--status-ok-fg:#085A5E;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-display:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;
  --shadow-sm:0 1px 2px rgba(16,42,51,.06),0 2px 8px rgba(16,42,51,.05);
  --shadow-md:0 8px 24px rgba(11,64,70,.10),0 2px 6px rgba(11,64,70,.06);
  --shadow-lg:0 24px 60px rgba(11,64,70,.16),0 6px 16px rgba(11,64,70,.06);
  --pad:clamp(18px,10px + 2.5vw,44px);
  --wrap:1200px;--wrap-wide:1320px;--wrap-narrow:780px;
  --section:clamp(3.5rem,2.5rem + 4vw,7.5rem);
  --section-sm:clamp(2.75rem,2rem + 3vw,5.5rem);
  --header-pad:20px;
  --header-logo-h:70px;
  --header-h:calc(var(--header-logo-h) + 2 * var(--header-pad));
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--white);color:var(--body);font-family:var(--font);font-size:clamp(1.0625rem,1.02rem + .2vw,1.15rem);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
a:hover{color:var(--deep)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.125rem,1.6rem + 1.9vw,3.5rem);letter-spacing:-.028em;line-height:1.06}
h2{font-size:clamp(1.75rem,1.45rem + 1.25vw,2.75rem);letter-spacing:-.024em;line-height:1.12}
h3{font-size:clamp(1.3rem,1.15rem + .5vw,1.65rem);letter-spacing:-.014em;line-height:1.25}
h4{font-size:1.1rem;letter-spacing:-.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
strong{color:var(--ink);font-weight:700}
em{font-style:italic}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
[id]{scroll-margin-top:calc(var(--header-h) + 20px)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:4px}
.on-dark :where(a,button,summary):focus-visible,.on-dark:focus-visible{outline-color:#fff}
::selection{background:var(--water-soft);color:var(--ink)}

/* Layout */
.wrap{width:min(var(--wrap),100% - 2*var(--pad));margin-inline:auto}
.wrap-wide{width:min(var(--wrap-wide),100% - 2*var(--pad));margin-inline:auto}
.wrap-narrow{width:min(var(--wrap-narrow),100% - 2*var(--pad));margin-inline:auto}
.prose{max-width:68ch}
.prose h2{margin:2.4em 0 .6em;font-size:clamp(1.5rem,1.3rem + .8vw,2.1rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.8em 0 .5em;font-size:clamp(1.2rem,1.1rem + .35vw,1.4rem)}
.prose ul{margin:0 0 1.2em}
.section{padding-block:var(--section)}
.section-sm{padding-block:var(--section-sm)}
.band-mist{background:var(--mist)}
.band-pale{background:var(--pale)}
.band-sand{background:var(--sand)}
.band-deep{background:var(--deep);color:var(--on-dark)}
.band-ink{background:var(--ink);color:var(--on-dark)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark strong{color:var(--on-dark-strong)}
.on-dark p{color:var(--on-dark)}
.on-dark a{color:var(--on-dark-strong)}
.on-dark .eyebrow{color:var(--water-soft)}
.on-dark .eyebrow::before{background:var(--water-soft)}
.grid{display:grid;gap:var(--gap,24px)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,3vw + 16px,80px);align-items:center}
.split.media-left{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.split.top{align-items:start}

/* Type helpers */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--teal);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--water);flex:none}
.lead{font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem);line-height:1.5;color:var(--body);max-width:60ch}
.summary{font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.55;color:var(--muted);max-width:62ch}
.caption{font-size:.9rem;color:var(--muted);line-height:1.5}
.meta{font-size:.875rem;color:var(--muted);letter-spacing:.01em}
.section-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:24px 64px;align-items:end;margin-bottom:clamp(32px,2rem + 2vw,56px)}
.section-head.stacked{grid-template-columns:minmax(0,1fr);max-width:720px}
.section-head .summary{margin-bottom:6px}
.section-head h2{max-width:22ch}
.section-head .eyebrow{margin-bottom:12px}
.key-statement{font-family:var(--font-display);font-size:clamp(1.4rem,1.15rem + 1.2vw,2.35rem);line-height:1.22;letter-spacing:-.02em;font-weight:700;color:var(--ink);max-width:28ch;text-wrap:balance}
.key-statement mark{background:linear-gradient(transparent 62%,var(--water-soft) 62%);color:inherit;padding:0 .05em}
.on-dark .key-statement{color:#fff}
.on-dark .key-statement mark{background:linear-gradient(transparent 62%,rgba(44,166,174,.55) 62%)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:.8rem 1.35rem;border-radius:var(--r-sm);border:1.5px solid transparent;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--action);color:var(--ink);border-color:var(--action);box-shadow:0 6px 18px rgba(233,111,61,.22)}
.btn-primary:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--ink);transform:translateY(-1px);box-shadow:0 10px 24px rgba(233,111,61,.28)}
.btn-secondary{background:var(--white);color:var(--deep);border-color:var(--deep)}
.btn-secondary:hover{background:var(--deep);color:var(--white)}
.btn-ghost{background:transparent;color:var(--deep);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--deep);color:var(--deep)}
.on-dark .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.on-dark .btn-secondary:hover{background:#fff;color:var(--deep);border-color:#fff}
.btn-sm{min-height:42px;padding:.55rem 1rem;font-size:.9375rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin-top:28px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--deep);text-decoration:none;border-bottom:2px solid var(--water);padding-bottom:2px;transition:border-color .18s var(--ease),gap .18s var(--ease)}
.link-arrow svg{width:18px;height:18px;flex:none;color:var(--action)}
.link-arrow:hover{color:var(--deep);border-color:var(--action);gap:12px}
.on-dark .link-arrow{color:#fff;border-color:rgba(255,255,255,.45)}
.on-dark .link-arrow:hover{border-color:#fff}
.link-row{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:22px}

/* Chips and status labels */
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--pale);color:var(--deep);font-size:.8125rem;font-weight:700;letter-spacing:.02em}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal)}
.status{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:6px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.status svg{width:14px;height:14px}
.status-now{background:var(--status-ok-bg);color:var(--status-ok-fg)}
.status-sched{background:var(--action-soft);color:var(--action-ink)}
.on-dark .status-now{background:rgba(143,224,227,.16);color:var(--water-soft)}
.on-dark .status-sched{background:rgba(245,165,135,.18);color:#F5A587}

/* Header */
.site-header{position:sticky;top:0;z-index:60;height:var(--header-h);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line-soft)}
.header-inner{display:flex;align-items:center;gap:28px;height:100%;padding-block:var(--header-pad)}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{width:150px;height:var(--header-logo-h);object-fit:contain}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{display:inline-flex;align-items:center;height:40px;padding:0 13px;border-radius:8px;color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none;position:relative;white-space:nowrap}
.nav a:hover{background:var(--mist);color:var(--deep)}
.nav a[aria-current="page"]{color:var(--deep)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:3px;border-radius:2px;background:var(--water)}
.header-cta{flex:none}
.menu{display:none;margin-left:auto;position:relative}
.menu summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-weight:700;color:var(--ink);cursor:pointer;user-select:none;background:var(--white)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:20px;height:20px}
.menu .menu-close,.menu[open] .menu-open{display:none}
.menu .menu-open,.menu[open] .menu-close{display:inline-flex;align-items:center;gap:8px}
.menu-panel{position:fixed;left:0;right:0;top:var(--header-h);max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow:auto;background:var(--white);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:8px var(--pad) 24px}
.menu-panel a:not(.btn){display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:10px 4px;border-bottom:1px solid var(--line-soft);color:var(--ink);font-weight:600;font-size:1.05rem;text-decoration:none}
.menu-panel a[aria-current="page"]{color:var(--teal)}
.menu-panel a[aria-current="page"]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--water)}
.menu-panel .menu-group{padding-top:14px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.menu-panel .btn{width:100%;margin-top:18px}
.skip-link{position:absolute;left:12px;top:-120px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}

/* Waterline and contour motifs */
.waterline{display:block;width:100%;height:auto}
.contour{position:relative;isolation:isolate}
.contour::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%230B7378' stroke-opacity='.10' stroke-width='1.4'%3E%3Cpath d='M-40 380c80-60 140-80 230-70s150 40 250 30 130-60 180-90'/%3E%3Cpath d='M-40 430c90-70 160-90 250-80s160 40 260 30 130-60 180-90'/%3E%3Cpath d='M-40 480c100-80 180-100 270-90s170 40 270 30 130-60 180-90'/%3E%3Cpath d='M-40 120c80 40 130 60 230 50s150-50 250-40 140 40 190 60'/%3E%3Cpath d='M-40 70c90 40 140 60 240 50s150-50 250-40 140 40 190 60'/%3E%3C/g%3E%3C/svg%3E");background-size:520px 520px}
.contour-dark::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.07' stroke-width='1.4'%3E%3Cpath d='M-40 380c80-60 140-80 230-70s150 40 250 30 130-60 180-90'/%3E%3Cpath d='M-40 430c90-70 160-90 250-80s160 40 260 30 130-60 180-90'/%3E%3Cpath d='M-40 480c100-80 180-100 270-90s170 40 270 30 130-60 180-90'/%3E%3Cpath d='M-40 120c80 40 130 60 230 50s150-50 250-40 140 40 190 60'/%3E%3Cpath d='M-40 70c90 40 140 60 240 50s150-50 250-40 140 40 190 60'/%3E%3C/g%3E%3C/svg%3E")}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--mist) 0%,#F7FBFA 55%,var(--white) 100%);padding:clamp(3rem,2rem + 4vw,6.5rem) 0 clamp(2.5rem,1.5rem + 4vw,6rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,2rem + 3vw,80px);align-items:center}
.hero h1{font-size:clamp(2.2rem,1.75rem + 2.34vw,4.1rem);max-width:14ch}
.hero .lead{margin-top:22px}
.hero-copy .chip{margin-bottom:22px}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:40px;border-top:1px solid var(--line);padding-top:22px}
.proof div{padding-right:18px}
.proof div+div{padding-left:18px;border-left:1px solid var(--line)}
.proof strong{display:block;font-family:var(--font-display);color:var(--ink);font-size:1.02rem;letter-spacing:-.01em;margin-bottom:3px}
.proof span{font-size:.9rem;color:var(--muted);line-height:1.4;display:block}

/* Product stage (truthful HTML/CSS presentation; the frame is screenshot-ready) */
.stage{position:relative;margin:0}
.stage-frame{position:relative;aspect-ratio:16/11;width:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-lg);container-type:inline-size}
.stage-frame>img{width:100%;height:100%;object-fit:cover}
.stage-glow{position:absolute;inset:auto -12% -18% -12%;height:60%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(44,166,174,.22),rgba(44,166,174,0))}
.stage-mark{position:absolute;right:-6%;top:-8%;width:44%;aspect-ratio:1;z-index:-1;color:var(--water);opacity:.35}
.stage figcaption{margin-top:14px;font-size:.9rem;color:var(--muted)}
.app{display:grid;grid-template-columns:4.33em 1fr;height:100%;font-size:12px;font-size:clamp(7px,2.11cqw,12.5px);line-height:1.3;color:var(--body)}
.app-side{background:var(--deep);display:grid;align-content:start;justify-items:center;gap:.83em;padding:1.17em 0}
.app-side i{width:2.17em;height:2.17em;border-radius:.58em;background:rgba(255,255,255,.14)}
.app-side i:first-child{background:var(--water)}
.app-side i.act{background:rgba(143,224,227,.35)}
.app-main{display:flex;flex-direction:column;min-width:0}
.app-bar{display:flex;align-items:center;gap:.83em;padding:1em 1.33em;border-bottom:1px solid var(--line-soft)}
.app-bar b{font-family:var(--font-display);font-size:1.08em;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.app-bar .app-search{margin-left:auto;display:flex;align-items:center;gap:.67em;padding:.5em .83em;border:1px solid var(--line);border-radius:.58em;color:var(--muted);font-size:.92em;min-width:12.5em;white-space:nowrap}
.app-bar .app-search svg{width:1.08em;height:1.08em}
.app-bar .app-btn{padding:.5em .83em;border-radius:.58em;background:var(--action);color:var(--ink);font-weight:700;font-size:.92em;white-space:nowrap}
.app-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.83em;padding:1.17em 1.33em .5em}
.app-stats div{border:1px solid var(--line-soft);border-radius:.75em;padding:.75em .92em;background:linear-gradient(160deg,#fff,var(--mist));min-width:0}
.app-stats span{display:block;font-size:.83em;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.app-stats strong{display:block;font-size:1.33em;color:var(--ink);margin-top:.17em;font-family:var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-list{margin:.67em 1.33em 1.33em;border:1px solid var(--line-soft);border-radius:.75em;overflow:hidden;flex:1}
.app-row{display:grid;grid-template-columns:1.67em minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.9fr) auto;gap:.83em;align-items:center;padding:.67em 1em;border-top:1px solid var(--line-soft);white-space:nowrap}
.app-row:first-child{border-top:0;background:var(--mist);font-size:.83em;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.app-row .dir{width:1.67em;height:1.67em;border-radius:.5em;display:grid;place-items:center}
.app-row .dir svg{width:1em;height:1em}
.app-row .in{background:var(--status-ok-bg);color:var(--status-ok-fg)}
.app-row .out{background:var(--action-soft);color:var(--action-ink)}
.app-row em{font-style:normal;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.app-row em small{display:block;font-size:.83em;color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.app-row .tag{font-variant-numeric:tabular-nums;color:var(--body);overflow:hidden;text-overflow:ellipsis}
.app-row .who{display:flex;align-items:center;gap:.5em;color:var(--body);min-width:0;overflow:hidden}
.app-row .who i{width:1.5em;height:1.5em;border-radius:50%;background:var(--pale);color:var(--deep);font-size:.75em;font-weight:800;font-style:normal;display:grid;place-items:center;flex:none}
.app-row time{color:var(--muted);font-variant-numeric:tabular-nums}

/* Phone stage */
.phone-stage{display:grid;justify-items:center;margin:0}
.phone{position:relative;width:min(300px,100%);aspect-ratio:9/18.6;border-radius:38px;background:var(--ink);padding:10px;box-shadow:var(--shadow-lg)}
.phone-screen{position:relative;height:100%;border-radius:30px;background:var(--mist);overflow:hidden;display:flex;flex-direction:column;font-size:12px}
.phone-screen>img{width:100%;height:100%;object-fit:cover}
.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:12px;background:var(--ink)}
.ph-top{padding:40px 18px 12px;background:var(--white);border-bottom:1px solid var(--line-soft)}
.ph-top small{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--teal);text-transform:uppercase}
.ph-top strong{display:block;font-family:var(--font-display);font-size:18px;color:var(--ink);letter-spacing:-.01em;margin-top:4px}
.ph-search{margin:14px 16px 0;display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--muted);font-size:12px}
.ph-search svg{width:15px;height:15px;color:var(--teal)}
.ph-card{margin:12px 16px 0;padding:12px 13px;border-radius:12px;background:var(--white);border:1px solid var(--line-soft)}
.ph-card b{display:block;font-size:13px;color:var(--ink)}
.ph-card span{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.ph-actions{display:grid;gap:8px;margin:14px 16px 0}
.ph-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:10px;font-weight:700;font-size:13px}
.ph-btn svg{width:16px;height:16px}
.ph-btn.in{background:var(--action);color:var(--ink)}
.ph-btn.out{background:var(--white);color:var(--deep);border:1.5px solid var(--deep)}
.ph-row{display:flex;align-items:center;gap:10px;margin:12px 16px 0;padding:10px 12px;border-radius:10px;background:var(--white);border:1px dashed var(--line);color:var(--muted);font-size:11px}
.ph-row svg{width:16px;height:16px;color:var(--teal)}
.ph-foot{margin-top:auto;padding:12px 16px 18px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.ph-foot i{font-style:normal}
.phone-stage figcaption{margin-top:16px;font-size:.9rem;color:var(--muted);text-align:center}

/* Media frame for photographs and illustrations */
.media{margin:0}
.media-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--pale);box-shadow:var(--shadow-md)}
.media-frame.ratio-4-3{aspect-ratio:4/3}
.media-frame.ratio-3-2{aspect-ratio:3/2}
.media-frame.ratio-16-9{aspect-ratio:16/9}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media figcaption{margin-top:12px;font-size:.9rem;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.media figcaption .credit{color:var(--muted);font-size:.8rem}
.media-offset{position:relative}
.media-offset::after{content:"";position:absolute;z-index:-1;inset:24px -22px -22px 24px;border-radius:var(--r-lg);background:var(--pale);opacity:.9}

/* Workflow steps (record trail) */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;position:relative}
.steps li{position:relative;padding:34px 34px 8px 0}
.steps li+li{padding-left:34px}
.steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.steps li::after{content:"";position:absolute;left:0;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--water);box-shadow:0 0 0 4px var(--white)}
.steps li+li::after{left:34px}
.band-mist .steps li::after{box-shadow:0 0 0 4px var(--mist)}
.steps .n{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:.85rem;letter-spacing:.1em;color:var(--action);margin-bottom:14px}
.steps h3{margin-bottom:10px}
.steps p{color:var(--muted);margin:0}
.steps .s-icon{width:44px;height:44px;border-radius:12px;background:var(--pale);color:var(--deep);display:grid;place-items:center;margin-bottom:18px}
.steps .s-icon svg{width:22px;height:22px}

/* Record grid (what it records) */
.records{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.record{position:relative;padding:26px 26px 24px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.record:hover{border-color:var(--water);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.record .r-icon{width:42px;height:42px;border-radius:11px;background:var(--mist);color:var(--teal);display:grid;place-items:center;margin-bottom:16px}
.record .r-icon svg{width:22px;height:22px}
.record h3{font-size:1.15rem;margin-bottom:8px}
.record p{color:var(--muted);font-size:.98rem;margin:0}
.record.wide{grid-column:span 2;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.record.wide .r-icon{margin:0}

/* Feature matrix / definition rows */
.matrix{border-top:1px solid var(--line)}
.matrix-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) auto;gap:16px 40px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.matrix-row h3{font-size:1.15rem}
.matrix-row p{color:var(--muted);margin:0}
.matrix-row .status{margin-top:2px}

/* Audience cards */
.audiences{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.audience{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px 22px 22px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line-soft);color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);min-height:100%}
.audience:hover{border-color:var(--water);transform:translateY(-2px);box-shadow:var(--shadow-md);color:inherit}
.audience .a-icon{width:40px;height:40px;border-radius:10px;background:var(--pale);color:var(--deep);display:grid;place-items:center}
.audience .a-icon svg{width:21px;height:21px}
.audience strong{font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.audience span{color:var(--muted);font-size:.93rem;line-height:1.5}
.audience .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:700;font-size:.9rem}
.audience .go svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.audience:hover .go svg{transform:translateX(3px)}

/* Scheduled capabilities */
.sched{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sched article{padding:24px 22px;border-radius:var(--r-md);background:rgba(255,255,255,.06);border:1px solid var(--line-dark)}
.sched .status{margin-bottom:16px}
.sched h3{font-size:1.15rem;margin-bottom:8px}
.sched p{font-size:.95rem;margin:0}
.date-callout{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:22px 26px;border-radius:var(--r-md);background:rgba(255,255,255,.06);border:1px solid var(--line-dark);margin-bottom:28px}
.date-callout .cal{width:64px;height:64px;border-radius:14px;background:var(--action);color:var(--ink);display:grid;place-content:center;text-align:center;font-family:var(--font-display)}
.date-callout .cal b{display:block;font-size:1.5rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.date-callout .cal small{display:block;font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.date-callout strong{display:block;font-size:1.15rem;margin-bottom:2px}
.date-callout p{margin:0;font-size:.98rem}
.light .sched article,.light .date-callout{background:var(--white);border-color:var(--line-soft)}

/* Trust band */
.trust{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,4vw,80px);align-items:center}
.trust-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;list-style:none;margin-top:26px}
.trust-list li{display:flex;gap:12px;align-items:flex-start;color:var(--on-dark);font-size:.98rem;line-height:1.45}
.trust-list svg{width:20px;height:20px;flex:none;color:var(--water-soft);margin-top:2px}
.trust-list strong{color:#fff;display:block;font-size:1rem}
.arch{display:grid;gap:10px}
.arch-tenant{display:grid;gap:8px;padding:14px;border-radius:12px;border:1px solid var(--line-dark);background:rgba(255,255,255,.05)}
.arch-tenant b{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--water-soft)}
.arch-tenant div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.arch-tenant span{display:block;padding:10px;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;font-size:.82rem;font-weight:600;text-align:center}
.arch-platform{padding:12px 14px;border-radius:12px;border:1px dashed rgba(255,255,255,.35);color:var(--on-dark);font-size:.85rem;text-align:center}

/* CTA band */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--deep) 0%,var(--deep-2) 60%,#12606A 100%)}
.cta-band .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:32px 56px;align-items:center;position:relative}
.cta-band h2{max-width:20ch}
.cta-band p{max-width:52ch}
.cta-band .actions{display:grid;gap:12px;justify-items:start}
.cta-band .actions .meta{color:var(--on-dark-muted)}
.cta-band .actions .meta a{color:#fff}
.cta-wave{position:absolute;right:-8%;bottom:-40%;width:60%;max-width:760px;color:var(--water);opacity:.28;pointer-events:none}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--white);transition:border-color .2s var(--ease)}
.faq details[open]{border-color:var(--water)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:1.05rem;letter-spacing:-.01em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B4046' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/13px no-repeat;transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>p{padding:0 22px 20px;margin:0;color:var(--body);max-width:70ch}
.faq-groups{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px 56px;align-items:start}
.faq-toc{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:4px}
.faq-toc a{display:block;padding:9px 12px;border-radius:8px;color:var(--body);text-decoration:none;font-weight:600;font-size:.95rem}
.faq-toc a:hover{background:var(--mist);color:var(--deep)}
.faq-group+.faq-group{margin-top:44px}
.faq-group h2{font-size:1.4rem;margin-bottom:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.faq-group h2 span{font-size:.75rem;font-weight:700;color:var(--muted);letter-spacing:.06em;background:var(--mist);padding:3px 8px;border-radius:6px}

/* Page hero (interior) */
.page-hero{position:relative;overflow:hidden;padding:clamp(2.75rem,2rem + 3vw,5.5rem) 0 clamp(2.5rem,1.5rem + 3vw,4.5rem);background:linear-gradient(180deg,var(--mist),var(--white))}
.page-hero .lead{margin-top:20px}
.page-hero.hero-split .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:end}
.page-hero.hero-deep{background:linear-gradient(160deg,var(--deep),var(--deep-2));color:var(--on-dark)}
.page-hero.hero-sand{background:linear-gradient(180deg,var(--sand),var(--white))}
.breadcrumb{margin:0 0 22px}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-size:.9rem}
.breadcrumb li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.breadcrumb li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--water);opacity:.8}
.breadcrumb a{color:var(--teal);font-weight:600;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--body);font-weight:600}
.on-dark .breadcrumb li,.on-dark .breadcrumb [aria-current="page"]{color:var(--on-dark)}
.on-dark .breadcrumb a{color:#fff}

/* Features page */
.feature{display:grid;grid-template-columns:72px minmax(0,1fr);gap:24px;padding:30px 0;border-top:1px solid var(--line)}
.feature:last-child{border-bottom:1px solid var(--line)}
.feature .f-n{font-family:var(--font-display);font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--water);line-height:1}
.feature-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:20px 48px;align-items:start}
.feature h2{font-size:clamp(1.35rem,1.2rem + .6vw,1.8rem)}
.feature .status{margin-top:12px}
.feature dl{display:grid;gap:12px;margin:0}
.feature dl div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px}
.feature dt{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);padding-top:4px}
.feature dd{margin:0;color:var(--body)}

/* Solutions page */
.solution{scroll-margin-top:calc(var(--header-h) + 24px)}
.solution+.solution{margin-top:clamp(3rem,2rem + 3vw,5.5rem);padding-top:clamp(3rem,2rem + 3vw,5.5rem);border-top:1px solid var(--line)}
.solution-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px 64px;align-items:start}
.solution-grid .prose p{color:var(--body)}
.solution-side{display:grid;gap:16px}
.solution-side .panel{padding:24px;border-radius:var(--r-md);background:var(--mist);border:1px solid var(--line-soft)}
.solution-side .panel b{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.solution .s-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--pale);color:var(--deep);margin-bottom:20px}
.solution .s-icon svg{width:28px;height:28px}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.jump a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);color:var(--deep);font-weight:600;font-size:.92rem;text-decoration:none}
.jump a:hover{border-color:var(--deep)}
.jump a svg{width:16px;height:16px;color:var(--teal)}

/* Check list */
.checks{list-style:none;display:grid;gap:10px}
.checks li{position:relative;padding-left:32px;color:var(--body)}
.checks li::before{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;background:var(--status-ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23085A5E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
.on-dark .checks li{color:var(--on-dark)}
.prose .checks{margin:0 0 1.4em}

/* Fact callout / notice */
.callout{position:relative;padding:22px 26px 22px 30px;border-radius:0 var(--r-md) var(--r-md) 0;background:var(--mist);border-left:4px solid var(--water);margin:1.8em 0}
.callout p{margin:0;color:var(--body)}
.callout strong{color:var(--ink)}
.callout.warn{background:var(--sand);border-left-color:var(--action)}

/* Definition list rows (pathways) */
.deflist{border-top:1px solid var(--line);margin:1.5em 0}
.deflist div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.deflist strong{color:var(--teal);font-size:.95rem}
.deflist span{color:var(--body)}

/* Two-panel comparison (can/cannot) */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.compare .panel{padding:26px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line-soft)}
.compare .panel.neg{background:var(--sand)}
.compare .panel .eyebrow{margin-bottom:14px}
.compare .panel div{display:grid;gap:3px;padding:12px 0;border-top:1px solid var(--line-soft)}
.compare .panel.neg div{border-top-color:var(--sand-2)}
.compare .panel strong{color:var(--ink);font-size:1rem}
.compare .panel span{color:var(--muted);font-size:.95rem}

/* Source / reference block */
.sources{list-style:none;display:grid;gap:10px;margin-top:22px}
.sources li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px 18px;border-radius:var(--r-sm);border:1px solid var(--line-soft);background:var(--white)}
.sources li::before{content:"";width:34px;height:34px;border-radius:9px;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/17px no-repeat}
.sources a{font-weight:700;color:var(--teal)}
.sources span{display:block;margin-top:3px;color:var(--muted);font-size:.92rem}
.reviewed{margin-top:26px;font-size:.88rem;color:var(--muted)}

/* Species cards */
.split .species{grid-template-columns:minmax(0,1fr);gap:12px}
.species{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.species a{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--white);border:1px solid var(--line-soft);text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.species a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--water);color:inherit}
.species .sp-media{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--pale)}
.species .sp-media img,.species .sp-media svg{width:100%;height:100%;object-fit:cover}
.species .sp-body{padding:20px 22px 22px;display:grid;gap:6px}
.species .sp-body strong{font-family:var(--font-display);font-size:1.2rem;letter-spacing:-.015em;color:var(--ink)}
.species .sp-body em{font-size:.9rem;color:var(--teal);font-style:italic}
.species .sp-body span{color:var(--muted);font-size:.95rem;line-height:1.5}
.species .sp-body .go{margin-top:8px;display:inline-flex;align-items:center;gap:6px;color:var(--deep);font-weight:700;font-size:.9rem}
.species .go svg{width:16px;height:16px;color:var(--action)}

/* Species page hero */
.sp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 64px;align-items:center}
.sp-hero .sci{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:.95rem;color:var(--muted)}
.sp-hero .sci em{color:var(--teal);font-weight:600}
.sp-hero .sci b{color:var(--ink);font-weight:600}
.sp-hero .sci span{display:inline-flex;gap:6px}
.sp-plate{margin:0}
.sp-plate .media-frame{aspect-ratio:4/3}
.sp-plate .media-frame svg{width:100%;height:100%}
.sp-plate figcaption{margin-top:12px;font-size:.88rem;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:2em 0}
.facts div{padding:16px 18px;border-radius:var(--r-sm);background:var(--mist);border:1px solid var(--line-soft)}
.facts b{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.facts span{color:var(--ink);font-weight:600;font-size:.98rem;line-height:1.35;display:block}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.toc a{padding:7px 12px;border-radius:999px;background:var(--white);border:1px solid var(--line);color:var(--deep);text-decoration:none;font-size:.88rem;font-weight:600}
.toc a:hover{border-color:var(--deep)}
.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:1.5em 0}
.role-grid article{padding:22px 22px 20px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line-soft)}
.role-grid .r-icon{width:38px;height:38px;border-radius:10px;background:var(--pale);color:var(--deep);display:grid;place-items:center;margin-bottom:12px}
.role-grid .r-icon svg{width:20px;height:20px}
.role-grid h3{font-size:1.1rem;margin-bottom:8px}
.role-grid p{color:var(--muted);margin:0;font-size:.97rem}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pillar{padding:24px 22px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line-soft);display:grid;gap:10px;align-content:start}
.pillar .p-n{font-family:var(--font-display);font-weight:800;font-size:.8rem;letter-spacing:.1em;color:var(--action)}
.pillar h3{font-size:1.08rem}
.pillar p{color:var(--muted);font-size:.95rem;margin:0}
.pillar .p-icon{width:38px;height:38px;border-radius:10px;background:var(--mist);color:var(--teal);display:grid;place-items:center}
.pillar .p-icon svg{width:20px;height:20px}

/* Pricing */
.price-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:start}
.price-card{padding:clamp(26px,2rem + 1vw,44px);border-radius:var(--r-xl);background:var(--white);border:1px solid var(--line-soft);box-shadow:var(--shadow-lg)}
.price-card h2{font-size:clamp(1.5rem,1.3rem + .8vw,2.1rem)}
.price-card .btn{margin-top:26px}
.price-card .fine{margin-top:18px;font-size:.88rem;color:var(--muted)}
.price-factors{display:grid;gap:10px;margin-top:26px}
.price-factors>div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-sm);background:var(--mist)}
.price-factors svg{width:22px;height:22px;color:var(--teal)}
.price-factors strong{display:block;font-size:.98rem}
.price-factors span{font-size:.9rem;color:var(--muted)}
.incl{display:grid;gap:14px}
.incl .panel{padding:24px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line-soft)}
.incl .panel .status{margin-bottom:14px}
.incl ul{list-style:none;display:grid;gap:8px}
.incl li{position:relative;padding-left:24px;color:var(--body);font-size:.97rem}
.incl li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--pale);border:2px solid var(--teal)}
.incl .panel.sched-panel li::before{border-color:var(--action);background:var(--action-soft)}

/* Security */
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.control{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:22px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line-soft)}
.control .c-icon{width:42px;height:42px;border-radius:11px;background:var(--mist);color:var(--teal);display:grid;place-items:center}
.control .c-icon svg{width:22px;height:22px}
.control h3{font-size:1.1rem;margin-bottom:6px}
.control p{color:var(--muted);margin:0;font-size:.97rem}
.layers{display:grid;gap:10px;counter-reset:layer}
.layer{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:18px 20px;border-radius:var(--r-md);background:rgba(255,255,255,.06);border:1px solid var(--line-dark);counter-increment:layer}
.layer::before{content:counter(layer,decimal-leading-zero);font-family:var(--font-display);font-weight:800;color:var(--water-soft);font-size:1rem;letter-spacing:.05em;padding-top:2px}
.layer strong{display:block;color:#fff;margin-bottom:3px}
.layer span{color:var(--on-dark);font-size:.95rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px 64px;align-items:start}
.contact-card{padding:clamp(24px,2rem,36px);border-radius:var(--r-lg);background:var(--deep);color:var(--on-dark)}
.contact-card h2{color:#fff;font-size:1.6rem}
.contact-card .btn{margin-top:22px}
.contact-card .email{margin-top:22px;padding-top:22px;border-top:1px solid var(--line-dark)}
.contact-card .email b{display:block;color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.contact-card .email a{color:#fff;font-weight:700;font-size:1.1rem}
.contact-card .checks{margin-top:22px}
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:clamp(22px,2rem,34px);border-radius:var(--r-lg);background:var(--mist);border:1px solid var(--line-soft)}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form label{display:grid;gap:6px;font-weight:600;color:var(--ink);font-size:.95rem}
.form label span{font-weight:400;color:var(--muted)}
.form label{min-width:0}
.form input,.form select,.form textarea{width:100%;min-width:0;max-width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--white);color:var(--ink)}
.form :disabled{opacity:.7;cursor:not-allowed;background:#F7FAF9}
.form-note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--line);color:var(--body);font-size:.95rem;margin:0}
.form-note svg{width:20px;height:20px;flex:none;color:var(--teal);margin-top:2px}
.form .btn{justify-self:start}

/* Legal */
.legal-flag{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-sm);background:var(--sand);color:var(--action-ink);font-weight:700;font-size:.9rem;margin-bottom:28px}
.legal-flag svg{width:18px;height:18px}
.legal .prose h2{font-size:1.4rem;margin-top:2em}
.legal .prose p{color:var(--body)}

/* About */
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px 72px;align-items:start}
.principles{display:grid;gap:12px;position:sticky;top:calc(var(--header-h) + 24px)}
.principles article{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:18px 20px;border-radius:var(--r-md);background:var(--mist);border:1px solid var(--line-soft)}
.principles .p-icon{width:36px;height:36px;border-radius:10px;background:var(--white);color:var(--teal);display:grid;place-items:center}
.principles .p-icon svg{width:19px;height:19px}
.principles strong{display:block;margin-bottom:3px}
.principles span{color:var(--muted);font-size:.95rem}

/* Footer */
.site-footer{background:var(--ink);color:var(--on-dark);padding:clamp(3rem,2.5rem + 2vw,5rem) 0 2rem;position:relative;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px 32px;position:relative}
.footer-brand img{width:150px;height:70px;object-fit:contain;filter:brightness(0) invert(1);opacity:.95}
.footer-brand p{margin:18px 0 0;max-width:30ch;color:var(--on-dark)}
.footer-brand .btn{margin-top:22px}
.footer-col b{display:block;color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.footer-col a{display:block;padding:5px 0;color:#DCE9E8;text-decoration:none;font-size:.95rem}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(2rem,3vw,3.5rem);padding-top:22px;border-top:1px solid var(--line-dark);font-size:.875rem;color:var(--on-dark-muted);position:relative}
.footer-bottom a{color:#DCE9E8;text-decoration:none}
.footer-bottom a:hover{text-decoration:underline}
.footer-wave{position:absolute;left:-10%;right:-10%;bottom:-2px;width:120%;height:auto;color:#fff;opacity:.04;pointer-events:none}

/* 404 */
.simple-page{min-height:60vh;display:grid;align-content:center;padding:var(--section) 0}

/* Responsive */
@media (max-width:1100px){
  .proof{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:18px}
  .proof div,.proof div+div{padding:0;border-left:0}
  .proof div+div{padding-top:12px;border-top:1px solid var(--line)}
  .audiences{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sched{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars,.facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:980px){
  :root{--header-pad:16px;--header-logo-h:62px}
  .nav,.header-cta{display:none}
  .menu{display:block}
  .brand img{width:133px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero h1{max-width:16ch}
  .stage{max-width:720px}
  .split,.split.media-left,.trust,.faq-groups,.contact-grid,.about-grid,.price-grid,.solution-grid,.sp-hero{grid-template-columns:minmax(0,1fr)}
  .split.media-left>:first-child{order:2}
  .section-head{grid-template-columns:minmax(0,1fr);gap:12px}
  .records{grid-template-columns:repeat(2,minmax(0,1fr))}
  .record.wide{grid-column:span 2}
  .feature-body{grid-template-columns:minmax(0,1fr)}
  .faq-toc{position:static;display:flex;flex-wrap:wrap;gap:8px}
  .faq-toc a{border:1px solid var(--line);padding:7px 12px;font-size:.9rem}
  .principles{position:static}
  .cta-band .wrap{grid-template-columns:minmax(0,1fr)}
  .page-hero.hero-split .wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .matrix-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .audience:last-child{grid-column:auto}
  .steps{grid-template-columns:minmax(0,1fr);gap:0}
  .steps li,.steps li+li{padding:22px 0 26px 34px}
  .steps li::before{top:0;bottom:0;left:5px;right:auto;width:2px;height:auto}
  .steps li::after,.steps li+li::after{left:0;top:26px}
  .steps li:last-child::before{bottom:auto;height:100%}
  .records,.audiences,.sched,.controls,.compare,.role-grid,.species,.cols-2,.cols-3,.trust-list{grid-template-columns:minmax(0,1fr)}
  .record.wide{grid-column:auto;grid-template-columns:minmax(0,1fr)}
  .record.wide .r-icon{margin-bottom:12px}
  .proof{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:18px}
  .proof div,.proof div+div{padding:0;border-left:0}
  .proof div+div{padding-top:12px;border-top:1px solid var(--line)}
  .feature{grid-template-columns:minmax(0,1fr);gap:10px}
  .feature .f-n{font-size:1.4rem}
  .feature dl div{grid-template-columns:minmax(0,1fr);gap:2px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deflist div{grid-template-columns:minmax(0,1fr);gap:4px}
  .form .row{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .date-callout{grid-template-columns:minmax(0,1fr);gap:14px}
  .media-offset::after{inset:14px -12px -12px 14px}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .arch-tenant div{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  :root{--header-pad:12px;--header-logo-h:56px}
  .brand img{width:120px}
  .hero{padding-top:2.5rem}
  .hero h1{max-width:none}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
  .btn{white-space:normal;text-align:center}
  .facts{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .faq summary{padding:16px 18px;font-size:1rem}
  .faq details>p{padding:0 18px 18px}
  .phone{width:min(268px,100%)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn-primary:hover,.record:hover,.audience:hover,.species a:hover{transform:none}
}
@media print{.site-header,.site-footer,.cta-band,.menu{display:none}}

/* Additions: trust card, long role panels, species plate */
.arch-card{background:var(--deep);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-md)}
.role-grid.roles-long article{padding:26px}
.role-grid.roles-long p{color:var(--body);font-size:1rem;margin-bottom:14px}
.role-grid.roles-long .checks{gap:8px}
.role-grid.roles-long .checks li{font-size:.95rem}
.sp-hero .toc{margin-top:22px}
.callout.compact{margin:0}

/* Asset-based pricing plans */
.annual-banner{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-radius:var(--r-sm);background:var(--action-soft);color:var(--action-ink);font-weight:700;font-size:1rem;line-height:1.45;margin-top:24px}
.annual-banner svg{width:20px;height:20px;flex:none;margin-top:1px}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.plan{display:flex;flex-direction:column;gap:10px;padding:26px 22px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line-soft);box-shadow:var(--shadow-sm)}
.plan h3{font-family:var(--font-display);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0}
.plan .seats{color:var(--ink);font-weight:700;font-size:1.02rem}
.plan .amount{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:4px}
.plan .amount b{font-family:var(--font-display);font-size:clamp(2rem,1.6rem + 1.1vw,2.5rem);letter-spacing:-.035em;color:var(--ink);line-height:1}
.plan .amount span{color:var(--muted);font-size:.88rem}
.plan .annual{font-weight:700;color:var(--ink);font-size:1rem}
.plan .peruser{color:var(--teal-dark);font-weight:600;font-size:.92rem}
.plan .fine{color:var(--muted);font-size:.8rem;line-height:1.45}
.plan .btn{margin-top:auto;width:100%}
.includes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 30px;list-style:none}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}.includes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.plans{grid-template-columns:minmax(0,1fr)}.includes{grid-template-columns:minmax(0,1fr)}}
.ph-card .who{display:block;font-size:12px;color:var(--body);font-weight:600;margin-top:2px}

/* Full-width supporting card beneath the plan grid */
.plan-extra{margin-top:14px;display:grid;grid-template-columns:minmax(0,1.4fr) auto auto;gap:18px 32px;align-items:center;padding:26px 22px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line-soft);box-shadow:var(--shadow-sm)}
.plan-extra h3{font-family:var(--font-display);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 6px}
.plan-extra .seats{display:block;font-size:1.02rem;color:var(--ink);font-weight:700}
.plan-extra .fine{margin:6px 0 0;color:var(--muted);font-size:.8rem;line-height:1.45;max-width:46ch}
.plan-extra .amount{display:block;text-align:right}
.plan-extra .amount b{display:block;font-family:var(--font-display);font-size:clamp(2rem,1.6rem + 1.1vw,2.5rem);letter-spacing:-.035em;color:var(--ink);line-height:1}
.plan-extra .amount span{display:block;color:var(--muted);font-size:.88rem;margin-top:4px}
.plan-extra .amount .annual{color:var(--ink);font-weight:700;font-size:1rem;margin-top:6px}
.plan-extra .btn{white-space:nowrap}

/* Demo request form */
.form fieldset{border:0;margin:0;padding:0;display:grid;gap:16px}
.form legend{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:1.05rem;padding:0;margin-bottom:4px}
.form .req{color:var(--action-ink);font-weight:700}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--deep);outline-offset:2px}
.form [aria-invalid="true"]{border-color:var(--action);box-shadow:0 0 0 3px rgba(233,111,61,.18)}
.field-error{margin:0;color:var(--action-ink);font-size:.88rem;font-weight:600}
.form .hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px;padding:0}
.form .consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-weight:400;color:var(--body);font-size:.95rem}
.form .consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--deep)}
.form-actions{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.form-status{margin:0;padding:14px 16px;border-radius:var(--r-sm);font-size:.95rem;line-height:1.5;border-left:4px solid var(--water);background:var(--white);color:var(--body)}
.form-status.is-ok{border-left-color:var(--teal);background:var(--status-ok-bg);color:var(--status-ok-fg);font-weight:600}
.form-status.is-error{border-left-color:var(--action);background:var(--action-soft);color:var(--action-ink);font-weight:600}
.form-status.is-busy{border-left-color:var(--water);background:var(--white);color:var(--body)}
.btn.is-sending{position:relative;pointer-events:none}
.btn .spinner{display:none;width:17px;height:17px;flex:none;border-radius:50%;border:2px solid rgba(16,42,51,.25);border-top-color:var(--ink);animation:brd-spin .7s linear infinite}
.btn.is-sending .spinner{display:inline-block}
.btn:disabled{opacity:.72;cursor:not-allowed;box-shadow:none;transform:none}
@keyframes brd-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn .spinner{animation:none;border-top-color:transparent;border-right-color:var(--ink)}}
@media (max-width:980px){.plan-extra{grid-template-columns:minmax(0,1fr) auto}.plan-extra .btn{grid-column:1/-1;justify-self:start}}
@media (max-width:760px){.plan-extra{grid-template-columns:minmax(0,1fr);gap:16px}.plan-extra .amount{text-align:left}.plan-extra .btn{width:100%;justify-self:stretch}.form-actions{flex-direction:column;align-items:stretch}.form-actions .btn{width:100%}}
.form .field{display:grid;gap:6px;min-width:0}
/* In a two-up row one label can wrap to a second line while its neighbour
   does not. Sharing the row's tracks lets the label track size to the taller
   label, so both controls sit on one baseline and each error line stays in a
   track of its own. Browsers without subgrid keep the plain stacked layout. */
@supports (grid-template-rows:subgrid){
  .form .row{grid-template-rows:auto auto auto}
  .form .row>.field{grid-row:span 3;grid-template-rows:subgrid;row-gap:6px}
}
.form .field>label{display:block;font-weight:600;color:var(--ink);font-size:.95rem}
.form .field>label>span:not(.req){font-weight:400;color:var(--muted)}
.form .field .caption{margin:0}