/* Marketing landing surface.
   Vanilla CSS, no framework, no external font or asset request — same rule the other public
   surfaces follow. One accent colour, one type scale, generous whitespace; the page carries its
   weight with spacing and hierarchy rather than decoration.

   Layout structure worth knowing before editing:
     .flow      — the hero's PDF → Quiz → Record row; a flex row that becomes a column, with the
                  connecting arrows rotating a quarter turn rather than being removed.
     .feature   — copy on the left, photograph on the right; stacks to one column on small
                  screens. Same proportions as .closing__inner, deliberately.
     .plans     — pricing cards. ONE is offered now (founder, 2026-08-18); .plans--single
                  centres it. The three-column rule and the reversal below it are kept for
                  whenever a second plan is offered again.
*/

:root {
  --accent:       #1f5fa8;
  --accent-dark:  #17497f;
  --accent-soft:  #e8f0fa;
  --ink:          #101418;
  --ink-2:        #2b333c;
  --muted:        #5b6670;
  --ok:           #1a8754;
  --line:         #e3e7ec;
  --line-soft:    #eef1f5;
  --bg:           #ffffff;
  --bg-tint:      #f5f7fb;
  --radius:       14px;
  --shadow:       0 1px 2px rgba(16, 20, 24, .04), 0 8px 24px rgba(16, 20, 24, .06);
}

* { box-sizing: border-box; }

/* A display value in a rule beats the user agent's [hidden] { display: none }, so any element
   given grid or flex would stay visible while marked hidden. This puts the attribute back in
   charge. */
[hidden] { display: none !important; }

/* In-page anchors ease rather than jump. CSS has no duration property for this — the browser
   picks it (roughly a third to half a second, scaled by distance). If an exact 500ms is ever
   required it takes a scripted scroll; nothing here depends on the precise figure. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The nav is sticky, so an anchor landing flush with the top would sit underneath it. */
