/* ============================================================================
 * landing.css - the public marketing page. Standalone: it does not load
 * app.css, so the site can have its own type scale without fighting the
 * application chrome. Palette is kept in step with app.css on purpose.
 * ==========================================================================*/

:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --script:  'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

  --bg:        #ffffff;
  --bg-2:      #f6f7fb;
  --surface:   #ffffff;
  --ink:       #0f172a;
  --ink-2:     #334155;
  --muted:     #64748b;
  --line:      #e4e8ef;
  --accent:    #4f46e5;
  --accent-2:  #7c3aed;
  --accent-ink:#ffffff;
  --accent-soft:#eef0ff;
  --ok:        #059669;
  --gold:      #b4884a;

  --plan-bg:   #f4f1ec;
  --room-line: #cbb9a0;
  --table-fill:#ffffff;
  --table-line:#b9a68a;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.05);
  --shadow-lg: 0 2px 4px rgba(15,23,42,.04), 0 24px 60px rgba(15,23,42,.13);
  --radius:    14px;
  --maxw:      1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0b1220;
    --bg-2:      #0e1626;
    --surface:   #131c2e;
    --ink:       #e8eefb;
    --ink-2:     #c7d2e5;
    --muted:     #94a3b8;
    --line:      #24314a;
    --accent:    #818cf8;
    --accent-2:  #a78bfa;
    --accent-ink:#0b1220;
    --accent-soft:#1c2440;
    --plan-bg:   #131c2e;
    --room-line: #46587a;
    --table-fill:#1b2740;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --bg:        #0b1220;
  --bg-2:      #0e1626;
  --surface:   #131c2e;
  --ink:       #e8eefb;
  --ink-2:     #c7d2e5;
  --muted:     #94a3b8;
  --line:      #24314a;
  --accent:    #818cf8;
  --accent-2:  #a78bfa;
  --accent-ink:#0b1220;
  --accent-soft:#1c2440;
  --plan-bg:   #131c2e;
  --room-line: #46587a;
  --table-fill:#1b2740;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600;
  font-size: 15px; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { text-decoration: none; border-color: var(--muted); transform: translateY(-1px); }
/* One flat accent fill rather than a gradient, and a shadow tinted with the
   same colour so the button reads as lifted rather than glowing. */
.btn--primary {
  background: var(--accent);
  border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent);
}
.btn--lg { padding: 15px 28px; font-size: 16px; border-radius: 12px; }
/* A white pill with a hairline, so it still reads as a button on a bar that
   has no background of its own. */
.btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--bg-2); border-color: var(--muted); }

/* --- top bar -------------------------------------------------------------- */
/* The bar sits on the page rather than on a panel of its own: no background
   at the top, and the frosted plate only once content is scrolling under it. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom-color: var(--line);
}
/* Brand and page links read as one group on the left; the buttons are pushed
   to the far right by the middle column, which takes all the slack. */
.nav-in {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 18px; height: 72px;
}
.brand {
  display: inline-flex; justify-self: start; align-items: center; gap: 10px;
  font-weight: 800; font-size: 20px; color: var(--ink); letter-spacing: -.03em;
}
.brand:hover { text-decoration: none; }
/* The mark is an inline SVG (brand_mark() in lib/seo.php) drawn to the same
   geometry as the favicon, so the tab and the header show one logo. The tile
   and the ring are painted from these two variables. */
.brand-mark {
  width: 32px; height: 32px; flex: none; display: block;
  --mark-bg: var(--accent);
  --mark-fg: #fff;
}
.nav-links { display: flex; justify-content: flex-start; gap: 2px; margin-left: 24px; }
.nav-links a {
  color: var(--ink-2); font-weight: 500; font-size: 15px; letter-spacing: -.01em;
  padding: 8px 12px; border-radius: 9px; white-space: nowrap;
}
/* In the last stretch before the burger appears the bar is full to the inch:
   close the links up rather than let the buttons run past the container. */
