/* Front page and Facebook-ad target. 360px-first, no framework, no images.
   The product panels are drawn in CSS precisely so this page still paints fast
   on 3G: a page selling "live in five minutes" cannot itself take ten seconds
   to load.

   Two things now cost more than they did, both on the owner's instruction, and
   both mitigated rather than waved through:

   Four webfonts, loaded with display=swap and a preconnect, so the text paints
   immediately in the fallback stack and reflows when the faces arrive rather
   than holding the page blank.

   A full-screen hero video, which is by far the most expensive thing on the
   page. Its src is set by script only on a screen at least 900px wide with
   motion allowed, so a phone on mobile data never downloads it. Every phone
   therefore sees .csgl-bg-paint, which is why that layer is designed to carry
   the hero on its own and not merely to be a colour behind a video. */

.csgl {
  /* Brand, from the design brief. */
  --brand: #7b39fc;
  --brand-hi: #8f55fd;
  --dark: #2b2344;
  --dark-hi: #3a3059;

  /* Dark grounds, warm-shifted toward the brand rather than neutral black. */
  --night: #100c1c;
  --night-2: #17102b;
  --night-3: #0b0814;

  /* Light grounds and their neutrals, biased a few degrees to the brand: a
     pure mid-grey next to #7b39fc reads as unconsidered. */
  --paper: #f7f6fb;
  --rule: #e6e3ef;
  --ink: #171717;
  --mut: #5b5470;
  --offwhite: #f6f7f9;

  --lilac: #b9a4ef;

  /* Two families, where there were four.

     The display face has ONE weight and no italic, so nothing on this page may
     ask it for either: `font-synthesis: none` below stops the browser drawing
     a fake, which on a sharp geometric face comes out visibly smeared. That
     costs Inter nothing, because Inter is loaded with all four real weights.

     The fallback stack matters more than usual here. It is a third-party host
     and one request away from being a system font, so it falls back to the
     heaviest widely-installed grotesque rather than to a default sans, and the
     uppercase display lines keep roughly the same colour on the page. */
  --display: "FSP DEMO - PODIUM Sharp 4.11", "Arial Black", Impact, "Helvetica Neue", system-ui, sans-serif;
  --ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --action: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  font-family: var(--body);
  font-synthesis: none;
  color: var(--ink);
  background: #fff;
  margin: 0;
  line-height: 1.55;
}
.csgl *, .csgl *::before, .csgl *::after { box-sizing: border-box; }
.csgl-wrap { max-width: 560px; margin: 0 auto; padding: 0 18px; }

/* The nav and hero run to the edges rather than sitting in the 560px column
   the rest of the page uses: a left-aligned statement set at 7rem needs the
   width, and centring it inside a narrow column would waste most of it. The
   max-width is only there so the copy does not drift into the far corner of a
   very wide monitor. */
.csgl-bleed { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; }

.csgl h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
  margin: 0 0 10px;
}
.csgl-lede { text-align: center; color: var(--mut); margin: 0 auto 26px; max-width: 46ch; font-size: 1rem; }

.csgl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 0 0 8px 0;
  font-family: var(--ui); font-weight: 600; font-size: .9rem;
}
.csgl-skip:focus { left: 0; }

/* .csgl-cta is defined once, with the hero, and every call to action on the
   page uses it — the mid-page one, both plan cards and the closer. One button
   language, so the page does not change its mind about what a button is. */
.csgl-note {
  font-family: var(--ui); font-size: .8125rem; margin: 18px 0 0;
  text-transform: uppercase; letter-spacing: .1em;
}

/* ---- the dark top: video ground, nav, hero ------------------------- */
.csgl-top {
  position: relative; overflow: hidden; background: var(--night); color: #fff;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
}