section[id] { scroll-margin-top: 76px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ───────────────────────── buttons ───────────────────────── */

/* The secondary button is tinted rather than white. A white pill on a white card reads as a
   label, not a control — the only thing saying "click me" was the border, and visitors do not
   read borders. Both states carry the accent colour; the filled one is louder, not different
   in kind. */
.btn {
  display: inline-block;
  padding: .7rem 1.25rem;
  border: 1px solid #bcd4ee;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: #d9e7f7; border-color: #9dc0e6; }
.btn:active { background: #c9dcf3; border-color: #7fa9d8; transform: translateY(1px); }
.btn--primary:active { background: #143d6b; border-color: #143d6b; transform: translateY(1px); }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--sm { padding: .5rem .95rem; font-size: .9rem; }
.btn--lg { padding: .9rem 1.9rem; font-size: 1.05rem; }

/* ───────────────────────── nav ───────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav__brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }

/* Brand mark. Height is fixed and width follows the file's own proportions, so a replacement
   logo of any aspect ratio drops in without a layout change. The white variant
   (/home/myrecordlocker.png) is the one to use if this bar is ever given a dark background. */
.nav__mark {
  display: block;
  width: auto;
  height: 26px;
  flex: 0 0 auto;
}
.nav__mark--sm { height: 19px; }

.nav__word { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }

.nav__links { display: flex; align-items: center; gap: 1.5rem; }
.nav__link { color: var(--ink-2); font-size: .95rem; font-weight: 500; text-decoration: none; }
.nav__link:hover { color: var(--accent); }

/* ───────────────────────── hero ───────────────────────── */

/* Alternating tinted band. Every section that carries it gets the same background, the same
   hairlines, and the same vertical padding, so the page reads as one rhythm rather than three
   sections that happen to be grey. Applied to the flow cards, the middle explainer step, and
   pricing. */
.band { background: var(--bg-tint); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.hero { padding: 4.5rem 0 3.5rem; }
.cards { padding: 4.5rem 0; }

/* Copy and device each get their own column. A grid cannot overlap its own tracks, so no window
   width between the breakpoint and the widest desktop can push the headline across the tablet. */
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }

.hero__title {
  margin: 0 0 .9rem;
  max-width: 17ch;
  font-size: clamp(2rem, 3.9vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
}
/* The specific claim the page is making — kept visually distinct from the rest of the sentence. */
.hero__title strong { font-weight: 700; color: var(--accent); }

.hero__lead { margin: 0 0 .35rem; font-size: 1.15rem; max-width: 42ch; }
.hero__lead strong { font-weight: 700; }

.hero__checks { margin: 1.1rem 0 2rem; }

.hero__cta { margin: 0; }

/* The device art is already composed — no radius, no shadow — and it is above the fold, so it is
   not lazy-loaded. It is close to square, so it fills its half of the grid at a readable size
   while keeping the hero short. The height cap is the guard: it stops the art from growing past
   the copy beside it on a wide screen. */
.hero__media { display: flex; justify-content: center; }
.hero__media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 540px; }

/* ── the PDF → Quiz → Record row ── */

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: .75rem;
  text-align: left;
}
.flow__step { flex: 1 1 0; max-width: 320px; display: flex; }

.flow__arrow { flex: 0 0 auto; display: flex; align-items: center; }
.flow__arrow svg { width: 38px; height: 22px; }
.flow__arrow .s-line { stroke: #b3bfcc; }

.card {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.6rem;
  box-shadow: var(--shadow);
}
.card--flow { display: flex; flex-direction: column; }
.card--accent { border-color: #c3d6ee; background: linear-gradient(180deg, #fbfdff, #fff); }

.card__icon { display: block; margin-bottom: .9rem; }
.card__icon svg { width: 44px; height: 44px; display: block; }

.card__label { margin: 0 0 .45rem; font-size: 1.1rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.card__body { margin: 0; font-size: .95rem; color: var(--muted); }

/* Shared SVG ink for the three flow icons. */
.s-fill-soft   { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.s-line        { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-accent      { fill: none; stroke: var(--accent-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-accent-fill { fill: var(--accent); }

/* ───────────────────────── explainer ───────────────────────── */

.explain { padding: 4.5rem 0; }

.step { max-width: 46ch; }

/* Copy beside a photograph. Shares its proportions with .closing__inner on purpose. */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

/* Every photograph on the page renders identically. */
.photo { display: block; width: 100%; height: auto; border-radius: 18px; }

/* Two photographs in one frame, the second fading over the first every ten seconds. No
   script: this is one animated property on one element. A hidden tab freezes it outright
   rather than throttling it — measured, not assumed — which is harmless only because there is
   no state here to leave half-finished. `object-fit` means the two files need not share a
   ratio; the one underneath stays in normal flow and sizes the frame. */
.crossfade { position: relative; overflow: hidden; border-radius: 18px; }
.crossfade__over {
  position: absolute;
  /* Overscanned by a pixel on every side, and the frame clips it. Matching the boxes exactly
     is not enough: a rounded corner is antialiased, so the top image's edge pixels are part
     transparent by definition and the photograph underneath shows through them as a hairline
     crescent. Sized explicitly rather than by the insets: `width: auto` on an image is its
     intrinsic width, not the box the insets describe, and it collapsed to nothing. The frame
     above does the rounding for both. */
  inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover;
  border-radius: 0;
  opacity: 0;
  animation: closing-crossfade 20s ease-in-out infinite;
}
@keyframes closing-crossfade {
  0%, 42%  { opacity: 0 }
  50%, 92% { opacity: 1 }
  100%     { opacity: 0 }
}

.step__eyebrow {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
}
.step__title { margin: 0 0 .6rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.step__body { margin: 0; color: var(--muted); font-size: 1.03rem; }
.step__cta  { margin: 1.4rem 0 0; }

/* ───────────────────────── pricing ───────────────────────── */

.pricing { padding: 4.5rem 0; }

.section__title { margin: 0 0 .4rem; text-align: center; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; }
.section__sub { margin: 0 auto 2.75rem; max-width: 48ch; text-align: center; color: var(--muted); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
/* One price, so one card — centred at the width a single card wants rather than stretched
   across a three-column track. The three-column rule above is kept for the day a second plan
   is offered again; the plans it laid out are hidden, not deleted. */
.plans--single { grid-template-columns: minmax(0, 460px); justify-content: center; }

.plan {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
/* The emphasised card. Its blue outline and filled button are the only signal of which plan the
   page is steering toward, so this class and the primary button on that card move together. */
.plan--facility { border-color: var(--accent); box-shadow: 0 1px 2px rgba(31, 95, 168, .08), 0 10px 30px rgba(31, 95, 168, .12); }

.plan__name  { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.plan__price { margin: 0 0 1.25rem; line-height: 1; }
.plan__amount { font-size: 2.8rem; font-weight: 700; letter-spacing: -.03em; }
.plan__pitch { margin: 0 0 1.75rem; font-size: .98rem; }
.plan__cta   { margin: auto 0 0; }
.plan__cta .btn { display: block; text-align: center; }

/* ───────────────────────── questions ─────────────────────────
   <details> collapses natively, so there is no script here and none is needed. The rotating caret
   is a bordered pseudo-element rather than an icon file — one less request for a mark that appears
   seventeen times. */

.faq { padding: 4.5rem 0; }
.faq__inner { max-width: 820px; }

.faq__group { margin-top: 2.5rem; }
.faq__group:first-of-type { margin-top: 1.75rem; }

.faq__group-title {
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
}

.qa { border-bottom: 1px solid var(--line-soft); }
.qa:first-of-type { border-top: 1px solid var(--line-soft); }

.qa summary {
  position: relative;
  padding: .95rem 2.25rem .95rem 0;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;                 /* Firefox */
}
.qa summary::-webkit-details-marker { display: none; }   /* Safari */
.qa summary:hover { color: var(--accent); }

/* The caret: two borders on a rotated square. Points down when closed, up when open. */
.qa summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 1.25rem;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.qa[open] summary::after { transform: rotate(-135deg); top: 1.45rem; }
.qa[open] summary { color: var(--ink); }

.qa__a { margin: -.15rem 0 1.15rem; max-width: 68ch; color: var(--muted); }

.faq__more { margin: 1rem 0 1.15rem; color: var(--muted); }

/* ───────────────────────── request a demo ───────────────────────── */

.demo { padding: 4.5rem 0; }
.demo__inner { max-width: 820px; }

/* ───────────────────────── closing ───────────────────────── */

.closing { padding: 5rem 0 5.5rem; }

.closing__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.closing__title { margin: 0 0 .9rem; max-width: 18ch; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.closing__body { margin: 0 0 1.6rem; max-width: 44ch; color: var(--muted); }
.closing__cta { margin: 0; }

/* The <symbol> holder carries no layout — it only supplies the shape the <use> elements point at. */
.u-hidden { display: none; }

.checks { list-style: none; margin: 0 0 2rem; padding: 0; }
.checks__item { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; font-size: 1rem; font-weight: 500; }
.checks__item:last-child { margin-bottom: 0; }
.checks__mark { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ok); }


/* ───────────────────────── footer ───────────────────────── */

.foot { border-top: 1px solid var(--line-soft); background: var(--bg-tint); padding: 1.75rem 0; }
.foot__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.foot__brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .95rem; }
.foot__legal { margin: .55rem 0 0; max-width: 62ch; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.foot__links { display: flex; align-items: center; gap: .6rem; }
.foot__link { color: var(--muted); font-size: .9rem; text-decoration: none; }
.foot__link:hover { color: var(--accent); text-decoration: underline; }
.foot__sep { color: #c3cad3; }

/* ───────────────────────── responsive ───────────────────────── */

@media (max-width: 940px) {
  /* The hero stacks before the copy column gets tight enough to look cramped beside the tablet.
     The copy keeps its left edge; only the device moves underneath it. */
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__title, .hero__lead { max-width: none; }
  .hero__media img { max-height: 460px; }
}

@media (max-width: 860px) {
  /* Pricing reverses to facility-first on narrow screens. Deliberate, not a bug. */
  .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plan--facility { order: 1; }
  .plan--annual   { order: 2; }
  .plan--payg     { order: 3; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  .nav__links { gap: .9rem; }
  .nav__link { display: none; }               /* keep the bar to brand + one action on phones */
  .nav__links .btn { display: inline-block; }

  .hero { padding: 3rem 0 2.5rem; }
  .cards { padding: 3rem 0; }

  /* The flow becomes a column and the arrows point down. */
  .flow { flex-direction: column; align-items: stretch; gap: .5rem; }
  .flow__step { max-width: none; }
  .flow__arrow { justify-content: center; padding: .15rem 0; }
  .flow__arrow svg { transform: rotate(90deg); }

  .explain { padding: 3rem 0; }
  .feature { grid-template-columns: 1fr; gap: 1.75rem; }

  .pricing { padding: 3rem 0; }
  .faq { padding: 3rem 0; }

  .demo { padding: 3rem 0; }

  .closing { padding: 3.5rem 0 4rem; }
  .closing__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .closing__title, .closing__body { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  /* This block governs transitions, not animations — the fade needs stopping by name. */
  .crossfade__over { animation: none; }
}