@media (max-width: 1120px) {
  .nav-in { gap: 12px; }
  .nav-links { gap: 0; margin-left: 10px; }
  .nav-links a { padding: 8px 9px; font-size: 14.5px; }
}
.nav-links a:hover { background: var(--bg-2); text-decoration: none; color: var(--ink); }
.nav-cta { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.nav .btn { padding: 10px 20px; }
.nav .btn--primary { padding: 10px 20px; }
.nav .theme-toggle { border-radius: 10px; width: 40px; height: 40px; }

/* --- theme switch --------------------------------------------------------- */
/* Sized to sit level with the buttons beside it. Which icon shows is decided
   by the same three states as the palette above - system, forced light, forced
   dark - so the button can never offer the mode the page is already in. */
.theme-toggle {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.theme-toggle:hover { background: var(--bg-2); border-color: var(--muted); color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .ico-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ico-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .ico-sun  { display: block; }
}
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun  { display: block; }

/* --- burger --------------------------------------------------------------- */
/* Hidden until the bar runs out of room; the three bars fold into a cross
   while the panel is open, which is the only state indicator on the button. */
.nav-toggle {
  display: none; justify-self: end;
  width: 42px; height: 42px; padding: 0; border-radius: 11px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  cursor: pointer; place-items: center;
}
.nav-toggle:hover { background: var(--bg-2); }
.nav-burger, .nav-burger::before, .nav-burger::after {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .2s ease, opacity .2s ease;
}
.nav-burger { position: relative; }
.nav-burger::before, .nav-burger::after { content: ""; position: absolute; left: 0; }
.nav-burger::before { top: -6px; }
.nav-burger::after  { top:  6px; }
.nav-toggle[aria-expanded="true"] .nav-burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-burger::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-burger::after  { transform: translateY(-6px) rotate(-45deg); }

.nav-menu {
  border-top: 1px solid var(--line); background: var(--bg);
  max-height: calc(100dvh - 72px); overflow-y: auto;
}
.nav-menu[hidden] { display: none; }
.nav-menu-in { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 18px; }
.nav-menu-links { display: flex; flex-direction: column; }
.nav-menu-links a {
  color: var(--ink-2); font-weight: 500; font-size: 16px;
  padding: 12px 10px; border-radius: 10px;
}
.nav-menu-links a:hover { background: var(--bg-2); text-decoration: none; color: var(--ink); }
.nav-menu-cta { display: flex; gap: 10px; padding: 10px 10px 0; border-top: 1px solid var(--line); margin-top: 6px; }
.nav-menu-cta .btn { flex: 1; justify-content: center; }
body.nav-open { overflow: hidden; }

/* Brand, five links and two buttons is all the bar will take; below this it
   folds into the burger, at the same width the hero drops to one column. */
@media (max-width: 1000px) {
  .nav-in { grid-template-columns: 1fr auto; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: grid; }
}
/* Wide enough for the real bar: the panel must never show, whatever state the
   button was left in. */
@media (min-width: 1001px) {
  .nav-menu { display: none; }
}
/* The legal pages run the same bar with no burger behind it, and only three
   links in it. With no menu to fall back on it keeps its links and buttons
   down to the width where they genuinely stop fitting. */
@media (max-width: 1000px) and (min-width: 700px) {
  .nav-in:not(:has(.nav-toggle)) { grid-template-columns: auto 1fr auto; }
  .nav-in:not(:has(.nav-toggle)) .nav-links,
  .nav-in:not(:has(.nav-toggle)) .nav-cta { display: flex; }
}

/* --- hero ----------------------------------------------------------------- */
/* Copy on the left, the editor on the right. The two halves swap to one
   column well before the shot gets too narrow to read. */
.hero {
  position: relative; overflow: hidden; padding: 56px 0 56px;
  background:
    radial-gradient(64% 74% at 76% 38%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 72%),
    radial-gradient(52% 60% at 98% 82%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 74%),
    radial-gradient(46% 56% at 4% 80%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 74%),
    /* The last stop eases back off so the tint does not butt up against the
       flat grey of the section underneath. */
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--accent) 3%, transparent) 40%,
      color-mix(in srgb, var(--accent) 5%, transparent) 76%,
      color-mix(in srgb, var(--accent) 2%, transparent) 100%);
}
.hero-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
  gap: 40px; align-items: center;
}
@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-art { max-width: 900px; margin-inline: auto; }
  /* Stacked, the hero is narrow and very tall, so the percentages above cover
     far more of it. Flatter shapes keep the field the weight it has wide. */
  .hero {
    background:
      radial-gradient(86% 30% at 70% 64%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 72%),
      radial-gradient(74% 22% at 18% 90%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 74%),
      linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--accent) 3%, transparent) 46%,
        color-mix(in srgb, var(--accent) 2%, transparent) 100%);
  }
}