.csgl-bg { position: absolute; inset: 0; }
.csgl-bg-paint {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 44% at 22% 18%, rgba(123, 57, 252, .42) 0%, rgba(123, 57, 252, 0) 68%),
    radial-gradient(46% 38% at 82% 26%, rgba(226, 178, 138, .20) 0%, rgba(226, 178, 138, 0) 70%),
    radial-gradient(74% 60% at 50% 108%, rgba(43, 35, 68, .92) 0%, rgba(16, 12, 28, 0) 72%),
    linear-gradient(168deg, var(--night-2) 0%, var(--night) 52%, var(--night-3) 100%);
}
.csgl-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- entrance -------------------------------------------------------
   The hero lands in five steps, 200ms apart, which is the one piece of
   decoration on this page. `opacity: 0` up front and `forwards` at the end are
   both required: without the first, every line flashes in its final position
   before the animation starts; without the second, it snaps back at the end. */
@keyframes csgl-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
.csgl-rise { opacity: 0; animation: csgl-rise .8s ease-out forwards; }
.csgl-rise-1 { animation-delay: .2s; }
.csgl-rise-2 { animation-delay: .4s; }
.csgl-rise-3 { animation-delay: .6s; }
.csgl-rise-4 { animation-delay: .8s; }

/* ---- nav ------------------------------------------------------------ */
.csgl-nav { position: relative; z-index: 20; padding: 20px 0; }
.csgl-nav-in { display: flex; align-items: center; gap: 28px; }

/* The wordmark, and the only place the display face is set at nav size, so it
   is the one thing that has to survive the fallback stack legibly. */
.csgl-word {
  flex: none; margin-right: auto;
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; text-decoration: none; line-height: 1;
}
.csgl-word:hover, .csgl-word:focus-visible { color: #fff; opacity: .85; }

.csgl-links { display: none; gap: 32px; }
.csgl-links a, .csgl-navlink {
  color: rgba(255, 255, 255, .8); text-decoration: none;
  font-family: var(--ui); font-weight: 500; font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .14em;
  transition: color .2s ease;
}
.csgl-links a:hover, .csgl-navlink:hover,
.csgl-links a:focus-visible, .csgl-navlink:focus-visible { color: #fff; }

.csgl-nav-cta { display: none; align-items: center; gap: 24px; }

/* Bordered rather than filled: the filled purple belongs to the one action
   this page is asking for, and a second filled button beside it splits that. */
.csgl-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 13px 24px; color: #fff; text-decoration: none; white-space: nowrap;
  font-family: var(--action); font-weight: 500; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .14em;
  transition: border-color .2s ease, background-color .2s ease;
}
.csgl-outline:hover, .csgl-outline:focus-visible {
  border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .1); color: #fff;
}
.csgl-arw { flex: none; transition: transform .2s ease; }
.csgl-outline:hover .csgl-arw, .csgl-cta:hover .csgl-arw { transform: translate(2px, -2px); }

/* ---- the menu, on a phone -------------------------------------------
   A <details>, so the overlay, the stagger and the hamburger-to-X are all CSS
   and none of it needs JavaScript. The stagger has to be an ANIMATION rather
   than a transition: a closed <details> hides its panel outright, so there is
   no start state for a transition to run from, while an animation fires the
   moment the element appears. */
.csgl-menu { flex: none; }
.csgl-menu > summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  padding: 4px 0; width: 26px;
}
.csgl-menu > summary::-webkit-details-marker { display: none; }
.csgl-menu > summary i {
  display: block; height: 2px; width: 24px; background: #fff; border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, width .3s ease;
}
.csgl-menu > summary i:nth-child(3) { width: 16px; }

.csgl-menu[open] > summary { position: fixed; top: 26px; right: 24px; z-index: 61; }
.csgl-menu[open] > summary i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.csgl-menu[open] > summary i:nth-child(2) { opacity: 0; }
.csgl-menu[open] > summary i:nth-child(3) { width: 24px; transform: translateY(-6px) rotate(-45deg); }

/* Closed, the panel is display:none — stated rather than left to the browser.
   Engines disagree about how a closed <details> hides its content: some use
   display:none, Chromium hides it with content-visibility, which leaves the
   element a box. A `position: fixed; inset: 0` panel that keeps a box while
   closed is a full-screen black rectangle over the hero waiting to happen. */
