/* DiveCut site — visual language lifted from the app's DesignSystem/.
   Backdrop: Assets.xcassets/BackgroundPortrait + BackgroundLandscape
   Scrim:    DCBackdrop.swift (bottom stops darkened for web page height)
   Surfaces: DCGlassSurface.swift   Button rim: DCElectricRim.swift
   Colour:   DCColors.swift         Radii/space: DCMetrics.swift
   Dark only, by design — the app has no light appearance for this imagery. */

:root{
  --blue:#0F3D99;          /* Color.divecutBlue */
  --blue-bright:#2563CC;   /* Color.divecutBlueBright */
  --fg1:#ffffff;
  --fg2:rgba(255,255,255,.72);
  --fg3:rgba(255,255,255,.62);
  --fg4:rgba(255,255,255,.48);
  --ground:#02060f;
  --r-lg:12px;             /* DCRadius.lg */
  --r-xl:20px;             /* DCRadius.xl */
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--ground); color:var(--fg1);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ---- backdrop: fixed behind the scrolling content ---- */
.backdrop{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
.backdrop::before{
  content:""; position:absolute; inset:0;
  background-image:url(/backdrop.jpg);
  background-size:cover; background-position:center top;
}
.backdrop::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,.45) 0%, rgba(0,0,0,.10) 28%,
      rgba(0,0,0,.42) 62%, rgba(0,0,0,.84) 100%);
}
@media (min-width:760px){
  .backdrop::before{ background-image:url(/backdrop-wide.jpg); background-position:center 30%; }
}

/* ---- glass surface (DCGlassSurface) ---- */
.glass{
  position:relative; border-radius:var(--r-xl);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(135deg, rgba(27,44,86,.60) 0%, rgba(9,17,40,.74) 100%);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 10px 15px rgba(0,0,0,.44), 0 2px 3px rgba(0,0,0,.32),
             inset 0 0 0 .75px rgba(0,0,0,.55);
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.74) 0%, rgba(255,255,255,.12) 16%,
    rgba(120,160,235,.05) 46%, rgba(0,0,0,.30) 82%, rgba(0,0,0,.46) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
@media (prefers-reduced-transparency: reduce){
  .glass{ backdrop-filter:none; -webkit-backdrop-filter:none;
    background:linear-gradient(135deg, rgba(19,31,63,.975) 0%, rgba(7,13,30,.995) 100%); }
}

/* ---- layout ---- */
.wrap{ max-width:900px; margin:0 auto; padding:0 24px; }
@media (min-width:760px){ .wrap{ padding:0 48px; } }

.masthead{ display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:28px 0 0; margin-bottom:56px; }
@media (min-width:760px){ .masthead{ padding:40px 0 0; margin-bottom:88px; } }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand img{ width:34px; height:34px; border-radius:9px; display:block; }
.brand span{ font-size:16px; font-weight:600; letter-spacing:-.01em; }
@media (min-width:760px){ .brand img{ width:40px; height:40px; border-radius:10px; }
  .brand span{ font-size:17px; } }
.masthead nav{ display:flex; align-items:center; gap:20px; font-size:15px; }

/* touch targets: nav and brand reach 44px on phones (inline links in body
   copy stay inline — forcing them to 44px would break the paragraph). */
@media (max-width:759px){
  .masthead nav a{ display:inline-flex; align-items:center; min-height:44px; }
  .brand{ min-height:44px; }
}

a{ color:var(--fg2); text-decoration:none; }
a:hover{ color:var(--fg1); }
.doc a{ color:#6B9BFF; }
.doc a:hover{ color:var(--fg1); }

/* ---- home ---- */
h1{ margin:0 0 18px; color:var(--fg1); font-weight:700;
  font-size:clamp(34px, 6.4vw, 62px); line-height:1.06; letter-spacing:-.032em;
  text-wrap:pretty; }
@media (min-width:760px){ h1{ max-width:14em; margin-bottom:24px; } }
.lede{ margin:0 0 28px; color:var(--fg2); font-size:clamp(17px, 2.2vw, 21px);
  line-height:1.55; max-width:30em; text-wrap:pretty; }
@media (min-width:760px){ .lede{ margin-bottom:40px; } }

.actions{ display:flex; flex-direction:column; gap:12px; margin-bottom:48px; }
@media (min-width:760px){ .actions{ flex-direction:row; align-items:center;
  gap:24px; margin-bottom:80px; } }

.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 22px; border-radius:var(--r-lg);
  background:var(--blue); border:1px solid rgba(37,99,204,.7); color:var(--fg1);
  font-size:17px; font-weight:600;
  box-shadow:0 0 20px rgba(15,61,153,.45), inset 0 0 0 1px rgba(255,255,255,.20);
  transition:transform .1s ease-in-out;
}
.btn:hover{ color:var(--fg1); }
.btn:active{ transform:scale(.98); }
@media (min-width:760px){ .btn{ display:inline-flex; } }
.note{ color:var(--fg3); font-size:15px; text-align:center; }
@media (min-width:760px){ .note{ text-align:left; } }

