/* plylogic.net — shared styles for every page.
   Palette from the October-2025 plylogic.net stub (violet + cyan washes, blue-to-violet accent);
   type scale from the one-page BridgeGuru site.
   Type scale is tuned for readers over 60: 17px body floor, nothing under 15px. */
:root {
  --bg:#f5f7fb;
  --ink:#0f172a;            /* headings */
  --body:#334155;           /* body copy */
  --muted:#475569;          /* fine print */
  --surface:#ffffff;
  --surface-alt:rgba(255,255,255,.72);
  --line:rgba(15,23,42,.12);
  --rule:rgba(37,99,235,.45);
  --eyebrow:#6d28d9;
  --accent-a:#2563eb; --accent-b:#4f46e5; --accent-c:#7c3aed;
  --tick:#2563eb;
  --link:#1d4ed8;
  --btn-bg:#1d4ed8; --btn-fg:#ffffff;
  --ghost-fg:#1e293b; --ghost-bg:rgba(255,255,255,.85);
  --shadow:0 22px 60px rgba(15,23,42,.22);
  --ring:0 0 0 1px var(--line), 0 20px 60px rgba(39,211,238,.18);
  --panel-2:#f6f8fc;
  --grad:linear-gradient(135deg,#2563eb,#7c3aed);
  --wash-1:rgba(123,58,237,.25); --wash-2:rgba(39,211,238,.22);
  --wash-3:rgba(37,99,235,.10); --wash-4:rgba(124,58,237,.07);
  --final-wash:rgba(37,99,235,.14);
  --header-bg:rgba(245,247,251,.86);
  --err:#b91c1c;
  --suit-red:#c81e1e;
  --max:1080px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}
body {
  margin:0; font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); font-size:17px; line-height:1.6;
  -webkit-text-size-adjust:100%;
}
img { max-width:100%; }
a { color:var(--link); }
.page { min-height:100vh; display:flex; flex-direction:column; background:
      radial-gradient(1100px 650px at 12% -10%, var(--wash-1), transparent 60%),
      radial-gradient(900px 500px at 110% 10%, var(--wash-2), transparent 65%),
      radial-gradient(55% 50% at 55% 65%, var(--wash-3) 0%, transparent 72%),
      radial-gradient(35% 30% at 30% 95%, var(--wash-4) 0%, transparent 70%); }
main { flex:1; }
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:0 0 10px 0; font-weight:600;
}
.skip-link:focus { left:0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid var(--accent-a); outline-offset:3px; border-radius:4px; }
.red { color:var(--suit-red); }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:50; background:var(--header-bg);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent; }
.site-header { border-bottom-color:var(--line); }
.nav { display:flex; justify-content:space-between; align-items:center; gap:20px; max-width:var(--max); margin:0 auto; padding:14px 28px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:21px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap; }
.brand .mark { width:28px; height:28px; border-radius:10px; background:var(--grad); flex:none; }
.brand .by { font-weight:600; font-size:14px; color:var(--muted); margin-left:2px; }
.nav-links { display:flex; gap:6px; align-items:center; font-size:16px; }
.nav-links a:not(.btn) { color:var(--ink); font-weight:700; text-decoration:none; padding:8px 10px; margin:0 2px; position:relative; }
.nav-links a:not(.btn)::after { content:''; position:absolute; left:10px; right:100%; bottom:2px; height:2px; border-radius:2px; background:var(--grad); transition:right .2s ease; }
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current=page]::after { right:10px; }
.nav-links .btn { margin-left:10px; padding:10px 20px; font-size:15px; }
.menu { display:none; position:relative; }
.menu summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:var(--ghost-bg);
  font-weight:600; font-size:16px; color:var(--ink); }
.menu summary::-webkit-details-marker { display:none; }
.menu summary .bars { width:18px; height:12px; position:relative; border-top:2px solid currentColor; border-bottom:2px solid currentColor; }
.menu summary .bars::after { content:''; position:absolute; left:0; right:0; top:3px; border-top:2px solid currentColor; }
.menu[open] summary .bars { border-color:transparent; }
.menu[open] summary .bars::before, .menu[open] summary .bars::after { content:''; position:absolute; left:0; right:0; top:3px; border-top:2px solid currentColor; }
.menu[open] summary .bars::before { transform:rotate(45deg); border-top:2px solid var(--ink); }
.menu[open] summary .bars::after { transform:rotate(-45deg); }
.menu-panel { position:absolute; right:0; top:calc(100% + 10px); min-width:240px; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:8px; display:grid; }
.menu-panel a { padding:13px 16px; border-radius:10px; text-decoration:none; color:var(--ink); font-size:17px; }
.menu-panel a:hover { background:rgba(37,99,235,.06); }
.menu-panel a[aria-current=page] { font-weight:700; background:rgba(37,99,235,.08); }
.menu-panel .btn { margin-top:6px; text-align:center; color:var(--btn-fg); }

