@font-face { font-family:JulrDisplay; src:url('/assets/assets/fonts/MountainsofChristmas-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; background:#0A1F2E; }
body { margin:0; color:var(--text); font-family:var(--body-font); font-size:16px; line-height:1.5; min-height:100vh; }
body:before { content:""; position:fixed; inset:0; z-index:-1; background:radial-gradient(circle at 20% 30%,#f8b2290c,transparent 13%),radial-gradient(circle at 75% 65%,#f8b2290b,transparent 17%),var(--background); }
body:after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(circle at 14% 21%,#f5efe37a 0 1px,transparent 2px),radial-gradient(circle at 77% 38%,#f5efe355 0 1px,transparent 2px),radial-gradient(circle at 37% 76%,#f5efe388 0 1px,transparent 2px); background-size:287px 353px,431px 467px,379px 283px; }
a { color:var(--gold); text-underline-offset:3px; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--soft-gold); outline-offset:4px; }
h1,h2 { font-family:JulrDisplay,serif; color:var(--gold); font-weight:700; line-height:1.1; margin:0; text-shadow:0 0 15px #f8b2294d; }
h1 { font-size:40px; } h2 { font-size:24px; } p { margin:0; }
header { height:64px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; z-index:10; background:#0a1f2ec7; backdrop-filter:blur(14px); }
.brand { display:inline-flex; gap:8px; align-items:center; text-decoration:none; font-family:JulrDisplay,serif; font-size:26px; font-weight:700; line-height:1; }
.brand img { filter:drop-shadow(0 0 5px #f8b22955); }
header nav { display:flex; align-items:center; gap:10px; }
header nav>a:not(.button) { font-size:13px; text-decoration:none; color:var(--muted); padding:10px 2px; }
header nav>a[aria-current] { color:var(--gold); text-decoration:underline; }
main { margin:auto; padding:40px 16px; max-width:1400px; }
.hero { display:grid; gap:24px; }
.intro { margin-top:16px; line-height:1.5; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center; min-height:44px; padding:10px 20px; border-radius:var(--radius); border:2px solid var(--gold); text-decoration:none; font-weight:700; font-size:14px; line-height:1.4; }
.button.primary { background:var(--gold); color:var(--on-gold); }
.button:hover { box-shadow:0 0 20px #f8b22928; }
.button.outline { color:var(--soft-gold); background:transparent; }
.glass { background:var(--glass); border:2px solid var(--border); border-radius:var(--radius); padding:24px; }
.step { display:flex; gap:12px; margin-top:16px; }
.step:first-of-type { margin-top:20px; }
.step svg { width:24px; height:24px; flex:none; fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
.step h3 { font-size:18px; color:var(--gold); line-height:1.4; margin:0 0 4px; font-weight:700; }
.step p { font-size:14px; line-height:1.4; color:var(--secondary); }
#demo { margin-top:40px; scroll-margin-top:80px; }
.preview-hint { margin-bottom:16px; }
.calendar-frame { position:relative; overflow-anchor:none; }
#julr-calendar-host { position:sticky; top:0; overflow:clip; width:100%; height:1px; visibility:hidden; }
/* Flutter sets this inline. The document owns vertical scrolling; keep taps
   and horizontal gestures in Flutter, and native pinch zoom in the browser. */
#julr-calendar-host flutter-view { touch-action:pan-y pinch-zoom !important; overflow:clip !important; }
.calendar-frame.ready #julr-calendar-host { visibility:visible; }
.calendar-frame.ready #calendar-fallback { display:none; }
#calendar-fallback { text-align:center; padding:32px 16px; }
#calendar-fallback p { margin:16px 0; }
#julr-calendar-host flt-glass-pane { background:transparent; }
.caption { color:var(--muted); font-size:12px; margin-top:12px; }
.create { text-align:center; margin-top:48px; }
.create .button { margin-top:20px; }
.faq { max-width:768px; margin:48px auto 0; }
.faq>h2 { text-align:center; margin-bottom:20px; }
.faq>.glass { padding:0; overflow:hidden; }
details+details { border-top:1px solid var(--border); }
summary { padding:24px; cursor:pointer; list-style:none; font-size:18px; font-weight:600; display:flex; gap:16px; justify-content:space-between; align-items:center; }
summary::-webkit-details-marker { display:none; }
summary:after { content:'⌄'; color:var(--gold); }
details[open]>summary:after { content:'⌃'; }
.answer { padding:0 24px 24px; font-size:14px; line-height:1.5; }
.answer p+p { margin-top:20px; }
.answer>a { display:inline-block; margin-top:12px; }
footer { background:#0000001a; text-align:center; padding:12px 16px; }
footer .brand { font-size:20px; }
footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:8px; }
footer nav a { font-size:13px; min-height:48px; padding:14px 12px; text-decoration:none; }
@media(max-width:599px) {
  .actions>.button,.create>.button { width:100%; }
  .actions>.primary>span { display:none; }
  header nav { gap:6px; } header .login { padding:10px 12px; }
}
@media(min-width:600px) {
  main { padding:40px 24px; max-width:840px; } h1 { font-size:52px; } h2 { font-size:28px; }
}
@media(min-width:840px) {
  main { max-width:1120px; padding:40px 32px; }
  .hero { grid-template-columns:7fr 5fr; gap:40px; align-items:center; }
  h1 { font-size:60px; } h2 { font-size:30px; }
  .intro,.preview-hint { font-size:18px; }
}
@media(min-width:1280px) { main { max-width:1400px; padding-left:40px; padding-right:40px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.header-actions { display:flex; align-items:center; gap:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sr-only:focus { position:static; display:inline-block; width:auto; height:auto; margin:12px 0; overflow:visible; clip-path:none; white-space:normal; }