/* StudyRoster marketing site — bespoke flagship (WB18). Product-forward, indigo identity.
   Built HERE in web-agency; identity: indigo-600 (from the app), aurora gradient system.
   No customer-facing em-dashes (house rule). */

:root {
  --indigo-50:#eef2ff; --indigo-100:#e0e7ff; --indigo-200:#c7d2fe; --indigo-300:#a5b4fc;
  --indigo-400:#818cf8; --indigo-500:#6366f1; --indigo-600:#4f46e5; --indigo-700:#4338ca; --indigo-900:#312e81;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151;
  --gray-900:#111827;
  --amber-400:#fbbf24; --emerald-500:#10b981; --emerald-50:#ecfdf5; --rose-500:#f43f5e;
  --violet-500:#8b5cf6; --violet-600:#7c3aed; --sky-500:#0ea5e9; --sky-400:#38bdf8; --coral:#fb7185;
  --grad-brand:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%); /* signature indigo→violet */
  --grad-vivid:linear-gradient(120deg,#4f46e5 0%,#7c3aed 52%,#0ea5e9 100%); /* indigo→violet→sky */
  --ink:#111827; --muted:#4b5563;
  --shadow-sm:0 1px 2px rgba(17,24,39,.06), 0 1px 3px rgba(17,24,39,.08);
  --shadow-md:0 4px 6px -1px rgba(17,24,39,.08), 0 2px 4px -2px rgba(17,24,39,.06);
  --shadow-lg:0 20px 40px -12px rgba(49,46,129,.22), 0 8px 16px -8px rgba(17,24,39,.10);
  --radius:14px;
  --maxw:1140px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font); color:var(--ink);
  /* DR-14: ONE continuous, multi-hue gradient field across the WHOLE page (never per-section fills).
     Signature "aurora" — indigo + violet + sky + a warm coral bloom, distributed top→bottom so the colour
     shifts as you scroll. Kept light (pastel alphas over a near-white base) so dark text stays fully legible. */
  background:
    radial-gradient(1000px 680px at 6% 1%,  rgba(99,102,241,.22) 0%, transparent 60%),  /* indigo  */
    radial-gradient(900px 640px at 95% 5%,  rgba(56,189,248,.20) 0%, transparent 58%),  /* sky     */
    radial-gradient(1100px 760px at 80% 38%, rgba(139,92,246,.18) 0%, transparent 55%), /* violet  */
    radial-gradient(950px 720px at 8% 66%,  rgba(251,113,133,.14) 0%, transparent 55%), /* coral   */
    radial-gradient(1000px 760px at 92% 92%, rgba(99,102,241,.20) 0%, transparent 55%), /* indigo  */
    linear-gradient(180deg, #fbfcff 0%, #f7f7ff 45%, #fbf8ff 100%);
  background-repeat:no-repeat; background-color:#fafbff;
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3 { line-height:1.12; letter-spacing:-.022em; color:var(--gray-900); margin:0; font-weight:800; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--indigo-600); }
.grad-text { background:var(--grad-vivid); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--violet-600); }
/* hero category badge — states the product category ("for tutors") up front and prominently */
.cat-badge { display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:700;
  color:var(--indigo-700); background:rgba(255,255,255,.72); border:1px solid var(--indigo-100);
  padding:.42rem .85rem .42rem .7rem; border-radius:999px; box-shadow:var(--shadow-sm);
  margin-bottom:1.15rem; }
.cat-badge .ic { width:18px; height:18px; color:var(--indigo-600); flex:none; }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:1rem;
  padding:.72rem 1.25rem; border-radius:10px; cursor:pointer; border:1px solid transparent;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap; }