.hero-badge {
  display: inline-block; padding: 7px 15px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 5vw, 58px); line-height: 1.06; letter-spacing: -.025em;
  margin: 22px 0 0;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-sub {
  margin-top: 18px; font-size: clamp(16.5px, 1.5vw, 18.5px); color: var(--muted);
  max-width: 560px;
}
.hero-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-cta .btn-arrow { transition: transform .18s ease; }
.hero-cta .btn:hover .btn-arrow { transform: translateX(3px); }
/* The second call to action carries no chrome of its own until it is
   hovered, so it cannot compete with the one beside it. */
.btn--quiet { background: transparent; border-color: transparent; color: var(--ink); }
.btn--quiet:hover { background: var(--bg-2); border-color: var(--line); }
.btn--quiet svg { color: var(--accent); }
/* --- the four answers under the buttons ----------------------------------- */
.hero-points {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px; margin: 30px 0 0; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero-points li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 11px;
  align-items: center; text-align: left;
}
.hero-point-ico {
  grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.hero-points b { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.hero-points li > span:not(.hero-point-ico) { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 1000px) { .hero-points { max-width: 560px; margin-inline: auto; } }
@media (max-width: 460px)  { .hero-points { grid-template-columns: 1fr; gap: 16px; } }

/* --- the art half --------------------------------------------------------- */
/* z-index roots the blob below in this column: without it the negative layer
   escapes to the page and is painted behind the hero's own background. */
.hero-art { position: relative; z-index: 0; }
/* A denser, organic shape sitting on the field behind the shot. */
.hero-art::before {
  content: ""; position: absolute; z-index: -1; inset: -84px -116px -74px -58px;
  background:
    radial-gradient(54% 58% at 30% 22%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 72%),
    radial-gradient(58% 62% at 80% 78%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 72%);
  border-radius: 44% 56% 52% 48% / 50% 44% 56% 50%;
  filter: blur(10px);
}
/* Handwritten aside, shown only where there is room above the shot for it. */
.hero-scribble {
  position: absolute; left: -6px; top: -34px; z-index: 2;
  display: none; align-items: flex-start; gap: 4px;
  color: var(--accent); transform: rotate(-5deg); pointer-events: none;
}
.hero-scribble span { font-family: var(--script); font-weight: 600; font-size: 21px; line-height: 1.15; }
.hero-scribble svg { flex: none; margin-top: 2px; }
@media (min-width: 1080px) {
  .hero-scribble { display: flex; }
  .hero-art { padding-top: 30px; }
}

/* --- product shot --------------------------------------------------------- */
.shot {
  margin: 0; max-width: 1000px;
  border-radius: 18px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.shot-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.shot-title { font-size: 13px; color: var(--muted); font-weight: 500; }
.shot-save { margin-left: auto; font-size: 12.5px; color: var(--ok); font-weight: 600; }
.shot-body { display: grid; grid-template-columns: 208px 1fr; min-height: 380px; }
.shot-side { border-right: 1px solid var(--line); padding: 12px; background: var(--bg-2); }
.shot-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.shot-tabs span {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  padding: 5px 9px; border-radius: 7px;
}
.shot-tabs span.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.guest-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px;
  font-size: 13px; color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); margin-bottom: 6px;
}
.guest-row .av {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff;
}
.guest-row .tag { margin-left: auto; font-size: 11px; color: var(--muted); }
.guest-row.is-drag {
  border-color: var(--accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 26%, transparent);
  transform: translateX(6px) rotate(-1.2deg);
}
.shot-plan { background: var(--plan-bg); position: relative; }
.shot-plan svg { display: block; width: 100%; height: 100%; }

/* The shot fills whatever the grid hands it. */
.hero-art .shot { max-width: none; }
/* While the hero is in two columns the guest list has to give up some width,
   so its type comes down with it and no name is allowed to break in two.
   Once the hero stacks, the shot is full width again and these come off. */
@media (min-width: 1001px) {
  .hero-art .shot-body { grid-template-columns: 178px 1fr; min-height: 360px; }
  .hero-art .shot-side { padding: 10px; }
  .hero-art .guest-row {
    gap: 7px; padding: 6px 7px; margin-bottom: 5px; font-size: 12px; white-space: nowrap;
  }
  .hero-art .guest-row .av { width: 20px; height: 20px; font-size: 9.5px; }
  .hero-art .guest-row .tag { font-size: 10px; }
}
@media (min-width: 1001px) and (max-width: 1180px) {
  .hero-art .shot-body { grid-template-columns: 156px 1fr; }
}

@media (max-width: 720px) {
  .shot-body { grid-template-columns: 1fr; }
  .shot-side { display: none; }
}

/* --- sections ------------------------------------------------------------- */
section { padding: 84px 0; }
section.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.sec-head { max-width: 660px; margin: 0 auto 46px; text-align: center; }
.kicker {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.sec-head h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(28px, 4vw, 42px); line-height: 1.12; margin: 12px 0 0;
}
.sec-head p { margin-top: 14px; color: var(--muted); font-size: 17px; }

/* --- feature grid --------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.card .ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 14px;
}
.card h3 { font-size: 17px; letter-spacing: -.01em; }
.card p { margin-top: 7px; color: var(--muted); font-size: 14.8px; }

/* One card in the grid describes a paid package rather than the product, so it
   says so on its own face - a feature list that quietly mixes the two is how
   somebody signs up expecting folders and does not get them. */
.card--pro { background: color-mix(in srgb, var(--accent) 4%, var(--surface));
             border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.tag-pro {
  display: inline-block; vertical-align: 2px; margin-left: 7px;
  padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--accent); color: #fff;
}

/* --- steps ---------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 8px; }
.step b {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--display); font-size: 17px;
  background: var(--surface); border: 1px solid var(--line); color: var(--accent);
  box-shadow: var(--shadow-sm); margin-bottom: 14px;
}
.step h3 { font-size: 18px; }
.step p { color: var(--muted); margin-top: 6px; }

/* --- pricing -------------------------------------------------------------- */
.price-wrap {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; max-width: 880px; margin: 0 auto; align-items: stretch;
}
/* Three packages. Wider, and a little less padding inside each, so the tick
   lists stay readable rather than turning into two words per line. */
.price-wrap--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1120px; }
.price-wrap--three .price { padding: 32px 24px; }
.price-wrap--three .price-fig .amount { font-size: 52px; }
.price-wrap--three .price li { font-size: 14.6px; }
@media (max-width: 1040px) { .price-wrap--three { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 760px) { .price-wrap { grid-template-columns: 1fr; } }
.price {
  position: relative; width: 100%;
  display: flex; flex-direction: column;   /* keeps every CTA on the same line */
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 38px 30px; box-shadow: var(--shadow-lg); text-align: center;
}
/* The package's name, under its badge. With three of them the badge alone no
   longer says which is which - "Most popular" is not a name. */
.price-name { font-family: var(--display); font-size: 22px; font-weight: 600;
              margin: 14px 0 0; letter-spacing: -.01em; }
.price--free { box-shadow: var(--shadow-sm); }
.price--free .price-badge { background: var(--bg-2); color: var(--muted); }
.price--free .price-fig .amount { color: var(--ink-2); }
.price--paid::before,
.price--pro::before {
  content: ""; position: absolute; inset: -1px; border-radius: 20px; pointer-events: none;
  padding: 1px; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Professional is the wider package, not the louder one: same border treatment
   as Personal, a tinted ground rather than a second competing gradient. */
.price--pro { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.price-badge {
  display: inline-block; align-self: center; padding: 5px 13px; border-radius: 999px; font-size: 12.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent);
}
.price-fig {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin: 20px 0 4px; font-family: var(--display); letter-spacing: -.03em;
}
.price-fig .amount { font-size: 64px; line-height: 1; font-weight: 600; }
.price-fig .per { font-family: var(--font); font-size: 17px; color: var(--muted); font-weight: 500; }
/* Who the package is for, directly under the price. Weighted and coloured
   rather than muted, because on a three-column table the audience is the
   thing being chosen between - the figure below it is only the cost of it. */
.price-who {
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  margin-top: 10px; line-height: 1.45; text-wrap: balance;
}
.price-who--pro { color: var(--accent); }
.price-line { color: var(--muted); font-size: 15px; margin-top: 6px; }
.price ul { margin: 26px 0; text-align: left; display: grid; gap: 12px; align-content: start; flex: 1; }
.price li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.4px; color: var(--ink-2); }
.price li svg { flex: none; margin-top: 3px; color: var(--ok); }
.price li b { color: var(--ink); font-weight: 600; }
.price .btn { width: 100%; }
.price-foot { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.price-aside {
  margin: 26px auto 0; max-width: 620px; text-align: center; font-size: 14px; color: var(--muted);
}

/* --- faq ------------------------------------------------------------------ */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 4px 18px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 15px 0; font-weight: 600; font-size: 16px;
  display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; color: var(--accent); font-size: 20px; font-weight: 400;
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 16px; color: var(--muted); font-size: 15.2px; }

/* --- closing cta ---------------------------------------------------------- */
.cta-band {
  border-radius: 22px; padding: 56px 32px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed 55%, #9333ea);
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 120% at 50% -20%, rgba(255,255,255,.28), transparent 60%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(26px, 4vw, 40px); line-height: 1.12;
}
.cta-band p { margin-top: 12px; color: rgba(255,255,255,.86); font-size: 17px; }
.cta-band .btn {
  margin-top: 26px; background: #fff; color: #4338ca; border-color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

/* --- footer --------------------------------------------------------------- */
.foot { padding: 40px 0 56px; border-top: 1px solid var(--line); margin-top: 84px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.foot-links { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.foot-links a { color: var(--muted); font-size: 14.5px; }
.foot small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.foot-copy { margin-top: 0; }

/* --- reveal on scroll ----------------------------------------------------- */
html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, html.js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .shot-plan .drop-ring { animation: none !important; }
  .shot-plan .drag-chip { animation: none !important; }
}

/* the pulsing chair the dragged guest is about to land on */
.shot-plan .drop-ring { animation: dropPulse 2.4s ease-in-out infinite; transform-origin: 344px 356px; }
/* the name being dragged towards it */
.shot-plan .drag-chip {
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--accent) 30%, transparent));
  animation: dragFloat 2.4s ease-in-out infinite;
  transform-origin: 282px 319px;
}
@keyframes dragFloat {
  0%, 100% { transform: translate(0, 0) rotate(-1.2deg); }
  50%      { transform: translate(6px, 4px) rotate(-1.2deg); }
}
@keyframes dropPulse {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* --- currency switch ------------------------------------------------------
 * Two links, not a <select> with script behind it: the pricing section renders
 * before anything has loaded, and a link is what a keyboard reaches first.
 * Sized so the pair reads as one control rather than as two buttons.
 */
.ccy-switch {
  display: inline-flex; gap: 2px; margin-top: 18px; padding: 3px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
}
.ccy-opt {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 6px 14px; border-radius: 999px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  transition: background .14s ease, color .14s ease;
}
.ccy-opt:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ccy-opt.is-active {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
}
.ccy-sym { font-size: 15px; font-weight: 700; }
.ccy-iso { letter-spacing: .03em; }

/* Every currency's figure is in the page and all but one is hidden, so the
   switch is a class change rather than a page load. `hidden` alone is not
   enough for anything this stylesheet gives a `display` to, hence the
   important: a price that is meant to be invisible must be invisible. */
[data-ccy][hidden] { display: none !important; }