/* ==========================================================================
   Scootie — marketing site design system
   Single source of truth for the palette. Change a token here, not in a page.
   Palette and type per the Scootie brand style guide ("Scootie · In Style").
   ========================================================================== */

/* --- Fredoka, self-hosted (OFL). Variable font: one file covers 400–700. ---
   Fredoka ships latin, latin-ext and hebrew only — there is NO Greek subset,
   so Greek text falls through to the fallback stack below by design.          */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand palette — the only colours on this site */
  --sunshine: #FFCB3D;
  --teal:     #1FD0C3;
  --ink:      #16314E;
  --coral:    #FF6F61;
  --cream:    #FFF7E8;
  --white:    #FFFFFF;

  /* Derived tints — opacity variants of the above, no new hues */
  --ink-70:   rgba(22, 49, 78, .70);
  --ink-55:   rgba(22, 49, 78, .55);
  --ink-12:   rgba(22, 49, 78, .12);
  --ink-06:   rgba(22, 49, 78, .06);
  --cream-80: rgba(255, 247, 232, .80);

  --shadow:    0 10px 30px -12px rgba(22, 49, 78, .25);
  --shadow-lg: 0 24px 50px -18px rgba(22, 49, 78, .35);

  --r-card:  20px;
  --r-inner: 14px;
  --r-pill:  999px;

  --measure: 62ch;   /* readable line length for centred body copy */
  --maxw:    1200px;
  --gutter:  20px;

  /* Fredoka first; the rest catch Greek and anything else Fredoka lacks */
  --font: 'Fredoka', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* --- Reset Astra, but ONLY on the Scootie marketing pages ----------------
   Scoped to body.scootie-page (added by functions.php for the three pages
   that use this system). Without the scope this would strip the header and
   footer off /privacy/ and /terms/, which still rely on Astra's chrome.    */
body.scootie-page .site-header,
body.scootie-page .site-footer,
body.scootie-page .entry-header,
body.scootie-page .entry-title,
body.scootie-page #ast-scroll-top,
body.scootie-page .ast-breadcrumbs,
body.scootie-page .ast-main-header-wrap { display: none !important; }

body.scootie-page .site-content,
body.scootie-page .site-content > .ast-container,
body.scootie-page .ast-container,
body.scootie-page .ast-article-single,
body.scootie-page .entry-content {
  max-width: none !important; padding: 0 !important; margin: 0 !important;
}
body.scootie-page .entry-content > * { margin: 0 !important; }
body.scootie-page { margin: 0 !important; padding: 0 !important; background: var(--cream) !important; }

/* --- Beat Astra's inherited styling --------------------------------------
   Astra's inline CSS carries `h1,h2,h3,h4,h5,h6 { color:#ffffff }` (left over
   from when this site was dark) and styles `.entry-content a` at specificity
   0,2,0. A rule targeting an element directly beats our `.sc` container colour
   through inheritance, which is why headings rendered white-on-cream and the
   nav button was ink-on-ink.

   Keep these scoped to TEXT elements only. Do NOT blanket div/span: components
   such as .sc-step__num and .sc-bonus set their own colour deliberately, and a
   blanket rule outranks them and makes them invisible.                       */
body.scootie-page .sc :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
body.scootie-page .sc :is(p, li) { color: inherit; }
body.scootie-page .sc a { color: inherit; text-decoration: none; box-shadow: none; }
body.scootie-page .sc a:hover { text-decoration: none; }

body.scootie-page .sc .sc-lead { color: var(--ink-70); }
body.scootie-page .sc .sc-eyebrow { color: inherit; }
body.scootie-page .sc .sc-btn--ink { color: var(--cream); }
body.scootie-page .sc .sc-btn--sunshine { color: var(--ink); }
body.scootie-page .sc .sc-btn--coral { color: var(--ink); }

/* Colour the card, let its text inherit. */
body.scootie-page .sc .sc-card--ink { color: var(--cream); }
body.scootie-page .sc .sc-card--coral { color: var(--ink); }
body.scootie-page .sc .sc-card--sunshine,
body.scootie-page .sc .sc-card--teal { color: var(--ink); }
body.scootie-page .sc .sc-card--ink .sc-lead { color: inherit; opacity: .9; }
body.scootie-page .sc .sc-card--coral .sc-lead { color: inherit; }