.btn-primary { background:var(--grad-brand); color:#fff; box-shadow:0 6px 18px -6px rgba(124,58,237,.55), 0 1px 2px rgba(49,46,129,.4); }
.btn-primary:hover { filter:brightness(1.07) saturate(1.05); transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(124,58,237,.6); }
.btn-ghost { background:#fff; color:var(--gray-700); border-color:var(--gray-200); }
.btn-ghost:hover { background:var(--gray-50); border-color:var(--gray-300); }
.btn-lg { padding:.9rem 1.6rem; font-size:1.06rem; }

/* ---- header ---- */
header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--gray-100); }
.nav { display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand { display:flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.28rem;
  letter-spacing:-.03em; color:var(--gray-900); }
.brand .logo { width:30px; height:30px; border-radius:8px;
  background:var(--grad-vivid); display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:.82rem; letter-spacing:-.03em; box-shadow:0 3px 8px -2px rgba(124,58,237,.5); }
.brand .brand-tag { font-size:.7rem; font-weight:700; letter-spacing:.01em; color:var(--indigo-700);
  background:var(--indigo-50); border:1px solid var(--indigo-100); padding:.16rem .5rem; border-radius:999px;
  align-self:center; }
@media (max-width:560px){ .brand .brand-tag { display:none; } }
.nav-links { display:flex; align-items:center; gap:1.6rem; }
.nav-links a.navlink { color:var(--gray-600); font-weight:500; font-size:.96rem; }
.nav-links a.navlink:hover { color:var(--gray-900); }
.nav-cta { display:flex; align-items:center; gap:.85rem; }
.nav-cta .navlink { font-weight:600; }
@media (max-width:820px){ .nav-links .navlink, .nav-cta .signin { display:none; } }

/* ---- hero ---- */
.hero { position:relative; overflow:hidden; background:transparent; } /* body gradient shows through (DR-14) */
.hero-grid { display:grid; grid-template-columns:1.02fr 1.18fr; gap:56px; align-items:center;
  padding:74px 0 84px; }
.hero h1 { font-size:clamp(2.3rem,4.6vw,3.5rem); }
.hero .sub { font-size:1.18rem; color:var(--muted); margin:1.25rem 0 1.9rem; max-width:34ch; }
.hero .cta-row { display:flex; gap:.85rem; flex-wrap:wrap; }
.hero .trust { margin-top:1.15rem; font-size:.9rem; color:var(--gray-500); display:flex; align-items:center; gap:.5rem; }
.hero .trust svg { color:var(--emerald-500); flex:none; }
@media (max-width:920px){ .hero-grid { grid-template-columns:1fr; gap:40px; padding:50px 0 60px; }
  .hero .sub { max-width:none; } }

/* ---- interactive calendar widget (the signature capability) ---- */
.cal { background:#fff; border:1px solid var(--gray-200); border-radius:18px;
  box-shadow:var(--shadow-lg), 0 36px 90px -34px rgba(124,58,237,.45), 0 0 0 1px rgba(99,102,241,.06);
  overflow:hidden; transform:perspective(1600px) rotateY(-3deg) rotateX(1.5deg); transform-origin:left center; }
@media (max-width:920px){ .cal { transform:none; } }
.cal-top { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.1rem;
  background:var(--gray-50); border-bottom:1px solid var(--gray-100); }
.cal-top .dots { display:flex; gap:6px; }
.cal-top .dots i { width:11px; height:11px; border-radius:50%; background:var(--gray-300); display:block; }
.cal-top .title { font-size:.85rem; font-weight:600; color:var(--gray-500); }
.cal-top .pill { font-size:.74rem; font-weight:700; color:var(--indigo-700); background:var(--indigo-50);
  padding:.18rem .55rem; border-radius:999px; }
.cal-week { display:grid; grid-template-columns:46px repeat(5,1fr); }
.cal-week .hcell { padding:.5rem .2rem; text-align:center; font-size:.72rem; font-weight:700; color:var(--gray-500);
  border-bottom:1px solid var(--gray-100); }
.cal-week .hcell small { display:block; font-size:.66rem; font-weight:600; color:var(--gray-400); }
.cal-body { display:grid; grid-template-columns:46px repeat(5,1fr); position:relative; }
.cal-body .timecol { display:grid; }
.cal-body .timecol .t { height:54px; font-size:.66rem; color:var(--gray-400); text-align:right;
  padding:.15rem .4rem 0 0; border-top:1px solid var(--gray-100); }
.cal-day { border-left:1px solid var(--gray-100); display:grid; grid-auto-rows:54px; }
.cal-day .slot { border-top:1px solid var(--gray-100); }
.session { position:absolute; left:2px; right:2px; border-radius:8px; padding:.3rem .45rem; cursor:pointer;
  font-size:.7rem; line-height:1.18; overflow:hidden; border:1px solid; transition:transform .12s ease, box-shadow .2s ease;
  box-shadow:var(--shadow-sm); }
.session:hover { transform:translateY(-1px) scale(1.015); box-shadow:var(--shadow-md); z-index:5; }
.session .who { font-weight:700; }
.session .meta { opacity:.85; font-size:.64rem; }
.session.s-indigo { background:var(--indigo-50); border-color:var(--indigo-200); color:var(--indigo-900); }
.session.s-emerald { background:var(--emerald-50); border-color:#a7f3d0; color:#065f46; }
.session.s-amber { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.session.s-rose { background:#fff1f2; border-color:#fecdd3; color:#9f1239; }
.session.is-active { outline:2px solid var(--indigo-500); outline-offset:1px; }
.cal-detail { border-top:1px solid var(--gray-100); padding:.85rem 1.1rem; min-height:74px; background:#fff; }
.cal-detail .empty { color:var(--gray-400); font-size:.85rem; }
.cal-detail .d-who { font-weight:700; font-size:.98rem; color:var(--gray-900); }
.cal-detail .d-row { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:.3rem; font-size:.84rem; color:var(--gray-600); }
.cal-detail .d-row b { color:var(--gray-800); font-weight:600; }
.cal-detail .d-actions { margin-top:.6rem; display:flex; gap:.5rem; }
.chip { font-size:.74rem; font-weight:600; padding:.28rem .6rem; border-radius:8px; border:1px solid var(--gray-200);
  background:#fff; color:var(--gray-700); cursor:pointer; transition:background .15s; }
.chip:hover { background:var(--gray-50); }
.chip.chip-go { background:var(--indigo-600); color:#fff; border-color:var(--indigo-600); }
.chip.chip-go:hover { background:var(--indigo-700); }
.cal-foot { font-size:.72rem; color:var(--gray-400); text-align:center; padding:.55rem; background:var(--gray-50);
  border-top:1px solid var(--gray-100); }

/* ---- juggle strip ---- */
.juggle { padding:34px 0; border-top:1px solid var(--gray-100); border-bottom:1px solid var(--gray-100);
  background:rgba(255,255,255,.45); } /* faint wash, gradient still reads through (DR-14) */
.juggle-row { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; color:var(--gray-500); }
.juggle .old { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.94rem;
  color:var(--gray-500); background:#fff; border:1px solid var(--gray-200); padding:.5rem .85rem; border-radius:10px;
  text-decoration:line-through; text-decoration-color:var(--rose-500); }
.juggle .arrow { color:var(--indigo-400); font-weight:800; font-size:1.2rem; }
.juggle .new { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:var(--indigo-700);
  background:var(--indigo-50); border:1px solid var(--indigo-200); padding:.5rem .9rem; border-radius:10px; }

/* ---- sections ---- */
section.band { padding:84px 0; }
.section-head { max-width:42rem; margin:0 auto 52px; text-align:center; }
.section-head h2 { font-size:clamp(1.9rem,3.4vw,2.5rem); }
.section-head p { color:var(--muted); font-size:1.1rem; margin-top:.9rem; }

/* feature showcase rows */
.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:34px 0; }
.feature-row.rev .f-copy { order:2; }
.feature-row .f-copy h3 { font-size:1.6rem; }
.feature-row .f-copy p { color:var(--muted); margin-top:.7rem; font-size:1.04rem; }
.feature-row .f-copy .badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700;
  color:var(--indigo-700); background:var(--indigo-50); padding:.25rem .65rem; border-radius:999px; margin-bottom:.9rem; }
.feature-row ul.ticks { list-style:none; padding:0; margin:1.1rem 0 0; display:grid; gap:.5rem; }
.feature-row ul.ticks li { display:flex; gap:.55rem; color:var(--gray-700); font-size:.97rem; }
.feature-row ul.ticks svg { color:var(--emerald-500); flex:none; margin-top:.2rem; }
@media (max-width:880px){ .feature-row { grid-template-columns:1fr; gap:28px; }
  .feature-row.rev .f-copy { order:0; } }

/* UI mock cards */
.mock { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  overflow:hidden; }
.mock-top { display:flex; align-items:center; gap:.5rem; padding:.6rem .85rem; background:var(--gray-50);
  border-bottom:1px solid var(--gray-100); font-size:.8rem; color:var(--gray-500); font-weight:600; }
.mock-top .dots { display:flex; gap:5px; } .mock-top .dots i{ width:9px;height:9px;border-radius:50%;background:var(--gray-300); }
.mock-body { padding:1.1rem 1.2rem; }

/* invoice mock */
.inv-head { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--gray-100);
  padding-bottom:.8rem; margin-bottom:.8rem; }
.inv-head .for { font-size:.8rem; color:var(--gray-500); } .inv-head .for b{ color:var(--gray-900); display:block; font-size:.98rem; }
.inv-head .amt { text-align:right; } .inv-head .amt .big{ font-size:1.5rem; font-weight:800; color:var(--gray-900); }
.inv-head .amt .paid{ font-size:.72rem; font-weight:700; color:#065f46; background:var(--emerald-50);
  padding:.15rem .5rem; border-radius:999px; border:1px solid #a7f3d0; }
.inv-line { display:flex; justify-content:space-between; font-size:.86rem; color:var(--gray-600); padding:.32rem 0; }
.inv-line b { color:var(--gray-800); font-weight:600; }

/* reminder mock (phone) */
.phone { max-width:280px; margin:0 auto; background:#fff; border:8px solid #111827; border-radius:34px;
  box-shadow:var(--shadow-lg); padding:1rem .8rem 1.4rem; }
.phone .notch { width:90px; height:6px; background:#111827; border-radius:999px; margin:0 auto .9rem; }
.msg { background:var(--indigo-50); border:1px solid var(--indigo-100); border-radius:14px; padding:.7rem .8rem;
  font-size:.82rem; color:var(--gray-700); } .msg .from{ font-weight:700; color:var(--indigo-700); font-size:.74rem; margin-bottom:.25rem; }
.msg + .msg { margin-top:.5rem; }

/* report mock bars */
.bars { display:grid; gap:.55rem; }
.bar-row { display:grid; grid-template-columns:74px 1fr 52px; align-items:center; gap:.6rem; font-size:.8rem; color:var(--gray-600); }
.bar-track { height:14px; background:var(--gray-100); border-radius:999px; overflow:hidden; }
.bar-fill { display:block; height:100%; min-width:14px; border-radius:999px; background:linear-gradient(90deg,var(--indigo-400),var(--indigo-600)); }

/* ---- insights dashboard ---- */
.dash { display:grid; gap:14px; }
.dash-row { display:grid; gap:14px; }
.dash-row.r3 { grid-template-columns:repeat(3,1fr); }
.dash-row.r2 { grid-template-columns:1fr 1fr; }
.tile { background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:1rem 1.1rem; box-shadow:var(--shadow-sm); }
.tile .tlabel { font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-500); }
.tile .tval { font-size:1.7rem; font-weight:800; color:var(--gray-900); margin-top:.25rem; letter-spacing:-.02em; }
.tile .tdelta { font-size:.8rem; font-weight:700; display:inline-flex; align-items:center; gap:.15rem; }
.tdelta.up { color:#059669; } .tdelta.down { color:#dc2626; }
.tile .tsub { font-size:.76rem; color:var(--gray-500); margin-top:.25rem; }
.ar-grid { display:grid; grid-template-columns:1fr auto; gap:.42rem .9rem; margin-top:.55rem; }
.ar-grid .k { font-size:.82rem; color:var(--gray-600); } .ar-grid .v { font-weight:700; color:var(--gray-900); text-align:right; font-size:.86rem; }
.attend-bar { display:flex; height:16px; border-radius:999px; overflow:hidden; margin:.6rem 0 .5rem; background:var(--gray-100); }
.attend-bar i { display:block; height:100%; }
.attend-bar .done { background:var(--grad-brand); } .attend-bar .ns { background:var(--amber-400); } .attend-bar .can { background:var(--gray-300); }
.attend-legend { display:flex; gap:.9rem; font-size:.74rem; color:var(--gray-600); flex-wrap:wrap; }
.attend-legend span { display:inline-flex; align-items:center; gap:.3rem; } .attend-legend i { width:9px; height:9px; border-radius:50%; display:block; }
.note-card { font-size:.85rem; color:var(--gray-700); }
.note-card .nhead { font-weight:700; color:var(--gray-900); margin-bottom:.35rem; }
.note-card .nfoot { font-size:.74rem; color:var(--gray-500); border-top:1px solid var(--gray-100); padding-top:.5rem; margin-top:.5rem; }
.privacy-note { display:flex; gap:.65rem; align-items:flex-start; margin:1.5rem auto 0; max-width:820px; padding:1rem 1.2rem;
  border-radius:14px; background:rgba(255,255,255,.62); border:1px solid var(--indigo-100); font-size:.95rem; color:var(--gray-700); }
.privacy-note svg { color:var(--indigo-600); flex:none; margin-top:.1rem; }
.privacy-note b { color:var(--gray-900); }
@media (max-width:760px){ .dash-row.r3, .dash-row.r2 { grid-template-columns:1fr; } }

/* ---- gap / comparison ---- */
.gap-band { background:linear-gradient(135deg,#1e1b4b 0%,#312e81 46%,#4c1d95 100%); color:#fff; } /* deep indigo→violet, on-brand (not flat black) */
.gap-band .section-head h2 { color:#fff; } .gap-band .section-head p { color:var(--gray-300); }
.cmp { width:100%; border-collapse:separate; border-spacing:0; max-width:760px; margin:0 auto;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden; }
.cmp th, .cmp td { padding:1rem 1.1rem; text-align:left; font-size:.95rem; border-bottom:1px solid rgba(255,255,255,.08); }
.cmp thead th { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-400); font-weight:700; }
.cmp .us { background:rgba(99,102,241,.16); color:#fff; font-weight:600; }
.cmp tbody tr:last-child td { border-bottom:none; }
.cmp .feat { color:var(--gray-300); }
.cmp .yes { color:#6ee7b7; font-weight:700; } .cmp .no { color:var(--gray-400); }
.cmp thead .us { color:#c7d2fe; }
@media (max-width:620px){ .cmp th,.cmp td{ padding:.7rem .6rem; font-size:.84rem; } }

/* ---- pricing ---- */
.bill-toggle { display:flex; width:max-content; gap:.25rem; margin:0 auto 2rem; padding:.3rem; border:1px solid var(--gray-200);
  background:#fff; border-radius:999px; box-shadow:var(--shadow-sm); }
.bill-toggle .bt { border:0; background:transparent; cursor:pointer; font:inherit; font-weight:600; font-size:.92rem;
  color:var(--gray-600); padding:.5rem 1.1rem; border-radius:999px; display:inline-flex; align-items:center; gap:.5rem;
  transition:background .15s,color .15s; }
.bill-toggle .bt.is-active { background:var(--indigo-600); color:#fff; }
.bill-toggle .bt:focus-visible { outline:2px solid var(--indigo-600); outline-offset:2px; }
.bill-toggle .save-badge { font-size:.72rem; font-weight:700; padding:.1rem .45rem; border-radius:999px;
  background:#dcfce7; color:#15803d; }
.bill-toggle .bt.is-active .save-badge { background:rgba(255,255,255,.22); color:#fff; }
/* monthly/annual price swap (JS toggles .annual on the grid) */
.price-card .price-annual { display:none; }
.price-grid.annual .price-card .price-monthly { display:none; }
.price-grid.annual .price-card .price-annual { display:inline; }
.price-card .psub { font-size:.82rem; color:var(--gray-500); font-weight:600; margin-top:-.1rem; min-height:1.1em; }
.price-card .psub.price-annual { color:#15803d; }
.price-grid.annual .price-card .psub.price-annual { display:block; }
.price-foot { text-align:center; color:var(--gray-500); font-size:.92rem; margin-top:1.6rem; }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; max-width:1000px; margin:0 auto; }
.price-card { background:#fff; border:1px solid var(--gray-200); border-radius:18px; padding:2rem 1.6rem;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm); }
.price-card.rec { border-color:var(--indigo-300); box-shadow:var(--shadow-lg); position:relative; }
.price-card.rec .rec-tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--indigo-600); color:#fff; font-size:.72rem; font-weight:700; padding:.28rem .8rem; border-radius:999px;
  letter-spacing:.03em; box-shadow:var(--shadow-sm); }
.price-card .pname { font-weight:700; font-size:1.15rem; color:var(--gray-900); }
.price-card .pbest { font-size:.86rem; color:var(--gray-500); margin-top:.2rem; }
.price-card .pamt { margin:1.1rem 0 .2rem; } .price-card .pamt .n{ font-size:2.6rem; font-weight:800; color:var(--gray-900); letter-spacing:-.03em; }
.price-card .pamt .per{ color:var(--gray-500); font-weight:500; }
.price-card ul { list-style:none; padding:0; margin:1.3rem 0; display:grid; gap:.65rem; }
.price-card li { display:flex; gap:.55rem; font-size:.95rem; color:var(--gray-700); }
.price-card li svg { color:var(--indigo-600); flex:none; margin-top:.15rem; }
.price-card .btn { width:100%; justify-content:center; margin-top:auto; }
@media (max-width:820px){ .price-grid { grid-template-columns:1fr; max-width:420px; } }

/* ---- FAQ ---- */
.faq { max-width:760px; margin:0 auto; }
.faq details { border-bottom:1px solid var(--gray-200); padding:1.1rem 0; }
.faq summary { font-weight:600; font-size:1.06rem; color:var(--gray-900); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .ico { color:var(--indigo-600); font-size:1.4rem; line-height:1; transition:transform .2s; flex:none; }
.faq details[open] summary .ico { transform:rotate(45deg); }
.faq details p { color:var(--muted); margin-top:.7rem; font-size:1rem; }

/* ---- final CTA ---- */
.cta-band { background:var(--grad-vivid); color:#fff; text-align:center;
  border-radius:24px; padding:64px 28px; box-shadow:var(--shadow-lg), 0 30px 70px -28px rgba(124,58,237,.55); }
.cta-band h2 { color:#fff; font-size:clamp(1.8rem,3.2vw,2.4rem); }
.cta-band p { color:var(--indigo-100); margin:1rem auto 1.9rem; max-width:34rem; font-size:1.1rem; }
.cta-band .btn-primary { background:#fff; color:var(--indigo-700); }
.cta-band .btn-primary:hover { background:var(--indigo-50); }
.cta-band .mini { margin-top:1rem; color:var(--indigo-200); font-size:.86rem; }

/* ---- footer ---- */
footer { border-top:1px solid var(--gray-100); padding:54px 0 40px; color:var(--gray-500); font-size:.92rem; }
.foot-grid { display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.foot-grid .col h3 { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-400);
  margin:0 0 .8rem; font-weight:700; }
.skip { position:absolute; left:-9999px; top:0; z-index:200; background:var(--indigo-600); color:#fff;
  padding:.6rem 1rem; border-radius:0 0 8px 0; font-weight:600; }
.skip:focus { left:0; }
.foot-grid .col a { display:block; color:var(--gray-600); padding:.2rem 0; }
.foot-grid .col a:hover { color:var(--indigo-600); }
.foot-bottom { margin-top:40px; padding-top:24px; border-top:1px solid var(--gray-100);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }

/* ---- get set up in 3 steps ---- */
.steps3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
.step { background:#fff; border:1px solid var(--gray-200); border-radius:16px; padding:1.7rem 1.5rem;
  box-shadow:var(--shadow-sm); }
.step .num { width:40px; height:40px; border-radius:11px; background:var(--grad-brand); color:#fff;
  font-weight:800; font-size:1.15rem; display:grid; place-items:center; margin-bottom:1.05rem;
  box-shadow:0 6px 14px -3px rgba(124,58,237,.5); }
.step h3 { font-size:1.18rem; }
.step p { color:var(--muted); margin-top:.5rem; font-size:.98rem; }
.steps-foot { text-align:center; margin-top:34px; color:var(--gray-600); font-size:1.02rem; }
.steps-foot b { color:var(--indigo-700); }
@media (max-width:760px){ .steps3 { grid-template-columns:1fr; } }

/* ---- focus visibility (a11y) ---- */
a:focus-visible, .btn:focus-visible, .chip:focus-visible, summary:focus-visible,
.session:focus-visible, button:focus-visible {
  outline:3px solid var(--indigo-500); outline-offset:2px; border-radius:8px;
}

/* ---- mobile calendar: keep it legible, no overflow ---- */
@media (max-width:920px){
  .cal-week, .cal-body { grid-template-columns:34px repeat(5,1fr); }
  .cal-body .timecol .t { font-size:.56rem; padding-right:.25rem; }
  .session { font-size:.62rem; padding:.25rem .3rem; }
  .session .meta { font-size:.56rem; }
  .cal-detail .d-row { gap:.3rem .7rem; }
  .feature-row .f-art .cal-week, .feature-row .f-art .cal-body { grid-template-columns:30px repeat(5,1fr); }
}

/* reveal-on-scroll (degrades to visible) */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .65s cubic-bezier(.2,.8,.25,1); }
.reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1!important; transform:none!important; transition:none!important; } html{ scroll-behavior:auto; } }

/* ---- doc / legal subpages (privacy, terms, about, contact) ---- */
.doc { max-width:760px; margin:0 auto; padding:48px 0 24px; }
.doc .doc-head { margin-bottom:1.6rem; }
.doc h1 { font-size:2.1rem; font-weight:800; letter-spacing:-.02em; color:var(--gray-900); margin-bottom:.4rem; }
.doc .eff { color:var(--gray-500); font-size:.92rem; }
.doc .draft-note { background:#fffbeb; border:1px solid #fde68a; border-left:4px solid #f59e0b; color:#92400e;
  padding:.9rem 1.1rem; border-radius:12px; margin-bottom:1.8rem; font-size:.92rem; }
.doc section { margin-bottom:1.6rem; }
.doc h2 { font-size:1.2rem; font-weight:700; color:var(--gray-900); margin:0 0 .5rem; }
.doc p { color:var(--gray-700); line-height:1.7; margin:0 0 .6rem; }
.doc ul { color:var(--gray-700); line-height:1.7; padding-left:1.3rem; margin:0 0 .6rem; display:grid; gap:.3rem; }
.doc a.inline { color:var(--indigo-600); font-weight:600; }
.doc .operated { color:var(--gray-500); font-size:.9rem; margin-top:2rem; border-top:1px solid var(--gray-200); padding-top:1rem; }
.contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:1.2rem 0; }
.contact-card { background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:1.2rem 1.3rem; box-shadow:var(--shadow-sm); }
.contact-card h3 { font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--indigo-700); margin:0 0 .35rem; }
.contact-card a { color:var(--indigo-600); font-weight:600; }
@media (max-width:560px){ .contact-grid { grid-template-columns:1fr; } }

/* ---- real app screenshots (browser-chrome framed) ---- */
.shot { margin:0 auto; background:#fff; border:1px solid var(--gray-200); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-lg); max-width:980px; }
.shot-bar { display:flex; align-items:center; gap:.7rem; padding:.55rem .85rem; background:var(--gray-50);
  border-bottom:1px solid var(--gray-100); }
.shot-bar .dots { display:flex; gap:6px; flex:none; }
.shot-bar .dots i { width:11px; height:11px; border-radius:50%; background:var(--gray-300); display:block; }
.shot-bar .url { font-size:.76rem; color:var(--gray-500); background:#fff; border:1px solid var(--gray-200);
  border-radius:999px; padding:.16rem .7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shot-img { display:block; width:100%; height:auto; }
.shot figcaption { font-size:.86rem; color:var(--gray-500); text-align:center; padding:.7rem .9rem; }
/* the clickable region (opens the full-size lightbox) — real button so it is keyboard + screen-reader accessible */
.shot-open { display:block; width:100%; padding:0; margin:0; border:0; background:none; cursor:zoom-in;
  font:inherit; color:inherit; text-align:left; }
.shot-open:focus-visible { outline:3px solid var(--indigo-400); outline-offset:3px; }
.zoom-badge { margin-left:auto; display:inline-flex; align-items:center; gap:.28rem; flex:none;
  font-size:.72rem; font-weight:700; color:var(--indigo-700); background:var(--indigo-50);
  border:1px solid var(--indigo-100); border-radius:999px; padding:.14rem .5rem .14rem .42rem;
  transition:background .15s ease, color .15s ease; }
.zoom-badge .ic { width:13px; height:13px; stroke-width:2; }
.shot-open:hover .zoom-badge, .shot-open:focus-visible .zoom-badge { background:var(--indigo-600); color:#fff; border-color:var(--indigo-600); }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.gallery .shot { max-width:none; transition:transform .18s ease, box-shadow .2s ease; }
.gallery .shot:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg), 0 24px 48px -20px rgba(49,46,129,.35); }
.gallery .shot figcaption { font-weight:600; color:var(--gray-700); }
.gallery-hint { text-align:center; color:var(--gray-500); font-size:.88rem; margin-top:1rem; }
@media (max-width:860px){ .gallery { grid-template-columns:1fr; max-width:560px; margin:0 auto; } }

/* ---- lightbox (full-size screenshot viewer) ---- */
.lightbox { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,40px); background:rgba(17,24,39,.80); backdrop-filter:blur(5px); }
.lightbox[hidden] { display:none; }
.lb-figure { margin:0; max-width:min(1180px,96vw); display:flex; flex-direction:column; gap:.7rem; }
.lb-figure img { width:100%; height:auto; max-height:82vh; object-fit:contain; border-radius:12px; background:#fff;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.65); }
.lb-figure figcaption { color:#e5e7eb; font-size:.92rem; line-height:1.5; text-align:center; max-width:70ch; margin:0 auto; }
.lb-close { position:absolute; top:18px; right:22px; width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.12); color:#fff; font-size:1.7rem; line-height:1;
  display:grid; place-items:center; transition:background .15s ease; }
.lb-close:hover { background:rgba(255,255,255,.24); }
.lb-close:focus-visible { outline:3px solid #fff; outline-offset:2px; }

/* ---- custom icon system (secondary visual layer) ---- */
.ic { width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:-0.18em; flex:none; }
.feature-row .f-copy .badge .ic { width:15px; height:15px; stroke-width:1.9; }
/* "Everything included" chip grid */
.feat-chips { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feat-chip { display:flex; align-items:flex-start; gap:.85rem; background:#fff; border:1px solid var(--gray-100);
  border-radius:14px; padding:1rem 1.05rem; box-shadow:var(--shadow-sm);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease; }
.feat-chip:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--indigo-100); }
.feat-chip .ci { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--indigo-50); color:var(--indigo-600); }
.feat-chip .ci .ic { width:22px; height:22px; }
.feat-chip b { display:block; color:var(--gray-900); font-size:.98rem; font-weight:700; letter-spacing:-.01em; }
.feat-chip span { display:block; color:var(--gray-500); font-size:.85rem; margin-top:.1rem; line-height:1.45; }
@media (max-width:900px){ .feat-chips { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .feat-chips { grid-template-columns:1fr; max-width:420px; margin:0 auto; } }