.card{ padding:26px 24px; margin-bottom:20px; }
@media (min-width:760px){ .card{ padding:36px 40px; margin-bottom:24px; } }
.eyebrow{ color:rgba(255,255,255,.50); font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:22px; }
@media (min-width:760px){ .eyebrow{ font-size:13px; margin-bottom:28px; } }

.steps{ display:flex; flex-direction:column; gap:22px; }
@media (min-width:760px){ .steps{ gap:24px; } }
.step{ display:flex; align-items:flex-start; gap:14px; }
@media (min-width:760px){ .step{ gap:18px; } }
.step .ico{ flex:none; width:30px; height:30px; border-radius:999px;
  background:rgba(15,61,153,.85); border:1px solid rgba(37,99,204,.7);
  display:grid; place-items:center; color:var(--fg1); }
@media (min-width:760px){ .step .ico{ width:34px; height:34px; } }
.step h2{ margin:0 0 3px; color:var(--fg1); font-size:16px; font-weight:600; }
@media (min-width:760px){ .step h2{ font-size:17px; margin-bottom:4px; } }
.step p{ margin:0; color:var(--fg2); font-size:15px; line-height:1.5; }
@media (min-width:760px){ .step p{ font-size:16px; line-height:1.55; } }

.strip{ padding:20px 22px; display:flex; align-items:flex-start; gap:13px;
  margin-bottom:36px; }
@media (min-width:760px){ .strip{ padding:24px 28px; gap:16px; margin-bottom:56px; } }
.strip .ico{ flex:none; color:var(--blue-bright); margin-top:1px; }
.strip p{ margin:0; color:var(--fg2); font-size:15px; line-height:1.5; }
@media (min-width:760px){ .strip p{ font-size:16px; line-height:1.55; } }
.strip b{ color:var(--fg1); font-weight:600; }

.status{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  font-size:15px; margin-bottom:6px; }
.status b{ color:var(--fg1); font-weight:600; }
.status span{ color:rgba(255,255,255,.62); }
.req{ color:var(--fg4); font-size:13px; margin:0 0 32px; }
@media (min-width:760px){ .req{ font-size:13.5px; } }

/* ---- document pages ---- */
.doc h1{ font-size:clamp(30px, 5vw, 44px); margin-bottom:10px; max-width:none; }
.doc .updated{ color:var(--fg3); font-size:14px; margin:0 0 32px; }
.callout{ padding:24px 26px; display:flex; gap:14px; align-items:flex-start;
  margin-bottom:20px; }
@media (min-width:760px){ .callout{ padding:28px 30px; gap:16px; } }
.callout .ico{ flex:none; color:var(--blue-bright); margin-top:2px; }
.callout p{ margin:0; color:rgba(255,255,255,.88); font-size:16px; line-height:1.6; }
@media (min-width:760px){ .callout p{ font-size:17px; } }
.callout b{ color:var(--fg1); font-weight:600; }
.body{ padding:30px 24px; }
@media (min-width:760px){ .body{ padding:44px 46px; } }
.body > div{ display:flex; flex-direction:column; gap:32px; }
@media (min-width:760px){ .body > div{ gap:36px; } }
.sec{ display:flex; flex-direction:column; gap:12px; }
.sec h2{ margin:0; color:var(--fg1); font-size:18px; font-weight:600; letter-spacing:-.01em; }
@media (min-width:760px){ .sec h2{ font-size:19px; } }
.sec p{ margin:0; color:var(--fg2); font-size:16px; line-height:1.62; text-wrap:pretty; }
.sec b{ color:var(--fg1); font-weight:600; }
.sec ul{ margin:2px 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:10px; }
.sec li{ color:var(--fg2); font-size:16px; line-height:1.55;
  position:relative; padding-left:17px; }
.sec li::before{ content:""; position:absolute; left:0; top:9px;
  width:5px; height:5px; border-radius:999px; background:var(--blue-bright); }
.rule{ height:1px; background:rgba(255,255,255,.10); }

/* ---- footer ---- */
footer{ border-top:1px solid rgba(255,255,255,.12); margin-top:44px;
  padding:22px 0 64px; display:flex; flex-wrap:wrap; align-items:center;
  gap:4px 22px; font-size:14px; }
@media (min-width:760px){ footer{ margin-top:48px; padding-top:24px; gap:26px; } }
footer a{ display:inline-flex; align-items:center; min-height:44px; }
@media (min-width:760px){ footer a{ min-height:0; } }
footer .copy{ color:var(--fg4); }
@media (min-width:760px){ footer .copy{ margin-left:auto; } }