/* --- Base ---------------------------------------------------------------- */
.sc {
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  font-size: 17px;
  text-align: center;              /* the whole site is centred */
  -webkit-font-smoothing: antialiased;
}
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc a { color: inherit; text-decoration: none; }
.sc img { max-width: 100%; height: auto; display: block; }
.sc p { margin: 0 auto; max-width: var(--measure); }
.sc h1, .sc h2, .sc h3, .sc h4 { margin: 0; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.sc :focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

.sc-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sc-stack { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* --- Nav ----------------------------------------------------------------- */
.sc-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream-80); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-12);
  padding: 14px var(--gutter);
}
.sc-nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sc-nav-logo img { height: 34px; width: auto; }
.sc-nav-menu { display: flex; align-items: center; gap: 26px; font-weight: 500; }
.sc-nav-menu a { color: var(--ink-70); }
.sc-nav-menu a:hover { color: var(--ink); }
.sc-nav-menu a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --- Buttons ------------------------------------------------------------- */
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 16px; border: 0; cursor: pointer;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.sc-btn:hover { transform: scale(1.02); }
.sc-btn:active { transform: scale(.98); }
.sc-btn--ink      { background: var(--ink); color: var(--cream); }
.sc-btn--sunshine { background: var(--sunshine); color: var(--ink); }
.sc-btn--coral    { background: var(--coral); color: var(--ink); }
.sc-btn--sm       { padding: 10px 18px; font-size: 14px; }

/* --- Cards --------------------------------------------------------------- */
.sc-card {
  background: var(--white); border-radius: var(--r-card);
  padding: 34px 28px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.sc-card--sunshine { background: var(--sunshine); color: var(--ink); }
.sc-card--teal     { background: var(--teal);     color: var(--ink); }
.sc-card--coral    { background: var(--coral);    color: var(--ink); }
.sc-card--ink      { background: var(--ink);      color: var(--cream); }
.sc-card--ink p { color: inherit; opacity: .9; }
/* no opacity on coral: ink-on-coral is 4.86:1 and cannot afford the loss */
.sc-card--coral p { color: inherit; }
.sc-card--lg { padding: 48px 32px; }

/* --- Sections ------------------------------------------------------------ */
.sc-section { padding: 64px 0; }
.sc-section__head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 36px; }
.sc-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.sc-h1   { font-size: clamp(38px, 7vw, 72px); font-weight: 700; }
.sc-h2   { font-size: clamp(28px, 4.2vw, 40px); }
.sc-h3   { font-size: 20px; }
.sc-lead { font-size: 18px; color: var(--ink-70); }

