/* Keegix — harbour navy, buoy yellow, sea glass. One family: Archivo, wide for headings. */
:root {
  --navy: #15304A;
  --navy-deep: #0E2236;
  --buoy: #F4C430;
  --glass: #E3ECE9;
  --rule: #D3DCDA;
  --slate: #4E5C66;
  --paper: #FFFFFF;
  /* v1 names, still used by page markup */
  --pine: var(--navy);
  --fog: var(--glass);
  --mist: var(--rule);
  --ink: var(--navy);
  --brass: var(--buoy);
  --line: #BFCBC8;
}
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  color: var(--navy);
  background: var(--paper);
  line-height: 1.55;
}
h1, h2, h3, .font-display {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-stretch: 118%;
  letter-spacing: -0.015em;
}
.wide { font-stretch: 125%; }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 6px var(--buoy); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.2rem; border-radius: 8px;
  font-weight: 700; font-size: 1rem; line-height: 1; cursor: pointer;
  border: 2px solid transparent; text-decoration: none; transition: background-color .15s, border-color .15s;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--navy-deep); }
.btn-buoy { background: var(--buoy); color: var(--navy); }
.btn-buoy:hover:not(:disabled) { background: #E8B516; }
.btn-quiet { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-quiet:hover:not(:disabled) { background: var(--glass); }
.btn-danger { background: #fff; color: #9b1c1c; border-color: #e7c4c4; }
.btn-danger:hover:not(:disabled) { border-color: #9b1c1c; }
.btn-small { min-height: 40px; padding: 0 .9rem; font-size: .95rem; }

.field {
  width: 100%; border: 1.5px solid var(--line); border-radius: 8px; background: #fff;
  padding: .75rem .85rem; font-size: 16px; color: var(--navy); font-family: inherit;
}
.field:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(244, 196, 48, .55); }
.field::placeholder { color: #8A979E; }
textarea.field { resize: vertical; min-height: 7rem; line-height: 1.5; }
.lbl { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.hint { font-size: .9rem; color: var(--slate); }

.panel { background: #fff; border: 1.5px solid var(--rule); border-radius: 10px; padding: 1.25rem; }
body.bg-fog .panel, .bg-fog .panel { border-color: #C9D5D2; }

.icon-btn {
  width: 42px; height: 42px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff;
  font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }

.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.photo-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: var(--glass); }
.photo-del {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 999px;
  background: rgba(21, 48, 74, .85); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer;
}

#toasts { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; width: min(92vw, 420px); }
.toast { background: var(--navy); color: #fff; padding: .85rem 1rem; border-radius: 8px; margin-top: .5rem; font-size: .95rem; border-left: 6px solid var(--buoy); }
.toast.error { background: #9b1c1c; border-left-color: #fff; }

.prose-plain { line-height: 1.65; }
.prose-plain p + p { margin-top: .8rem; }
.prose-plain h2 { font-size: 1.55rem; font-weight: 500; margin: 2rem 0 .5rem; }
.prose-plain ul { list-style: disc; padding-left: 1.3rem; margin-top: .5rem; }
.prose-plain li + li { margin-top: .3rem; }
.prose-plain a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--buoy); text-underline-offset: 3px; }

/* ---------- Home page ---------- */
/* Headings on the marketing pages use Newsreader; app screens keep Archivo via .font-display. */
h1, h2 { font-family: Newsreader, Georgia, "Times New Roman", serif; font-stretch: normal; font-weight: 400; letter-spacing: -0.012em; }
h3 { font-stretch: normal; }

.hero { position: relative; min-height: 100svh; color: #fff; overflow: hidden; background: var(--navy-deep); }
.hero-media, .hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,34,54,.82) 0%, rgba(14,34,54,.45) 48%, rgba(14,34,54,0) 78%); }
.hero-in { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; padding: 1.4rem 1.25rem 2.5rem; max-width: 72rem; margin-inline: auto; }
.hero h1 { font-size: clamp(2.7rem, 9vw, 5.6rem); line-height: 1.02; max-width: 12ch; margin-top: auto; }
.hero p { color: #E4ECF0; }
.hero .btn-quiet { background: transparent; color: #fff; border-color: #fff; }
.hero .btn-quiet:hover:not(:disabled) { background: rgba(255,255,255,.12); }
@media (max-width: 767px) {
  .hero::after { background: linear-gradient(180deg, rgba(14,34,54,.35) 0%, rgba(14,34,54,.2) 35%, rgba(14,34,54,.88) 72%); }
  .hero-media video, .hero-media img { object-position: 70% 50%; }
}
@media (min-width: 768px) { .hero-in { padding: 1.75rem 2.5rem 4rem; } }

.shot { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: var(--glass); }

.step-num { font-family: Newsreader, Georgia, serif; font-size: 2.8rem; line-height: 1; color: var(--navy); }

.price { border-top: 4px solid var(--navy); padding-top: 1.1rem; }
.price.price-pro { border-top-color: var(--buoy); }
.price ul { margin-top: 1rem; }
.price li { padding: .45rem 0; border-bottom: 1px solid var(--rule); }

details.faq { border-bottom: 1.5px solid var(--rule); }
details.faq summary { list-style: none; cursor: pointer; padding: 1.05rem 2.2rem 1.05rem 0; font-weight: 700; font-size: 1.08rem; position: relative; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .8rem; font-size: 1.5rem; font-weight: 400; }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { padding: 0 0 1.1rem; color: var(--slate); max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (min-width: 768px) { .phone { box-shadow: 14px 14px 0 var(--buoy); } }