.csgl-menu-panel { display: none; }
.csgl-menu[open] .csgl-menu-panel {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 24px;
  background: rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.csgl-menu-word { position: absolute; top: 24px; left: 24px; }
.csgl-menu-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.csgl-menu-nav > a {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: 2.25rem; line-height: 1; text-transform: uppercase;
  color: #fff; text-decoration: none;
  animation: csgl-rise .4s ease-out both;
}
.csgl-menu-nav > a:nth-child(1) { animation-delay: .10s; }
.csgl-menu-nav > a:nth-child(2) { animation-delay: .18s; }
.csgl-menu-nav > a:nth-child(3) { animation-delay: .26s; }
.csgl-menu-nav > a:nth-child(4) { animation-delay: .34s; }
.csgl-menu-nav > a:nth-child(5) { animation-delay: .42s; }
.csgl-menu-nav > a:nth-child(6) { animation-delay: .50s; }
.csgl-menu-nav > .csgl-navlink { font-family: var(--ui); font-size: .8125rem; }
.csgl-menu-nav > .csgl-outline { margin-top: 8px; font-size: .75rem; }

/* ---- hero ------------------------------------------------------------
   Left-aligned and a full viewport tall. 100svh rather than 100vh: on a phone
   100vh is the height WITHOUT the browser's own chrome, so the stat row ends
   up under the address bar on first paint. */
.csgl-hero { position: relative; z-index: 10; display: flex; align-items: center; flex: 1; padding: 24px 0 56px; }
.csgl-hero-in { width: 100%; text-align: left; }

.csgl-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 24px;
  font-family: var(--ui); font-weight: 500; font-size: .625rem;
  text-transform: uppercase; letter-spacing: .18em; color: rgba(255, 255, 255, .7);
}
.csgl-eyebrow svg { flex: none; }

.csgl-hero h1 {
  margin: 0; color: #fff;
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(2.8rem, 8vw, 7rem);
  line-height: .92; letter-spacing: -.02em; text-transform: uppercase;
}
.csgl-hero h1 span { display: block; }

.csgl-sub {
  margin: 24px 0 0; max-width: 30rem;
  font-size: .875rem; line-height: 1.65; color: rgba(255, 255, 255, .7);
}
.csgl-sub b { color: #fff; font-weight: 600; }

.csgl-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }

/* The filled purple is the one action the page is asking for. The black
   button beside it is the second-best thing a visitor can do — look at a real
   booking page — and black keeps it clearly subordinate on a purple-lit
   ground without pretending to be a quiet link. */
