/* Public pages: home (/) and sign-in (/login). Loaded after style.css and reuses its tokens,
   including the brand-navy tokens and the .lightbar component, which now live in style.css since
   the dashboard header band uses them too. */

/* ── Top bar (dark, sits on the hero) ───────────────────── */
.pub-nav { background: var(--night); color: var(--on-night); }
.pub-nav-inner { max-width: 1160px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pub-brand { display: flex; align-items: center; gap: 10px; color: var(--on-night); font-weight: 700; font-size: 1.05rem; }
.pub-brand:hover { text-decoration: none; }
.pub-brand img { width: 30px; height: 30px; }
.pub-links { display: flex; align-items: center; gap: 26px; }
.pub-links a:not(.pub-btn) { color: var(--on-night-soft); font-size: .92rem; font-weight: 500; }
.pub-links a:not(.pub-btn):hover { color: #fff; text-decoration: none; }

/* .pub-btn and its variants moved to style.css: the dashboard header band uses them too. */
.public :focus-visible { outline-color: #8fb0ff; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); }
.hero-inner { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; padding: 84px 24px 116px; }
.hero-copy { max-width: 560px; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.2rem); line-height: 1.03; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.hero-lead { margin-top: 22px; max-width: 34rem; font-size: 1.14rem; line-height: 1.6; color: var(--on-night-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-facts { display: grid; gap: 10px; margin: 38px 0 0; padding: 0; list-style: none; color: var(--on-night-soft); font-size: .93rem; }
.hero-facts li { display: flex; align-items: center; gap: 10px; }
.hero-facts .icon { color: var(--bar-blue); }

.hero-art { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 58%; background: var(--panel);
  /* Soft, slightly angled fade from the solid navy into the photo (no hard edge). */
  -webkit-mask-image: linear-gradient(100deg, transparent 14%, rgba(0, 0, 0, .3) 30%, rgba(0, 0, 0, .8) 47%, #000 62%);
          mask-image: linear-gradient(100deg, transparent 14%, rgba(0, 0, 0, .3) 30%, rgba(0, 0, 0, .8) 47%, #000 62%); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: saturate(.9) contrast(1.05); }
.hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, rgba(10, 18, 38, .55) 7%, transparent 20%), linear-gradient(90deg, rgba(10, 18, 38, .35) 0%, rgba(10, 18, 38, .1) 45%, transparent 75%), linear-gradient(0deg, rgba(10, 18, 38, .7), transparent 40%); }

/* ── Light sections ─────────────────────────────────────── */
.pub-section { padding: 92px 24px; }
.pub-section--tint { background: var(--surface-2); }
.pub-wrap { max-width: 1160px; margin: 0 auto; }
.pub-section h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.025em; line-height: 1.12; max-width: 22ch; }
.pub-sub { margin-top: 14px; max-width: 46ch; font-size: 1.05rem; color: var(--ink-soft); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 22px; border-top: 3px solid var(--accent); }
.steps li::before { content: counter(step); display: block; margin-bottom: 14px; font-size: 3rem; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--accent); opacity: .35; }
.steps h3 { font-size: 1.15rem; margin-bottom: 8px; }
.steps p { max-width: 34ch; color: var(--ink-soft); }

.showcase { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 196px; gap: 12px; margin-top: 44px; }
.tile { position: relative; overflow: hidden; border-radius: 10px; background: var(--night, #0a1226); color: #fff; }
.tile:first-child { grid-column: span 2; grid-row: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 18, 38, .88), transparent 55%); }
.tile span { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; font-weight: 700; font-size: .98rem; line-height: 1.25; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.tile:first-child span { font-size: 1.35rem; }
.tile:hover { text-decoration: none; }
.tile:hover img { transform: scale(1.04); }
.showcase-more { margin-top: 26px; }
.showcase-more a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 44px 0 0; padding: 0; list-style: none; }
.reasons li { padding: 24px 0; border-top: 1px solid var(--border-strong); }
.reasons h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin-bottom: 6px; }
.reasons .icon { color: var(--accent); }
.reasons p { max-width: 44ch; color: var(--ink-soft); }

.faq { max-width: 780px; margin-top: 40px; }
.faq details { border-top: 1px solid var(--border-strong); }
.faq details:last-child { border-bottom: 1px solid var(--border-strong); }
/* JS (main.js) animates open/close via the Web Animations API and needs the box clipped to its
   animated height for the duration; without JS, .is-animating is just never added and the native
   instant toggle still works. */
.faq details.is-animating { overflow: hidden; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 1.05rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
/* A single '+' that rotates into a cross when open, instead of swapping to '−' (content can't be
   transitioned) — one glyph, so the rotation itself is the animation. */
.faq summary::after { content: '+'; display: inline-block; font-size: 1.5rem; line-height: 1; font-weight: 400; color: var(--ink-soft); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer a { display: inline-block; margin-top: 8px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.closing { position: relative; background: var(--night); color: var(--on-night); padding: 84px 24px 76px; }
.closing-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.closing h2 { max-width: 20ch; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.03em; }
.closing p { margin-top: 10px; color: var(--on-night-soft); }

/* ── Sign-in ────────────────────────────────────────────── */
.signin { position: relative; overflow: hidden; flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* The photo reaches a little past the seam (not the full width) and fades out on its own right
   edge; the form panel's background then fades in over that same short span, so the whole blend
   sits in one tight band straddling the seam near the middle of the screen, not dragged off to one
   side or smeared across most of the form panel. */
.signin-art { position: absolute; top: 0; bottom: 0; left: 0; width: 62%; z-index: 0; }
.signin-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%;
  filter: saturate(.85) brightness(1.1) contrast(.95);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 92%);
          mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 92%);
}
/* The navy scrim shares the photo's own box AND its own fade-out mask, so it covers the image
   everywhere the image is visible and then dies away with it — never a strip of bare, un-tinted
   photo sitting right next to the solid form colour before this overlay has finished fading. */
.signin-art::after {
  content: '';
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 92%);
          mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 92%);
  background: linear-gradient(180deg, rgba(10, 18, 38, .55) 0%, rgba(10, 18, 38, .18) 22%, rgba(10, 18, 38, .48) 62%, rgba(10, 18, 38, .82) 100%);
}

.signin-brand { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 34px 44px 44px; color: var(--on-night); }
.signin-brand > * { position: relative; z-index: 1; }
.signin-brand .pub-brand { align-self: flex-start; }
.signin-brand .signin-welcome { margin: 0; max-width: none; font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; color: var(--on-night); }
.signin-brand p { margin-top: 14px; max-width: 30ch; color: var(--on-night-soft); font-size: 1.05rem; line-height: 1.55; }
.signin-thumbs { display: flex; gap: 10px; margin-top: 28px; }
.signin-thumbs img {
  width: 96px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid var(--night-line);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.signin-thumbs img:hover {
  transform: scale(1.08);
  border-color: var(--bar-blue);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
  position: relative; z-index: 1;   /* sits above its neighbours instead of being clipped by them */
}

.signin-form {
  position: relative; z-index: 1; display: grid; place-items: center; padding: 48px 32px;
  /* Short fade-in, matching the photo's own fade-out above, so the blend resolves to solid quickly
     right around the seam — well before the form card's own text — instead of trailing across most
     of this panel. */
  background: linear-gradient(90deg, transparent 0%, var(--bg) 20%);
}
.signin-card { width: 100%; max-width: 380px; }
.signin-card h1 { font-size: 1.85rem; letter-spacing: -0.03em; line-height: 1.15; }
.signin-card .signin-lead { margin: 10px 0 26px; color: var(--ink-soft); }
/* Theme-aware accent, not the fixed --night navy: in dark mode --night is nearly the same colour
   as the form panel's own dark background, so a --night button all but disappeared into it. */
.signin-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 20px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: 700 1rem/1.1 var(--sans); }
.signin-cta:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.signin-note { display: flex; gap: 10px; margin-top: 16px; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.signin-note .icon { margin-top: 2px; }
.signin-help { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border-strong); display: grid; gap: 8px; font-size: .92rem; color: var(--ink-soft); }
.signin-help a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Small screens ──────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner { padding: 48px 20px 40px; }
  .hero-art { position: relative; width: auto; height: 240px; -webkit-mask-image: none; mask-image: none; }
  .hero-art::after { background: linear-gradient(180deg, var(--night), transparent 45%); }
  .pub-links a:not(.pub-btn) { display: none; }
  .pub-section { padding: 64px 20px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .tile:first-child { grid-column: span 2; grid-row: span 1; }
  .reasons { grid-template-columns: 1fr; }
  .signin { grid-template-columns: 1fr; }
  /* Stacked layout: brand and form are on top of each other, not side by side, so there is no seam
     for the photo to bleed across. Pin the photo to just the brand block's own height and give the
     form block back a plain solid background. */
  .signin-art { top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 250px; }
  .signin-art img { object-position: 45% 38%; -webkit-mask-image: none; mask-image: none; }
  .signin-art::after { -webkit-mask-image: none; mask-image: none; }
  .signin-brand { min-height: 250px; padding: 26px 22px 28px; }
  .signin-thumbs { display: none; }
  .signin-form { padding: 36px 22px 44px; background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  /* .lightbar itself is handled once, in style.css, since the dashboard uses it too. */
  .tile img { transition: none; }
}