/* ---------- Buttons ---------- */
.cta-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-block; text-decoration:none; font-weight:600; border-radius:999px; padding:15px 28px; font-size:17px; line-height:1.3; }
.btn.primary { background:var(--grad); color:var(--btn-fg); font-weight:800; box-shadow:0 10px 30px rgba(37,99,235,.25); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn.primary:hover { transform:translateY(-2px); filter:brightness(1.05); }
.btn.ghost { color:var(--ghost-fg); border:1px solid var(--line); background:var(--ghost-bg); }
.btn.ghost:hover { border-color:var(--rule); }
.fineprint { font-size:15px; margin-top:14px; color:var(--muted); }

/* ---------- Type ---------- */
h1 { margin:0 0 18px; text-wrap:balance; font-weight:720; font-size:52px; line-height:1.08; letter-spacing:-.028em; color:var(--ink); }
h1 em, h2 em { font-style:normal; -webkit-background-clip:text; background-clip:text; color:transparent; }
h1 em { background-image:linear-gradient(100deg,var(--accent-a) 5%,var(--accent-b) 45%,var(--accent-c) 80%); }
h2 { margin:0 0 10px; text-wrap:balance; font-weight:720; font-size:34px; line-height:1.15; letter-spacing:-.02em; color:var(--ink); }
h2 em { background-image:linear-gradient(100deg,var(--accent-a),var(--accent-b)); }
.sub { margin:0 0 30px; font-size:20px; line-height:1.55; max-width:34em; color:var(--body); }
.lead { margin:0 0 40px; font-size:19px; max-width:38em; line-height:1.55; color:var(--body); }
.lead:last-child { margin-bottom:0; }
.eyebrow { font-size:14px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:14px; color:var(--eyebrow); }

.more { display:inline-block; margin-top:22px; font-weight:600; font-size:17px; text-decoration:none; }
.more::after { content:' \2192'; }
.more:hover { text-decoration:underline; }

/* ---------- Hero ---------- */
.hero { max-width:var(--max); margin:0 auto; padding:56px 28px 72px; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.page-hero { max-width:var(--max); margin:0 auto; padding:56px 28px 40px; }
.page-hero h1 { font-size:46px; max-width:18em; }
.page-hero .sub { margin-bottom:0; max-width:38em; }

/* ---------- Phone frame ---------- */
.phone { position:relative; border-radius:22px; background:var(--surface); padding:10px; box-shadow:var(--shadow); border:1px solid var(--line); }
.phone::before { content:''; position:absolute; inset:-1px; border-radius:23px; padding:1.5px; pointer-events:none;
      background:conic-gradient(from 210deg, var(--accent-a), var(--accent-b), var(--accent-c), var(--accent-a));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.7; }
.phone img { display:block; width:100%; height:auto; border-radius:14px; }
.hero .phone { max-width:390px; margin:0 auto; }

/* ---------- Sections ---------- */
.strip { padding:64px 28px; }
.strip.alt { background:var(--surface-alt); }
.strip.tight { padding-top:24px; }
.strip-inner { max-width:var(--max); margin:0 auto; }

.feat3 { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.feat { border-radius:18px; padding:26px 24px; background:linear-gradient(180deg,var(--surface),var(--panel-2)); border:1px solid var(--line); box-shadow:var(--shadow); }
.feat h3 { margin:0 0 10px; font-size:20px; color:var(--ink); }
.feat p { margin:0; font-size:17px; line-height:1.62; color:var(--body); }
.feat .icon { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; margin-bottom:14px;
  font-size:22px; color:#fff; background:var(--grad); }
a.feat { text-decoration:none; transition:border-color .2s ease, transform .2s ease; }
a.feat:hover { border-color:var(--rule); transform:translateY(-4px); box-shadow:var(--ring); }

.split { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.split.flip > :first-child { order:2; }
.split h2 { margin-bottom:14px; }
.split .phone { max-width:360px; margin:0 auto; }
.split figure { margin:0; }
.split figcaption { font-size:16px; line-height:1.55; color:var(--body); text-align:center; margin-top:16px; max-width:24em; margin-left:auto; margin-right:auto; }

.screens { display:grid; grid-template-columns:repeat(3,1fr); gap:40px 34px; align-items:start; }
.screens figure { margin:0; }
.screens .phone { max-width:330px; margin:0 auto; }
.screens figcaption { font-size:16px; line-height:1.55; color:var(--body); text-align:center; margin-top:16px; max-width:26em; margin-left:auto; margin-right:auto; }

.points { margin:0 0 20px; padding:0; list-style:none; display:grid; gap:16px; max-width:40em; }
.points li { position:relative; padding-left:26px; font-size:18px; line-height:1.6; color:var(--body); }
.points li::before { content:'\2726'; position:absolute; left:0; color:var(--accent-b); }
.options { margin:22px 0 0; padding:0; list-style:none; display:grid; gap:14px 34px; grid-template-columns:1fr 1fr; max-width:58em; }
.options li { position:relative; padding-left:26px; font-size:17px; line-height:1.55; color:var(--body); }
.options li::before { content:'\2713'; position:absolute; left:0; color:var(--tick); font-weight:700; }
.after { margin:0; font-size:17px; color:var(--muted); }

.chips { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.chips li { padding:8px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:16px; color:var(--body); }

.stats { display:flex; flex-wrap:wrap; gap:14px 40px; margin:28px 0 0; padding:0; list-style:none; }
.stats li { font-size:16px; color:var(--muted); }
.stats strong { display:block; font-size:34px; line-height:1.1; letter-spacing:-.02em; color:var(--ink); }

/* ---------- Learn: track cards ---------- */
.tracks { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.track { border-radius:18px; padding:24px 24px 18px; background:var(--surface); border:1px solid var(--line); }
.track-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:8px; }
.track h3 { margin:0; font-size:20px; color:var(--ink); }
.track .count { flex:none; font-size:15px; font-weight:600; color:var(--eyebrow); }
.track p { margin:0 0 12px; font-size:17px; line-height:1.6; color:var(--body); }
.track details { border-top:1px solid var(--line); padding-top:10px; }
.track summary { cursor:pointer; font-weight:600; font-size:16px; color:var(--link); padding:6px 0; }
.track ol { margin:8px 0 6px; padding-left:24px; color:var(--body); font-size:16px; line-height:1.55; }
.track li { margin-bottom:4px; }
.stage { font-size:14px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--muted); margin:40px 0 16px; }
.stage:first-child { margin-top:0; }

/* ---------- FAQ ---------- */
.faq { max-width:46em; display:grid; gap:12px; }
.faq-group { font-size:14px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--muted); margin:34px 0 4px; }
.faq-group:first-child { margin-top:0; }
.faq details { background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.faq details[open] { border-color:var(--rule); }
.faq summary { cursor:pointer; list-style:none; padding:18px 52px 18px 22px; font-weight:600; font-size:18px; line-height:1.45; color:var(--ink); position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-size:24px; font-weight:400; color:var(--accent-b); }
.faq details[open] summary::after { content:'\2212'; }
.faq .answer { padding:0 22px 20px; }
.faq .answer p { margin:0 0 12px; color:var(--body); }
.faq .answer p:last-child { margin-bottom:0; }

/* ---------- Support ---------- */
.help-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.help-card { border-radius:18px; padding:26px 24px; background:var(--surface); border:1px solid var(--line); }
.help-card h2 { font-size:22px; margin-bottom:10px; }
.help-card p, .help-card li { font-size:17px; color:var(--body); }
.help-card p { margin:0 0 12px; }
.help-card p:last-child { margin-bottom:0; }
.help-card ol { margin:0 0 12px; padding-left:22px; }
.contact-card { border-radius:20px; padding:30px 28px; background:var(--surface); border:1px solid var(--line); position:relative; max-width:46em; }
.contact-card::before { content:''; position:absolute; inset:-1px; border-radius:21px; padding:1.5px; pointer-events:none;
      background:conic-gradient(from 30deg, var(--accent-a), var(--accent-b), var(--accent-c), var(--accent-a));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.contact-card h2 { font-size:26px; }
.contact-card p { margin:0 0 14px; color:var(--body); }
.contact-card .email { font-size:22px; font-weight:700; }
kbd, .path { font-family:inherit; font-weight:600; color:var(--ink); }

/* ---------- Legal pages ---------- */
.legal { max-width:44em; margin:0 auto; padding:48px 28px 72px; line-height:1.65; }
.legal h1 { font-size:40px; margin:0 0 4px; }
.legal .updated { color:var(--muted); margin:0 0 32px; font-size:15px; }
.legal h2 { font-size:22px; margin:36px 0 8px; }
.legal p, .legal li { color:var(--body); }
.legal li { margin-bottom:8px; }
.legal table { border-collapse:collapse; width:100%; margin:12px 0 4px; font-size:16px; background:var(--surface); border-radius:12px; overflow:hidden; }
.legal th, .legal td { text-align:left; padding:10px 12px; border-bottom:1px solid #e2e8f0; vertical-align:top; }
.legal th { color:var(--ink); background:rgba(37,99,235,.05); }
.legal td { color:var(--body); }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- Beta form ---------- */
.beta-form { max-width:30em; display:grid; gap:24px; }
.beta-form .field { display:grid; gap:8px; }
.beta-form label { font-size:17px; font-weight:600; color:var(--ink); }
.beta-form .opt { font-weight:400; color:var(--muted); }
.beta-form input[type=email], .beta-form .field input[type=text], .beta-form select {
      font:inherit; font-size:17px; padding:13px 15px; border-radius:12px;
      border:1px solid var(--line); background:var(--surface); color:var(--ink); width:100%; }
.beta-form input:focus-visible, .beta-form select:focus-visible { outline:3px solid var(--accent-a); outline-offset:2px; }
.beta-form .help { margin:0; font-size:15px; color:var(--muted); }
.beta-form .err { margin:0; font-size:15px; color:var(--err); }
.beta-form .privacy { margin:0; font-size:15px; line-height:1.6; color:var(--muted); max-width:34em; }
.beta-form button { justify-self:start; cursor:pointer; border:0; font-family:inherit; }
.beta-form button:disabled { opacity:.7; cursor:progress; }
.beta-form fieldset.checks { border:0; margin:0; padding:0; }
.beta-form fieldset.checks legend { padding:0; font-size:17px; font-weight:600; color:var(--ink); }
.beta-form .check { display:flex; align-items:center; gap:12px; min-height:44px;
      font-size:17px; font-weight:400; color:var(--body); cursor:pointer; }
.beta-form .check input[type=checkbox] { width:22px; height:22px; flex:none; accent-color:var(--accent-a); cursor:pointer; }
.beta-form .platform-notes:empty { display:none; }
.beta-form .platform-notes p { margin:0 0 8px; font-size:15px; line-height:1.55; color:var(--muted); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.beta-layout { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.beta-done h2 { margin:0 0 14px; }
.beta-done p { margin:0 0 12px; font-size:18px; line-height:1.65; color:var(--body); max-width:38em; }

/* ---------- Final CTA ---------- */
.final { text-align:center; padding:84px 28px; background:radial-gradient(60% 110% at 50% 115%, var(--final-wash) 0%, transparent 70%); }
.final h2 { margin:0 0 14px; }
.final p { margin:0 auto 30px; font-size:19px; color:var(--body); max-width:34em; }
.final .cta-row { justify-content:center; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--line); background:var(--surface-alt); }
.footer-inner { max-width:var(--max); margin:0 auto; padding:44px 28px 36px; display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:32px; }
.footer-inner .brand { display:inline-flex; margin-bottom:10px; }
.footer-inner p { margin:0; font-size:15px; line-height:1.6; color:var(--muted); max-width:24em; }
.footer-col h2 { font-size:14px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink); margin:4px 0 12px; }
.footer-col ul { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.footer-col a { color:var(--body); text-decoration:none; font-size:16px; }
.footer-col a:hover { color:var(--ink); text-decoration:underline; }
.footer-base { max-width:var(--max); margin:0 auto; padding:18px 28px 32px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:15px; color:var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero { grid-template-columns:1fr; padding-top:36px; gap:44px; }
  .hero .phone { max-width:340px; }
  h1 { font-size:44px; }
  .page-hero h1 { font-size:40px; }
  .feat3 { grid-template-columns:repeat(2,1fr); }
  .screens { grid-template-columns:repeat(2,1fr); }
  .screens .phone { max-width:300px; }
  .split, .beta-layout { grid-template-columns:1fr; gap:40px; }
  .split.flip > :first-child { order:0; }
  .footer-inner { grid-template-columns:repeat(3,1fr); }
  .footer-about { grid-column:1 / -1; }
}
@media (max-width:860px){
  .nav-links { display:none; }
  .menu { display:block; }
}
@media (max-width:680px){
  h1 { font-size:38px; }
  .page-hero { padding-top:36px; }
  .page-hero h1, .legal h1 { font-size:34px; }
  .feat3, .screens, .options, .tracks, .help-grid { grid-template-columns:1fr; }
  .strip { padding:52px 16px; }
  .hero, .page-hero, .legal { padding-left:16px; padding-right:16px; }
  .nav { padding:12px 16px; }
  .footer-inner { grid-template-columns:1fr 1fr; padding-left:16px; padding-right:16px; }
  .footer-base { padding-left:16px; padding-right:16px; }
  .final { padding:64px 16px; }
}
@media (max-width:520px){
  h1 { font-size:34px; }
  h2 { font-size:28px; }
  .page-hero h1, .legal h1 { font-size:31px; }
  .sub { font-size:19px; }
}

/* ---------- Plans ---------- */
.pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.plan { border-radius:20px; padding:28px 26px; background:var(--surface); border:1px solid var(--line); }
.plan h3 { margin:0 0 4px; font-size:22px; color:var(--ink); }
.plan .who { font-size:16px; margin:0 0 18px; color:var(--muted); }
.plan .price { font-size:22px; color:var(--ink); }
.plan ul { margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.plan li { font-size:17px; line-height:1.5; padding-left:26px; position:relative; color:var(--body); }
.plan li::before { content:'\2713'; position:absolute; left:0; font-weight:700; color:var(--tick); }
.plan-note { margin:18px 0 0; font-size:15px; color:var(--muted); }
.plan.premium { position:relative; border:1px solid transparent; }
.plan.premium::before { content:''; position:absolute; inset:-1px; border-radius:21px; padding:1.5px; pointer-events:none;
      background:conic-gradient(from 30deg, var(--accent-a), var(--accent-b), var(--accent-c), var(--accent-a));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.panel-fineprint { max-width:46em; margin:22px 0 0; font-size:15px; line-height:1.6; color:var(--muted); }
@media (max-width:1000px){ .pricing { grid-template-columns:1fr; max-width:34em; } }

/* ---------- October-2025 stub look: gradient cards, heavy shadows, underlined section titles ---------- */
.track, .help-card, .plan, .contact-card, .faq details { background:linear-gradient(180deg,var(--surface),var(--panel-2)); box-shadow:var(--shadow); }
.strip.alt { background:transparent; }
.strip h2:not(.faq-group):not(.stage) { position:relative; display:inline-block; padding-bottom:8px; }
.strip h2:not(.faq-group):not(.stage)::after { content:''; position:absolute; left:0; right:-12px; bottom:-2px; height:4px; border-radius:3px; background:var(--grad); }
.help-card h2::after, .contact-card h2::after { display:none; }
.stats strong { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow { color:var(--accent-c); }
@media (max-width:420px){ .brand .by { display:none; } .nav { gap:12px; } }

/* ---------- BridgeGuru logo ---------- */
.brand .logo { width:36px; height:36px; flex:none; }
.hero-logo { display:block; width:60px; height:60px; margin:0 0 12px -4px; filter:drop-shadow(0 10px 24px rgba(79,70,229,.25)); }
.product-head { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.product-head img { width:52px; height:52px; flex:none; filter:drop-shadow(0 10px 24px rgba(79,70,229,.25)); }
.product-head h2 { margin:0; }
@media (max-width:680px){ .hero-logo { width:52px; height:52px; } }

/* ---------- BridgeGuru wordmark: Space Grotesk, as in the app's Welcome screen
   (hero_section.dart: "BridgeGuru" weight 300, "by PlyLogic" weight 400). SIL OFL — see assets/fonts. */
.wordmark { font-family:'Space Grotesk',system-ui,sans-serif; font-weight:300; letter-spacing:0; }
.brand .wordmark { font-size:24px; color:var(--ink); }
.brand .by { font-family:'Space Grotesk',system-ui,sans-serif; font-weight:400; }
h2.wordmark { font-weight:300; }
.lockup { display:flex; align-items:center; gap:14px; margin:0 0 18px; }
.lockup .hero-logo { margin:0; }
.lockup-text { display:flex; flex-direction:column; line-height:1.05; }
.lockup .wordmark { font-size:40px; color:var(--ink); }
.lockup-by { font-family:'Space Grotesk',system-ui,sans-serif; font-weight:400; font-size:16px; color:var(--muted); margin-top:4px; }
@media (max-width:680px){ .lockup .wordmark { font-size:34px; } }

/* ---------- October-2025 stub washes, as the stub draws them: on the body, pinned to the viewport,
   so the violet (top-left) and cyan (top-right) glow shows on every screen, not only at the top. ---------- */
body { background:
    radial-gradient(1100px 650px at 12% -10%, rgba(123,58,237,.25), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(39,211,238,.22), transparent 65%),
    var(--bg);
  background-attachment:fixed; }
.page { background:none; }
.site-header { background:rgba(245,247,251,.55); }

/* ---------- Design-review fixes (2026-09-28) ---------- */
/* Smaller phone screenshots beside short text (review #2). */
.split .phone { max-width:280px; }
.hero .phone { max-width:320px; }
@media (max-width:680px){ .split .phone { max-width:230px; } .hero .phone { max-width:260px; } .split { gap:28px; } }
/* A Play button stays in the header on phones (review #4); the menu shrinks to its icon. */
.nav-cta { display:none; }
@media (max-width:860px){
  .nav-cta { display:inline-flex; align-items:center; min-height:44px; padding:8px 18px; font-size:15px; margin-left:auto; }
  .menu summary { font-size:0; gap:0; padding:0; width:44px; height:44px; justify-content:center; }
}
@media (max-width:420px){ .brand .wordmark { font-size:21px; } .nav-cta { padding:8px 14px; } }
/* Tap targets (review #15). */
.nav-links .btn { min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:860px){ .footer-col a { display:inline-block; padding:10px 0; } .footer-col ul { gap:0; } }
.footer-h { font-size:14px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink); margin:4px 0 4px; }
/* Company home: a short page with one product card (review #5). */
.company-hero { padding-bottom:24px; }
.product-card { display:flex; gap:22px; align-items:center; max-width:46em; padding:26px 28px; border-radius:20px; text-decoration:none;
  background:linear-gradient(180deg,var(--surface),var(--panel-2)); border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease; }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--ring); }
.product-card img { width:72px; height:72px; flex:none; }
.product-text { display:flex; flex-direction:column; gap:6px; }
.product-name { font-size:30px; color:var(--ink); line-height:1.1; }
.product-line { font-size:17px; color:var(--body); line-height:1.55; }
.product-card .more { margin-top:4px; }
@media (max-width:520px){ .product-card { flex-direction:column; align-items:flex-start; } }
@media (max-width:380px){ .site-header .brand .wordmark, .site-header .brand .brand-name { display:none; } }

/* ---------- PlyLogic brand package (2026-09-28): logo, monogram and "by PlyLogic" signature as outlined SVG ---------- */
.pl-logo { display:block; height:38px; width:auto; }
.site-footer .pl-logo { height:34px; }
.pl-by { display:block; height:22px; width:auto; }
.lockup-by .pl-by { height:32px; margin-top:6px; }
.brand .by { display:inline-flex; align-items:center; margin-left:4px; }
@media (max-width:380px){ .site-header .pl-logo { height:32px; } }
/* The signature's "by" is small in the artwork; keep the signature near the package's upper size. */
.pl-by { height:26px; }
.lockup-by .pl-by { height:40px; }

/* ===== PlyLogic brand-package colours (owner choice B, 2026-09-28) (navy #10203B, cobalt #2459EF, cyan #00AFE8) ===== */
:root {
  --ink:#10203B; --accent-a:#2459EF; --accent-b:#1f6fe8; --accent-c:#0a8fc4;
  --eyebrow:#2459EF; --tick:#2459EF; --link:#2459EF; --btn-bg:#2459EF;
  --grad:linear-gradient(135deg,#10203B,#2459EF);
  --ring:0 0 0 1px var(--line), 0 20px 60px rgba(0,175,232,.22);
}
body { background:
    radial-gradient(1100px 650px at 12% -10%, rgba(36,89,239,.20), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(0,175,232,.24), transparent 65%),
    var(--bg); background-attachment:fixed; }
.eyebrow { color:#2459EF; }
.btn.primary { box-shadow:0 10px 30px rgba(36,89,239,.28); }
h1 em, h2 em { background-image:linear-gradient(100deg,#2459EF 10%,#0a8fc4 90%); }
.strip h2:not(.faq-group):not(.stage)::after { background:linear-gradient(90deg,#2459EF,#00AFE8); }
.nav-links a:not(.btn)::after { background:linear-gradient(90deg,#2459EF,#00AFE8); }
.contact-card::before, .phone::before { background:conic-gradient(from 30deg,#10203B,#2459EF,#00AFE8,#10203B); }
/* The refined spade emblem (with its orbit) reads smaller than the bare guru did at the same box size. */
.brand .logo { width:40px; height:40px; }

/* ---------- BridgeGuru name + guru figure (owner, 2026-09-28): the guru, not the spade emblem, sits beside the name;
   in the headline lockup it is exactly as tall as the two lines "BridgeGuru" + "by PlyLogic". ---------- */
.brand { gap:8px; }
.brand .logo { height:30px; width:auto; }
.lockup { align-items:center; gap:16px; }
.lockup .hero-logo { width:auto; height:var(--lockup-h,88px); margin:0; filter:none; }
.product-card img { width:auto; height:72px; }
.footer-inner p.footer-note { margin-top:10px; }
/* Guru height = measured height of the two-line name block ("BridgeGuru" 40px/34px + "by PlyLogic" signature). */
.lockup { --lockup-h:92px; }
@media (max-width:680px){ .lockup { --lockup-h:86px; } }

/* ---------- "by PlyLogic": a real text "by" (Space Grotesk 400, as the app's byline) + the PlyLogic logo,
   replacing the signature artwork whose built-in "by" was too small to read. ---------- */
.by-word { font-family:'Space Grotesk',system-ui,sans-serif; font-weight:400; color:var(--muted); }
.brand .by { gap:6px; }
.brand .by .by-word { font-size:15px; }
.brand .by .pl-sig { height:22px; width:auto; display:block; }
.lockup-by { display:flex; align-items:center; gap:8px; margin-top:6px; }
.lockup-by .by-word { font-size:20px; }
.lockup-by .pl-sig { height:34px; width:auto; display:block; }
@media (max-width:680px){ .lockup-by .by-word { font-size:18px; } .lockup-by .pl-sig { height:30px; } }
/* Logo height re-matched to the two-line name block after the "by" change (measured: 82px desktop, 72px phone). */
.lockup { --lockup-h:82px; }
@media (max-width:680px){ .lockup { --lockup-h:72px; } }

/* ---------- Navigation: three tabs, always visible — no hamburger menu (2026-09-28).
   Wide screens: tabs sit at the right of the header. Phones: they drop to a full-width row under the brand. ---------- */
.tabs { display:flex; align-items:stretch; gap:4px; }
.tabs a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 14px;
  font-weight:700; font-size:16px; color:var(--body); text-decoration:none; border-bottom:3px solid transparent; }
.tabs a:hover { color:var(--ink); border-bottom-color:rgba(36,89,239,.35); }
.tabs a[aria-current=page] { color:var(--ink); border-bottom-color:#2459EF; }
@media (max-width:680px){
  .site-header .nav { flex-wrap:wrap; row-gap:4px; padding-bottom:0; }
  .tabs { flex:1 0 100%; gap:0; border-top:1px solid var(--line); margin:0 -16px; padding:0 8px; }
  .tabs a { flex:1; padding:0 6px; font-size:16px; }
}
@media (max-width:380px){ .site-header .brand .wordmark { display:inline; } }
@media (max-width:420px){ .site-header .brand .by { display:inline-flex; } .site-header .brand .wordmark { font-size:21px; } }

/* ---------- Founder's note on the PlyLogic home ---------- */
.founder-note { margin:0; max-width:46em; padding:4px 0 4px 24px; border-left:4px solid #2459EF; }
.founder-note blockquote { margin:0; }
.founder-note p { margin:0; font-size:20px; line-height:1.6; color:var(--ink); }
.founder-note figcaption { margin-top:12px; font-size:16px; color:var(--muted); }
@media (max-width:680px){ .founder-note p { font-size:18px; } }
.founder-note p + p { margin-top:12px; }
.founder-note .founder-cta { margin:20px 0 0; font-size:inherit; }
.founder-note .founder-cta .btn { font-size:17px; }
.founder-note .founder-cta .more { margin-top:0; font-size:18px; }

/* ---------- Product card: logo + "BridgeGuru" on one line, then the description and the link (all widths). ---------- */
.product-card { flex-direction:column; align-items:flex-start; gap:10px; }
.product-card .product-head { display:flex; align-items:center; gap:12px; margin:0; }
.product-card .product-head img { width:auto; height:52px; flex:none; filter:none; }
.product-card .product-name { font-size:34px; line-height:1; }
@media (max-width:520px){ .product-card { flex-direction:column; align-items:flex-start; } .product-card .product-head img { height:46px; } .product-card .product-name { font-size:30px; } }

/* ---------- Product card lockup: smaller emblem, name tucked in over the orbit's right tail. ---------- */
.product-card .product-head { gap:4px; }
.product-card .product-head img { height:44px; margin-right:-6px; }
@media (max-width:520px){ .product-card .product-head img { height:40px; } }
/* No-orbit mark in front of "BridgeGuru" (card + headline lockup): no orbit tail to overlap, so a plain small gap. */
.product-card .product-head { gap:10px; }
.product-card .product-head img { margin-right:0; }
.lockup { gap:12px; }

/* ---------- No-orbit mark: 10% smaller, and the name tucked in over the spade's tapering right side
   (the spade is narrow at the top, so the text can start inside its bounding box). ---------- */
.site-header .brand .logo { height:27px; margin-right:-3px; }
.lockup { --lockup-h:74px; gap:0; }
.lockup .hero-logo { margin-right:4px; }
@media (max-width:680px){ .lockup { --lockup-h:65px; } }
.product-card .product-head { gap:0; }
.product-card .product-head img { height:40px; margin-right:4px; }
@media (max-width:520px){ .product-card .product-head img { height:36px; } }
.site-header .brand .logo { margin-right:-9px; }
.lockup .hero-logo { margin-right:-3px; }
.product-card .product-head img { margin-right:-2px; }
/* 1px of air where the name meets the spade's widest point (header and card, where the name is vertically centred). */
.site-header .brand .logo { margin-right:-7px; }
.product-card .product-head img { margin-right:1px; }

/* ---------- Owner round 2026-09-28: headline lockup back to the orbit emblem; all logos 20% below their
   earlier sizes (header 30→24, headline 82→66 / 72→58, card 44→35 / 40→32); name 4px further left in the
   one-line lockups (header, card). ---------- */
.lockup { --lockup-h:66px; gap:14px; }
.lockup .hero-logo { margin-right:0; }
@media (max-width:680px){ .lockup { --lockup-h:58px; } }
.site-header .brand .logo { height:24px; margin-right:-11px; }
.product-card .product-head img { height:35px; margin-right:-3px; }
@media (max-width:520px){ .product-card .product-head img { height:32px; } }
/* Correction: the name moves 4px to the RIGHT of its previous spot (header -7px → -3px, card 1px → 5px). */
.site-header .brand .logo { margin-right:-3px; }
.product-card .product-head img { margin-right:5px; }
/* Header mark down again (owner, 2026-09-28): 24px → 19px, about the height of the wordmark's capitals + descender. */
.site-header .brand .logo { height:19px; margin-right:-1px; }
.site-header .brand .logo { margin-right:-3px; }
.site-header .brand .logo { height:22px; margin-right:-5px; }
/* Headline emblem = visible height of the two text lines (top of "B" to bottom of "by PlyLogic").
   Measured ink: 72.6px desktop; the emblem's artwork fills 95.2% of its box, so box = 76px. */
.lockup { --lockup-h:76px; }
@media (max-width:680px){ .lockup { --lockup-h:66px; } } /* phone: measured text ink 63.0px / 0.952 */

/* ---------- BridgeGuru lockup (2026-09-28): the app's single image — emblem + "BridgeGuru" + "by PlyLogic" —
   replaces the hand-built logo + wordmark + signature everywhere. On-light artwork; margins trimmed. ---------- */
.bg-lockup { display:block; width:auto; max-width:100%; }
.bg-lockup-header { height:46px; }
.bg-lockup-hero { height:92px; }
.lockup-img { margin:0 0 18px; }
.bg-lockup-card { height:60px; }
@media (max-width:680px){ .bg-lockup-hero { height:78px; } .bg-lockup-card { height:52px; } }
@media (max-width:380px){ .bg-lockup-header { height:40px; } }
.product-card .product-head img.bg-lockup-card { height:60px; margin-right:0; }
@media (max-width:680px){ .product-card .product-head img.bg-lockup-card { height:52px; } }

/* One BridgeGuru lockup per page (owner, 2026-09-28): the header carries the brand; the hero starts with the headline.
   Header lockup up from 46px so "by PlyLogic" reads. */
.bg-lockup-header { height:54px; }
@media (max-width:680px){ .bg-lockup-header { height:48px; } }
@media (max-width:380px){ .bg-lockup-header { height:44px; } }