.csgl-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff; text-decoration: none;
  font-family: var(--action); font-weight: 500; font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 14px 20px; border-radius: 0;
  box-shadow: 0 10px 30px -12px rgba(123, 57, 252, .9);
  transition: background-color .2s ease;
}
.csgl-cta:hover, .csgl-cta:focus-visible { background: var(--brand-hi); color: #fff; }
.csgl-cta-dark { background: #000; box-shadow: none; border: 1px solid rgba(255, 255, 255, .18); }
.csgl-cta-dark:hover, .csgl-cta-dark:focus-visible { background: #171717; color: #fff; }

.csgl-assure { display: none; align-items: center; gap: 12px; color: rgba(255, 255, 255, .5); }
.csgl-assure i {
  font-style: normal; font-family: var(--ui); font-size: .75rem; line-height: 1.35;
  text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .6);
}

.csgl-stats { display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 32px 0 0; }
.csgl-stats dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.csgl-stats dd { margin: 0; }
.csgl-stats b {
  display: block; color: #fff; font-family: var(--body); font-weight: 700;
  font-size: 1.375rem; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.csgl-stats span {
  display: block; margin-top: 4px; color: rgba(255, 255, 255, .5);
  font-family: var(--ui); font-size: .5625rem;
  text-transform: uppercase; letter-spacing: .14em;
}

.csgl-note { color: rgba(255, 255, 255, .45); }

/* ---- the phone frame (unchanged in shape, re-skinned) --------------- */
.csgl-phone {
  width: 248px; flex: none; background: #0f0b1a; border-radius: 26px; padding: 8px 7px 12px;
  box-shadow: 0 18px 44px rgba(20, 12, 40, .28);
}
.csgl-phone.sm { width: 224px; }
.csgl-screen { background: #fff; border-radius: 20px; overflow: hidden; color: var(--ink); }
.csgl-phone.dark .csgl-screen { background: #f2f1f7; }
.csgl-url { background: #ededf2; color: #55555f; font-size: .68rem; text-align: center; padding: 7px 4px; font-family: var(--body); }
.csgl-url b { color: var(--ink); }

.csgl-bk { padding: 11px 11px 13px; }
.csgl-bk-head { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.csgl-bk-name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.csgl-bk-name b { font-size: .8rem; font-family: var(--ui); }
.csgl-bk-name i { font-style: normal; font-size: .66rem; color: var(--mut); }
.csgl-avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(123, 57, 252, .1); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 700;
  font-family: var(--ui);
}
.csgl-bk-steps { display: flex; gap: 4px; margin: 10px 0 9px; }
.csgl-bk-steps i { height: 3px; flex: 1; border-radius: 2px; background: var(--rule); }
.csgl-bk-steps i.on { background: var(--brand); }
.csgl-bk-label { font-family: var(--ui); font-size: .74rem; font-weight: 600; color: var(--mut); margin: 0 0 7px; }

.csgl-row, .csgl-staff {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--rule); border-radius: 10px; padding: 7px 9px; margin-bottom: 6px;
}
.csgl-row span { display: flex; flex-direction: column; font-size: .76rem; line-height: 1.25; }
.csgl-row span i { font-style: normal; font-size: .65rem; color: var(--mut); }
.csgl-row b { font-size: .76rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.csgl-row.sel, .csgl-staff.sel { border-color: var(--brand); background: rgba(123, 57, 252, .07); }
.csgl-staff { justify-content: flex-start; gap: 8px; }
.csgl-bk-cta { background: var(--brand); color: #fff; text-align: center; font-family: var(--ui); font-size: .8rem; font-weight: 600; padding: 9px; border-radius: 9px; margin-top: 9px; }

.csgl-cal { border: 1px solid var(--rule); border-radius: 10px; padding: 8px; margin-bottom: 8px; }
.csgl-cal-head { font-family: var(--ui); font-size: .72rem; font-weight: 600; text-align: center; margin-bottom: 6px; }
.csgl-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.csgl-days span { font-size: .66rem; padding: 4px 0; border-radius: 5px; font-variant-numeric: tabular-nums; }
.csgl-days .mut { color: var(--mut); font-size: .6rem; }
.csgl-days .off { color: #b9b5c6; }
.csgl-days .pick { background: var(--brand); color: #fff; font-weight: 700; }
.csgl-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.csgl-slots span { font-size: .68rem; text-align: center; padding: 6px 0; border: 1px solid var(--rule); border-radius: 8px; font-variant-numeric: tabular-nums; }
.csgl-slots .off { color: #c2bfcc; background: var(--paper); border-color: #f0eef6; text-decoration: line-through; }
.csgl-slots .sel { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }

.csgl-done { text-align: center; padding: 14px 0 10px; }
.csgl-tick { display: block; width: 40px; height: 40px; line-height: 40px; margin: 0 auto 8px; border-radius: 50%; background: rgba(123, 57, 252, .1); color: var(--brand); font-size: 1.2rem; font-weight: 700; }
.csgl-done b { display: block; font-size: .88rem; font-family: var(--ui); }
.csgl-done i { font-style: normal; font-size: .72rem; color: var(--mut); }
.csgl-recap { border-top: 1px solid var(--rule); padding-top: 9px; }
.csgl-recap div { display: flex; justify-content: space-between; gap: 10px; font-size: .72rem; padding: 3px 0; }
.csgl-recap span { color: var(--mut); }
.csgl-recap b { text-align: right; font-variant-numeric: tabular-nums; }
.csgl-fine { font-size: .64rem; color: var(--mut); text-align: center; margin: 9px 0 0; }

/* ---- pain strip: continues the dark top ---------------------------- */
.csgl-pain { background: var(--night-3); color: #fff; padding: 40px 0 44px; }
.csgl-pain p { margin: 0; color: rgba(255, 255, 255, .65); font-size: 1rem; }
.csgl-pain-turn { margin-top: 14px !important; color: #fff !important; font-size: 1.08rem !important; font-family: var(--ui); }
.csgl-pain-turn b { font-weight: 600; }

/* ---- product sections, on light ground ------------------------------
   The drawn panels live here, and the real Booknetic panel is a light
   interface. Drawing them on the dark ground would make them read as an
   illustration of the product rather than as the product. */
.csgl-show { background: var(--paper); padding: 54px 0 58px; }
.csgl-show.alt { background: #fff; }
.csgl-screens { display: grid; gap: 30px; justify-items: center; }
.csgl-shot { margin: 0; max-width: 300px; }
.csgl-shot figcaption { font-size: .9rem; color: var(--mut); margin-top: 14px; text-align: center; }
.csgl-shot figcaption b { display: block; color: var(--ink); font-family: var(--ui); font-size: .97rem; margin-bottom: 3px; }
.csgl-try { text-align: center; margin: 30px 0 0; }
.csgl-try a { color: var(--brand); font-family: var(--ui); font-weight: 600; text-decoration: none; font-size: 1rem; }
.csgl-try span { display: block; color: var(--mut); font-size: .86rem; margin-top: 4px; }

/* ---- the owner's day ------------------------------------------------ */
.csgl-daycard { background: #fff; border: 1px solid var(--rule); border-radius: 16px; padding: 12px; box-shadow: 0 26px 60px -30px rgba(43, 35, 68, .4); }
.csgl-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.csgl-day-head b { font-family: var(--ui); font-size: .95rem; }
.csgl-chiprow { display: flex; gap: 4px; }
.csgl-chiprow i { font-style: normal; font-family: var(--action); font-size: .7rem; padding: 4px 10px; border-radius: 99px; background: var(--paper); color: var(--mut); }
.csgl-chiprow i.on { background: var(--brand); color: #fff; font-weight: 600; }
.csgl-day { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; }
.csgl-time { display: flex; flex-direction: column; padding-top: 22px; }
.csgl-time span { height: 36px; font-size: .6rem; color: var(--mut); font-variant-numeric: tabular-nums; }
.csgl-col { border-left: 1px solid var(--rule); padding-left: 4px; }
.csgl-col-head { height: 22px; font-family: var(--ui); font-size: .72rem; font-weight: 600; color: var(--mut); }
.csgl-track { position: relative; height: 216px; }
.csgl-appt { position: absolute; left: 0; right: 0; border-radius: 8px; padding: 4px 6px; overflow: hidden; }
.csgl-appt b { display: block; font-family: var(--ui); font-size: .66rem; }
.csgl-appt i { font-style: normal; font-size: .6rem; opacity: .8; }
.csgl-appt.a1 { background: rgba(123, 57, 252, .09); color: #3b1d86; border-left: 3px solid var(--brand); }
.csgl-appt.a2 { background: rgba(226, 178, 138, .22); color: #6b4a22; border-left: 3px solid #d69a5c; }
.csgl-appt.a3 { background: rgba(43, 35, 68, .1); color: #2b2344; border-left: 3px solid var(--dark); }
.csgl-appt em { position: absolute; top: 4px; right: 5px; font-style: normal; font-family: var(--action); font-size: .52rem; font-weight: 700; text-transform: uppercase; background: var(--brand); color: #fff; padding: 1px 4px; border-radius: 3px; }
.csgl-facts { display: grid; gap: 16px; margin-top: 44px; }
.csgl-facts div { font-size: .92rem; color: var(--mut); }
.csgl-facts b { display: block; color: var(--ink); font-family: var(--ui); font-size: .97rem; margin-bottom: 2px; }

/* ---- SMS, on the dark ground: it is read on a lock screen ---------- */
.csgl-sms { background: var(--night); color: #fff; padding: 56px 0 58px; }
.csgl-sms-grid { display: grid; gap: 30px; justify-items: center; }
.csgl-sms-copy { text-align: center; }
.csgl-sms h2 { text-align: center; color: #fff; }
.csgl-sms p { color: rgba(255, 255, 255, .65); margin: 0 0 12px; font-size: 1rem; }
.csgl-sms-note { font-size: .9rem !important; border-left: 3px solid var(--brand); padding-left: 12px; text-align: left; }
.csgl-sms-head { text-align: center; font-family: var(--ui); font-size: .72rem; font-weight: 600; color: var(--mut); padding: 10px 0 8px; border-bottom: 1px solid #e1dfe8; }
.csgl-bubble { background: #fff; border-radius: 14px; margin: 12px 10px 4px; padding: 10px 12px; font-size: .78rem; line-height: 1.45; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.csgl-sms-time { text-align: center; font-size: .6rem; color: #8b8896; padding: 4px 0 12px; }

/* ---- features ------------------------------------------------------- */
.csgl-features { background: var(--paper); padding: 54px 0 58px; }
.csgl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.csgl-grid li { font-size: .9rem; color: var(--mut); padding-left: 26px; position: relative; }
.csgl-grid li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 700; }
.csgl-grid b { display: block; color: var(--ink); font-family: var(--ui); font-size: .97rem; margin-bottom: 2px; }

/* The second list is deliberately quieter than the first. The page's argument
   is that the free plan is enough for a lot of salons; a paid list shouting
   over it would undo that in one glance. */
.csgl-adds {
  margin: 38px 0 18px; padding-top: 26px; border-top: 1px solid var(--rule);
  font-family: var(--ui); font-weight: 600; font-size: 1.02rem; text-align: center;
}
.csgl-grid-paid li::before { color: var(--mut); }
.csgl-grid-paid b { color: var(--mut); }

/* ---- steps ---------------------------------------------------------- */
.csgl-steps { background: #fff; padding: 54px 0 58px; }
.csgl-step { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.csgl-step > b {
  flex: none; font-family: var(--display); font-size: 1.9rem; line-height: 1;
  color: var(--brand); width: 34px; text-align: center;
}
.csgl-step h3 { margin: 0; font-family: var(--ui); font-size: 1.02rem; }
.csgl-step p { margin: 4px 0 0; color: var(--mut); font-size: .94rem; }
.csgl-mid-cta { text-align: center; margin: 30px 0 0; }

/* ---- pricing: annual is THE choice (§2 — subscription-averse market) -- */
.csgl-pricing { background: var(--night-3); color: #fff; padding: 56px 0 60px; }
.csgl-pricing h2 { color: #fff; }
.csgl-pricing .csgl-lede { color: rgba(255, 255, 255, .65); }
.csgl-plans { display: grid; gap: 22px; }
.csgl-plan { border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: rgba(255, 255, 255, .04); padding: 26px 20px 22px; position: relative; }
.csgl-plan h3 { margin: 0; font-family: var(--action); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--lilac); }
.csgl-amount { font-family: var(--display); font-weight: 400; font-size: 2.9rem; line-height: 1; margin: 14px 0 4px; font-variant-numeric: tabular-nums; }
.csgl-amount small { font-family: var(--body); font-size: .95rem; color: rgba(255, 255, 255, .6); }
.csgl-plan ul { list-style: none; margin: 18px 0 0; padding: 0; color: rgba(255, 255, 255, .68); font-size: .93rem; }
.csgl-plan li { margin-bottom: 7px; padding-left: 20px; position: relative; }
.csgl-plan li::before { content: "\2713"; position: absolute; left: 0; color: var(--lilac); }
/* The free card leads on a page about a free plan, so it is not the faint one
   in the row: a lilac edge and a lifted ground, without the filled purple that
   would put it in a fight with the plan we are actually selling. */
.csgl-plan-free { background: rgba(185, 164, 239, .1); border-color: rgba(185, 164, 239, .45); }
.csgl-plan-free h3 { color: #fff; }
.csgl-plan-free .csgl-badge { background: rgba(255, 255, 255, .14); }
.csgl-plan-free .csgl-amount { color: #fff; }

.csgl-annual { background: var(--brand); border-color: var(--brand); box-shadow: 0 30px 70px -30px rgba(123, 57, 252, .9); }
.csgl-annual h3 { color: rgba(255, 255, 255, .8); }
.csgl-annual ul { color: rgba(255, 255, 255, .85); }
.csgl-annual li::before { color: #fff; }
.csgl-badge {
  display: inline-block; margin-bottom: 4px;
  background: rgba(255, 255, 255, .2); color: #fff;
  font-family: var(--action); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 6px;
}
.csgl-save { color: rgba(255, 255, 255, .85); font-size: .93rem; margin: 4px 0 0; }
.csgl-plan .csgl-cta { display: flex; justify-content: center; margin-top: 22px; }
.csgl-annual .csgl-cta { background: #fff; color: var(--ink); box-shadow: none; }
.csgl-annual .csgl-cta:hover { background: var(--offwhite); color: var(--ink); }
.csgl-plan-ghost .csgl-cta { box-shadow: none; }

.csgl-topup {
  margin: 26px auto 0; max-width: 52ch; text-align: center;
  color: rgba(255, 255, 255, .6); font-size: .92rem; line-height: 1.6;
}
.csgl-topup b { color: #fff; font-weight: 600; }

/* ---- FAQ, closer, footer -------------------------------------------- */
.csgl-faq { background: var(--paper); padding: 54px 0 58px; }
.csgl-faq details { border-bottom: 1px solid var(--rule); padding: 15px 0; }
.csgl-faq details:first-of-type { border-top: 1px solid var(--rule); }
.csgl-faq summary { font-family: var(--ui); font-weight: 600; cursor: pointer; font-size: 1rem; }
.csgl-faq p { color: var(--mut); font-size: .94rem; margin: 10px 0 0; max-width: 70ch; }

.csgl-last { background: var(--night); color: #fff; text-align: center; padding: 64px 0 68px; }
.csgl-last h2 { color: #fff; margin-bottom: 22px; }
.csgl-last .csgl-note { color: rgba(255, 255, 255, .45); }

.csgl-foot { background: var(--night-3); color: rgba(255, 255, 255, .45); text-align: center; font-size: .82rem; padding: 26px 0 34px; }
.csgl-legal-links { display: block; margin-top: 10px; }
.csgl-legal-links a { color: rgba(255, 255, 255, .6); text-decoration: none; margin: 0 10px; }
.csgl-legal-links a:hover { color: #fff; }
.csgl-credit { display: block; margin-top: 8px; font-size: .72rem; color: rgba(255, 255, 255, .3); }
.csgl-credit a { color: inherit; }

/* ---- wider screens ---------------------------------------------------
   The hero heading is not in here: clamp(2.8rem, 8vw, 7rem) already scales it
   continuously, and a breakpoint that also set a size would fight it. What
   scales here is everything clamp cannot reach — gutters, gaps and the two
   pieces held back from a phone entirely. */
@media (min-width: 640px) {
  .csgl-bleed { padding: 0 40px; }
  .csgl-eyebrow { font-size: .8125rem; letter-spacing: .3em; }
  .csgl-sub { font-size: 1rem; }
  .csgl-cta { font-size: .75rem; padding: 16px 28px; }
  .csgl-hero-cta { gap: 24px; }
  /* Held back from a phone: at 360px the reassurance competes with the two
     buttons it is meant to support. */
  .csgl-assure { display: flex; }
  .csgl-stats { gap: 48px; }
  .csgl-stats b { font-size: 2.25rem; }
  .csgl-menu-word { top: 26px; left: 40px; }
  .csgl-stats span { font-size: .75rem; }
  .csgl-menu-panel > a { font-size: 3rem; }
}

@media (min-width: 760px) {
  .csgl-wrap { max-width: 900px; }
  .csgl h2 { font-size: 2.6rem; }
  .csgl-pain p { text-align: center; font-size: 1.15rem; max-width: 60ch; margin: 0 auto; }
  .csgl-screens { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
  .csgl-facts { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .csgl-sms-grid { grid-template-columns: 1fr auto; align-items: center; gap: 48px; }
  .csgl-sms-copy { text-align: left; }
  .csgl-sms h2 { text-align: left; }
  .csgl-grid { grid-template-columns: 1fr 1fr; gap: 18px 32px; }
  /* Two columns, with the free plan across the top: it is the headline, and
     three narrow cards at this width crush the annual card's badge onto four
     lines. Three abreast waits for 1024. */
  .csgl-plans { grid-template-columns: 1fr 1fr; align-items: start; }
  .csgl-plan-free { grid-column: 1 / -1; }
  .csgl-day { grid-template-columns: 42px 1fr 1fr; }
}

/* The nav swaps at the same width the video does, so there is one number to
   remember about this hero rather than two. Below it: hamburger and no video.
   Above it: six nav items, which is what needs the width. */
@media (min-width: 900px) {
  .csgl-links, .csgl-nav-cta { display: flex; }
  .csgl-menu { display: none; }
}

@media (min-width: 1024px) {
  .csgl-wrap { max-width: 1060px; }
  .csgl-plans { grid-template-columns: repeat(3, 1fr); }
  .csgl-plan-free { grid-column: auto; }
  .csgl-grid-paid { grid-template-columns: 1fr 1fr; gap: 18px 32px; }
  .csgl-bleed { padding: 0 64px; }
  .csgl-nav { padding: 28px 0; }
  .csgl-word { font-size: 1.875rem; }
  .csgl-eyebrow { margin-bottom: 32px; }
  .csgl-sub { margin-top: 32px; }
  .csgl-hero-cta { margin-top: 40px; }
  .csgl-stats { margin-top: 56px; gap: 64px; }
  .csgl-stats b { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .csgl-bg-video { display: none; }

  /* Land everything immediately AND opaque. Shortening the duration alone
     would leave the fill-mode races above showing an empty hero on some
     engines, which is a blank first screen rather than a calmer one. */
  .csgl *, .csgl *::before, .csgl *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .csgl-rise, .csgl-menu-panel > a { opacity: 1; transform: none; }
}

/* ---- host theme reset ------------------------------------------------
   This stylesheet is enqueued from LandingController::render(), so it only
   ever loads on a page that actually renders [csg_landing]. That makes these
   unscoped selectors safe here, and they have to be unscoped: the elements
   they target are ANCESTORS of .csgl, which no descendant selector can reach.

   Twenty Twenty-Five wraps page content in groups carrying spacing--60 top
   and bottom padding, prints the page title above it, and closes with its own
   stock footer (Blog / Events / Shop / Patterns / Authors / Themes — theme
   demo content). On a full-bleed landing page that reads as a duplicate
   title, a band of empty white above and below, and a footer of dead links.

   The page supplies its own closing section and footer, so the theme's are
   suppressed rather than restyled. When Privacy and Terms copy exists it goes
   in .csgl-foot, not in the theme footer.

   The header is suppressed too now that this page carries its own nav; two
   navigation bars stacked on one page is worse than either alone. */
.wp-block-post-title { display: none; }
header.wp-block-template-part { display: none; }
main.wp-block-group { margin-top: 0 !important; margin-bottom: 0 !important; }
main .wp-block-group.has-global-padding,
main .wp-block-post-content.has-global-padding,
main .entry-content { padding-top: 0 !important; padding-bottom: 0 !important; }
footer.wp-block-template-part { display: none; }