/* --- Hero ---------------------------------------------------------------- */
.sc-hero { padding: 56px 0 40px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.sc-hero__shot { margin-top: 10px; }

/* --- Hero headline animation ---------------------------------------------
   Pure CSS on purpose. The earlier reveal animation hid content until JS ran,
   which left the page as bare headings when that JS never fired. Here the only
   failure mode is "no stylesheet at all", in which case the words are simply
   plain visible text.

   Timing is deliberately unhurried: the first version finished in ~420ms,
   starting the moment the page painted, so it was over before anyone looked.  */
.sc-h1 .sc-word {
  display: inline-block;
  animation: sc-rise .85s cubic-bezier(.34, 1.3, .44, 1) both;
}
.sc-h1 span:nth-of-type(1) { animation-delay: .15s; }
.sc-h1 span:nth-of-type(2) { animation-delay: .27s; }
.sc-h1 span:nth-of-type(3) { animation-delay: .39s; }
.sc-h1 span:nth-of-type(4) { animation-delay: .54s; }
.sc-h1 span:nth-of-type(5) { animation-delay: .66s; }
.sc-h1 span:nth-of-type(6) { animation-delay: .78s; }

@keyframes sc-rise {
  from { opacity: 0; transform: translateY(.75em) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}

/* A scooter rides across under the last word and paints the Teal deck bar
   behind it - the wordmark's own metaphor, scaled up. */
.sc-word--mark { position: relative; }

.sc-word--mark::after {
  content: ""; position: absolute;
  left: 0; right: .12em; bottom: -.02em; height: .085em;
  background: var(--teal); border-radius: var(--r-pill);
  transform: scaleX(0); transform-origin: left center;
  animation: sc-swipe 1.05s cubic-bezier(.4, 0, .2, 1) 1.25s both;
}
@keyframes sc-swipe { to { transform: scaleX(1); } }

/* The scooter lives in CSS, not in the page markup: WordPress's KSES filter
   strips <svg> from post content when the saving user lacks unfiltered_html,
   which silently emptied the element and left nothing to animate. */
.sc-word--mark::before {
  content: ""; position: absolute;
  bottom: -.17em; left: 0;
  width: .42em; height: .42em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='9' cy='23' r='5.5' fill='none' stroke='%2316314E' stroke-width='3'/%3E%3Ccircle cx='24' cy='23' r='5.5' fill='none' stroke='%2316314E' stroke-width='3'/%3E%3Cpath d='M9 23h14V8h-4' stroke='%2316314E' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M26 3l-3 6h4l-3 6' stroke='%23FF6F61' stroke-width='2.4' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: sc-ride 1.05s cubic-bezier(.4, 0, .2, 1) 1.25s both;
}
@keyframes sc-ride {
  from { left: -.08em; opacity: 0; }
  12%  { opacity: 1; }
  to   { left: calc(100% - .5em); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-h1 .sc-word,
  .sc-word--mark::after,
  .sc-word--mark::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .sc-word--mark::after { transform: scaleX(1) !important; }
  .sc-word--mark::before { left: calc(100% - .5em) !important; }
}

/* --- Store badges + QR --------------------------------------------------- */
.sc-get { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sc-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.sc-badges img { height: 52px; width: auto; }
.sc-qr {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--white); border-radius: var(--r-inner);
  padding: 12px; box-shadow: var(--shadow);
}
.sc-qr img { width: 104px; height: 104px; }
.sc-qr span { font-size: 13px; font-weight: 500; color: var(--ink-70); }

/* --- Phone frame --------------------------------------------------------- */
.sc-phone {
  border: 5px solid var(--ink); border-radius: 36px;
  overflow: hidden; box-shadow: var(--shadow-lg);
  width: 260px; background: var(--ink);
}
.sc-phone img { border-radius: 31px; }
.sc-phone--sm { width: 212px; border-radius: 30px; }
.sc-phone--sm img { border-radius: 25px; }
.sc-shots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; }
.sc-shots__caption { margin-top: 28px; color: var(--ink-70); }
.sc-shots__get { margin-top: 28px; }
/* The hero is now a single statement line, so give it room to breathe. */
.sc-hero { padding: 88px 0 64px; }

/* --- Grids --------------------------------------------------------------- */
.sc-grid { display: grid; gap: 20px; }
.sc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sc-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- How-to steps -------------------------------------------------------- */
.sc-step__num {
  width: 52px; height: 52px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  background: var(--ink); color: var(--cream);
}
.sc-card--sunshine .sc-step__num { background: var(--ink); color: var(--sunshine); }
.sc-card--teal     .sc-step__num { background: var(--ink); color: var(--teal); }
.sc-card--coral    .sc-step__num { background: var(--ink); color: var(--cream); }
.sc-card--ink      .sc-step__num { background: var(--sunshine); color: var(--ink); }
.sc-bonus {
  display: inline-block; background: var(--ink); color: var(--sunshine);
  border-radius: var(--r-pill); padding: 4px 12px;
  font-size: 13px; font-weight: 600;
}
.sc-card--coral .sc-bonus { background: var(--ink); color: var(--sunshine); }

/* --- Feature cells ------------------------------------------------------- */
.sc-feature { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sc-feature__icon {
  width: 64px; height: 64px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
/* Each icon sets a contrasting colour as well as a background: emoji fall back
   to a monochrome glyph that inherits `color` when no colour-emoji font is
   installed, so a background alone leaves ink-on-ink invisible. */
.sc-feature:nth-child(1) .sc-feature__icon { background: var(--teal);     color: var(--ink); }
.sc-feature:nth-child(2) .sc-feature__icon { background: var(--coral);    color: var(--ink); }
.sc-feature:nth-child(3) .sc-feature__icon { background: var(--sunshine); color: var(--ink); }
.sc-feature:nth-child(4) .sc-feature__icon { background: var(--ink);      color: var(--cream); }

/* --- Team ----------------------------------------------------------------
   Circular head-crops. The photos are pre-cropped square and centred on the
   face, so object-position only needs a small upward bias for the circle.   */
.sc-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 24px; }
.sc-member { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sc-avatar {
  width: 150px; height: 150px; border-radius: 50%;
  overflow: hidden; background: var(--white);
  box-shadow: var(--shadow);
  border: 5px solid var(--sunshine);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.sc-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.sc-avatar__initials { font-size: 42px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.sc-member__name { font-size: 19px; font-weight: 600; }
.sc-member__note { font-size: 14px; color: var(--ink-55); }

/* ring + placeholder fill cycle through the brand */
.sc-member:nth-child(1) .sc-avatar { border-color: var(--sunshine); }
.sc-member:nth-child(2) .sc-avatar { border-color: var(--teal); }
.sc-member:nth-child(3) .sc-avatar { border-color: var(--coral); background: var(--coral); color: var(--ink); }
.sc-member:nth-child(4) .sc-avatar { border-color: var(--ink);   background: var(--ink);   color: var(--cream); }

/* --- Jump chips (Help) --------------------------------------------------- */
.sc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sc-chip {
  background: var(--white); border: 1px solid var(--ink-12);
  border-radius: var(--r-pill); padding: 9px 18px;
  font-size: 15px; font-weight: 500;
}
.sc-chip:hover { background: var(--sunshine); border-color: var(--sunshine); }

/* --- Mini steps (Help condensed guide) ----------------------------------- */
.sc-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sc-mini span {
  background: var(--cream); border-radius: var(--r-pill);
  padding: 8px 16px; font-weight: 500; font-size: 15px;
}

/* --- Footer ---------------------------------------------------------------
   An Ink brand block with a rounded shoulder, not a flat white rectangle:
   it closes the page the way the cards punctuate it.                        */
.sc-foot {
  background: var(--ink);
  color: var(--cream);
  border-radius: 36px 36px 0 0;
  margin-top: 72px;
  padding: 56px 0 36px;
  position: relative;
}
.sc-foot__mark { display: flex; justify-content: center; margin-bottom: 28px; }
.sc-foot__mark img { height: 38px; width: auto; }
.sc-foot__cols {
  max-width: 960px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  font-size: 15px; text-align: center;
}
.sc-foot__col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sc-foot__col strong {
  font-weight: 600; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sunshine);
}
body.scootie-page .sc .sc-foot a { color: var(--cream-80); }
body.scootie-page .sc .sc-foot a:hover { color: var(--sunshine); }
.sc-foot__legal {
  margin: 34px auto 0; max-width: 960px; padding: 20px var(--gutter) 0;
  border-top: 1px solid rgba(255, 247, 232, .14);
  display: flex; justify-content: center; align-items: center;
  gap: 10px 20px; flex-wrap: wrap; font-size: 13px;
}
body.scootie-page .sc .sc-foot__legal a { color: rgba(255, 247, 232, .6); }
body.scootie-page .sc .sc-foot__legal a:hover { color: var(--sunshine); }
.sc-foot__legal span { color: rgba(255, 247, 232, .6); }

/* --- Motion ---------------------------------------------------------------
   Content is VISIBLE BY DEFAULT. The reveal animation only applies once JS is
   confirmed available - the inline bootstrap in <head> adds .js to <html>
   before first paint. Without that guard, a JS failure, a blocked script or a
   slow stylesheet leaves every card stuck at opacity 0, and the .5s transition
   makes the page visibly fade to bare headings. Never hide content with CSS
   that only JS can undo.                                                     */
.js .sc-reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.js .sc-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sc *, .sc *::before, .sc *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
  .sc-reveal, .js .sc-reveal { opacity: 1 !important; transform: none !important; }
  .sc-btn:hover, .sc-btn:active { transform: none; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .sc-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sc-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sc-team    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .sc-section { padding: 48px 0; }
  .sc-nav-menu { gap: 18px; font-size: 15px; }
  .sc-foot__cols { grid-template-columns: 1fr; gap: 24px; }
  .sc-foot { border-radius: 28px 28px 0 0; margin-top: 48px; }
}
@media (max-width: 560px) {
  .sc { font-size: 16px; }
  .sc-grid--2, .sc-grid--3, .sc-grid--4 { grid-template-columns: 1fr; }
  /* avatars stay 2-up on phones - they are small and a single column wastes the width */
  .sc-team { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .sc-avatar { width: 118px; height: 118px; border-width: 4px; }
  .sc-avatar__initials { font-size: 34px; }
  /* Don't hide the menu on phones - most visitors are on one, and there is no
     hamburger to fall back to. Wrap it onto its own centred row instead. */
  .sc-nav-inner { flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
  .sc-nav-menu { order: 3; width: 100%; justify-content: center; gap: 20px; font-size: 15px; }
  .sc-nav-logo img { height: 30px; }
  .sc-card { padding: 26px 20px; }
  .sc-badges img { height: 46px; }
}