/*
 * Public Sans, served from this origin.
 *
 * It came from fonts.googleapis.com, which meant a render-blocking stylesheet
 * on a third-party origin before the first paint: a DNS lookup, a TLS
 * handshake and a round trip to Google, in front of every page, on the school
 * connections this product is sold to. Self-hosted it is one same-origin
 * request the browser is already connected for.
 *
 * latin and latin-ext, not vietnamese. latin-ext is not optional: the peso
 * sign is U+20B1, which lives in its range, and the pricing page is made of
 * them. font-display: swap keeps text visible while the file arrives — the
 * same behaviour the &display=swap parameter was buying.
 *
 * SIL Open Font License 1.1, same as it was when Google served it.
 */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/public-sans-400-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;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/public-sans-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/public-sans-500-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;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/public-sans-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/public-sans-600-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;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/public-sans-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/public-sans-700-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;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/public-sans-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/public-sans-800-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;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/public-sans-800-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * ParentLINK marketing site.
 *
 * The design arrived as a Claude Design canvas: every rule was an inline
 * `style` attribute, and the pages only rendered once a React + Babel runtime
 * had been fetched from a CDN and had compiled them in the browser. The colours,
 * spacing, radii and type scale here are lifted from that canvas unchanged —
 * what moved is where they live, so a page paints from its own bytes.
 */

:root {
  --navy: #152238;
  --brand: #1d3a6b;
  --brand-lift: #2c53a0;
  --ink: #1c2430;
  --ink-soft: #37424f;
  --muted: #4a5568;
  --muted-soft: #5a6779;
  --faint: #9aa4b2;
  --on-navy: #c3cbdb;
  --on-navy-soft: #9db1d6;
  --on-brand-soft: #dce4f2;
  --wash: #f5f6f8;
  --line: #e2e6ec;
  --line-soft: #e8ebf0;
  --white: #ffffff;
  --shell: 1024px;
  --pad: clamp(16px, 4vw, 32px);
  --section: clamp(56px, 9vw, 96px);
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--white);
  overflow-x: hidden;
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-lift); }
img { max-width: 100%; }

/* Keyboard users get a visible ring; the canvas had none at all. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--brand-lift);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--white); color: var(--brand);
  padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

@keyframes plFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.fade { animation: plFadeUp 0.7s ease-out both; }
.fade-1 { animation-delay: 0.15s; }
.fade-2 { animation-delay: 0.3s; }
.fade-3 { animation-delay: 0.45s; }

/* Motion is decoration here; anyone who has asked for less gets none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header .shell {
  max-width: var(--shell); margin: 0 auto;
  /* wrap is load-bearing below 860px: the nav becomes width:100% order:3 and
     has to reach a second line. Without it the links stay on the logo's row,
     squeeze the wordmark and collide with the Menu button. */
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 10px; padding: 12px var(--pad);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 700; color: var(--white); letter-spacing: -0.3px;
}
.brand:hover { color: var(--white); }
.brand img { width: 26px; height: 26px; border-radius: 7px; }

.nav {
  display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center;
  font-size: 13.5px; font-weight: 500;
}
.nav a { color: var(--on-navy); }
.nav a:hover { color: var(--white); }
.nav a[aria-current='page'] { color: var(--white); font-weight: 700; }
.nav .cta {
  display: inline-block; white-space: nowrap;
  background: var(--white); color: var(--brand);
  padding: 7px 18px; border-radius: 999px; font-weight: 600; font-size: 13px;
}
.nav .cta:hover { background: var(--on-brand-soft); color: var(--brand); }
/* The CTA is white-on-brand, so the current-page rule above would paint its
   label white on a white pill — an invisible "Request a Demo" on the one page
   where it matters most. */
.nav .cta[aria-current='page'] { color: var(--brand); font-weight: 700; }

/*
 * The canvas let the nav wrap onto a second line on a phone, which pushed the
 * hero down the screen. Below 860px it becomes a disclosure instead.
 */
.nav-toggle {
  display: none;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white); border-radius: 10px; padding: 7px 12px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  /* The brand takes the row's spare width so the Menu button is pushed hard
     right, instead of the two meeting in the middle. */
  .site-header .brand { flex: 1 1 auto; min-width: 0; }
  .nav {
    display: none; width: 100%; order: 3;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 6px 0 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    margin-top: 6px;
  }
  .nav.open { display: flex; }
  /* 44px minimum: these are tapped with a thumb, often one-handed. */
  .nav a { padding: 12px 4px; font-size: 15.5px; min-height: 44px; display: flex; align-items: center; }
  .nav .cta { margin-top: 8px; justify-content: center; text-align: center; font-size: 14.5px; padding: 12px 18px; }
}

/* ------------------------------------------------------------------ layout */

main { display: block; }
.shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.shell-wide { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.band { padding: var(--section) 24px; }
.band-wash { background: var(--wash); }

/* overflow:hidden is not cosmetic — .glow-b sits at right:-240px, and on a
   390px phone that is 240px of horizontal scroll on the homepage. body has
   overflow-x:hidden, but that does not stop the document growing; the bleed
   has to be clipped where it happens. */
.hero { position: relative; overflow: hidden; text-align: center; padding: clamp(56px, 10vw, 110px) 24px clamp(40px, 7vw, 72px); max-width: 880px; margin: 0 auto; }
.hero-narrow { max-width: 700px; padding-bottom: clamp(36px, 6vw, 64px); }
.glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.glow-a { top: -140px; left: -220px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(44, 83, 160, 0.16), transparent 65%); }
.glow-b { top: 40px; right: -240px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(23, 181, 160, 0.13), transparent 65%); }

h1, h2, h3 { margin: 0; letter-spacing: -0.035em; color: var(--navy); font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(38px, 7.5vw, 72px); line-height: 1.05; letter-spacing: -0.04em; }
h1.h1-sm { font-size: clamp(32px, 5.5vw, 56px); line-height: 1.08; }
h2 { font-size: clamp(30px, 5vw, 48px); line-height: 1.1; }
h2.h2-sm { font-size: clamp(28px, 4.5vw, 44px); letter-spacing: -0.03em; }
h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.4px; }

.lede { font-size: clamp(18px, 2.5vw, 24px); line-height: 1.45; color: var(--muted); margin: 26px auto 0; max-width: 640px; text-wrap: balance; }
.lede-sm { font-size: 17px; line-height: 1.6; margin-top: 14px; }
.sub { font-size: 19px; color: var(--muted); margin-top: 14px; max-width: 620px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--brand-lift); text-transform: uppercase; }
.note { font-size: 14px; color: var(--muted-soft); }
.center { text-align: center; }

.grid { display: grid; gap: 16px; }
.grid-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid-steps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 48px; }
.grid-compare { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.grid-split { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }

.card {
  background: var(--white); border-radius: 22px; padding: 28px 24px;
  border: 1px solid var(--line-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover { border-color: transparent; }
.card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(21, 34, 56, 0.10); }
.card-icon {
  width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(145deg, #eaeff7, #dbe4f2);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s ease;
}
.card:hover .card-icon { transform: scale(1.06) rotate(-3deg); }
/* h2 as well as h3: security.html's cards sit directly under the page h1,
   so h3 there skipped a level. They are h2 now, and a card heading should
   look like a card heading whichever level the outline needs. */
.card h3, .card h2 { font-size: 17px; margin-top: 16px; letter-spacing: -0.3px; }
.card p { font-size: 14px; color: var(--muted-soft); line-height: 1.55; margin: 6px 0 0; }

.panel { background: var(--wash); border-radius: 26px; padding: 36px; }
.panel-brand { background: radial-gradient(620px 420px at 85% -15%, var(--brand-lift), var(--brand)); color: var(--white); box-shadow: 0 18px 40px rgba(29, 58, 107, 0.25); }
.panel-brand h3, .panel-brand .panel-title { color: var(--white); }

.tick { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; list-style: none; padding: 0; }
.tick li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; line-height: 1.55; }
.tick .mark { flex-shrink: 0; font-weight: 800; }
.tick-no .mark { color: var(--faint); }
.tick-no li { color: var(--muted-soft); }
.tick-yes li { color: var(--on-brand-soft); }

.btn {
  display: inline-block; white-space: nowrap; border: none; cursor: pointer;
  background: var(--brand); color: var(--white);
  padding: 14px 32px; border-radius: 999px; font-weight: 600; font-size: 17px;
  font-family: inherit; transition: background 0.2s ease;
}
.btn:hover { background: var(--brand-lift); color: var(--white); }
.btn-ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.btn-ghost:hover { background: var(--brand); color: var(--white); }
.btn-on-brand { background: var(--white); color: var(--brand); }
.btn-on-brand:hover { background: var(--on-brand-soft); color: var(--brand); }
.btn-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 34px; align-items: center; }
.link-arrow { white-space: nowrap; font-weight: 500; font-size: 17px; color: var(--brand-lift); }

.pill { display: inline-flex; align-items: center; gap: 7px; background: var(--navy); color: var(--white); padding: 7px 16px; border-radius: 999px; white-space: nowrap; }
.pill b { font-size: 12px; font-weight: 600; }
.pill span { font-size: 11px; color: var(--on-navy-soft); }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 28px; }

.shot { width: 100%; border-radius: 28px; display: block; object-fit: cover; background: #eef1f6; }
.shot-sm { border-radius: 24px; }

/* ----------------------------------------------------------------- feature */

.feature { padding: var(--section) 24px; }
.feature .inner { max-width: var(--shell); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(32px, 5vw, 56px); align-items: center; }
.feature-rtl .inner > .feature-media { order: -1; }
@media (max-width: 640px) { .feature-rtl .inner > .feature-media { order: 0; } }
.feature h2 { font-size: clamp(26px, 4vw, 38px); margin-top: 8px; }
.feature p { font-size: 16px; color: var(--muted); line-height: 1.6; margin: 14px 0 0; }
.feature-media img { transition: transform 0.35s ease; }
.feature-media:hover img { transform: scale(1.06); }
.feature-media { overflow: hidden; border-radius: 24px; }

/* ------------------------------------------------------------------ tables */

/* stretch, not start: three cards of different heights left their CTAs at
   three different vertical positions, which reads as unfinished. Each card is
   a column and the button is pushed to the bottom, so the row of buttons is a
   row. */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 48px; text-align: left; align-items: stretch; }
.tier {
  background: var(--wash); border-radius: 26px; padding: 36px;
  display: flex; flex-direction: column;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tier:not(.tier-featured) { border-color: var(--line); background: var(--white); }
.tier:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(21, 34, 56, 0.10); }
.tier-featured { background: radial-gradient(620px 420px at 85% -15%, var(--brand-lift), var(--brand)); color: var(--white); box-shadow: 0 18px 40px rgba(29, 58, 107, 0.25); }
.tier-featured:hover { box-shadow: 0 22px 46px rgba(29, 58, 107, 0.3); }
.tier .tier-name { font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--brand-lift); }
.tier-featured .tier-name { color: var(--on-navy-soft); }
.tier .price { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; margin-top: 10px; }
/* Stacked, not inline. Inline fit inside the card by two or three pixels,
   so ₱18 sat beside its qualifier and ₱30 and ₱45 wrapped — the same block
   rendering three different ways down one row. Stacking is predictable at
   every width and gives the number the emphasis a pricing card wants. */
.tier .price { display: block; line-height: 1.05; }
.tier .price small {
  display: block; margin-top: 6px;
  font-size: 14.5px; font-weight: 500; color: var(--muted-soft); letter-spacing: 0;
}
.tier-featured .price small { color: #b9c6dd; }
.tier .tier-desc { font-size: 15px; color: var(--muted-soft); line-height: 1.55; margin-top: 12px; }
.tier-featured .tier-desc { color: var(--on-brand-soft); }
.tier ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
.tier li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.5; }
.tier li .mark { flex-shrink: 0; font-weight: 800; color: var(--brand-lift); }
.tier-featured li .mark { color: var(--white); }
.tier .btn { display: block; text-align: center; margin-top: auto; padding-top: 13px; padding-bottom: 13px; font-size: 16px; }
.tier ul { margin-bottom: 26px; }

.info-card { background: var(--wash); border-radius: 18px; padding: 22px 24px; }
.info-card dt { font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-lift); font-weight: 700; }
.info-card dd { font-size: 15px; color: var(--ink-soft); margin: 6px 0 0; }

/* --------------------------------------------------------------------- FAQ */

.faq-group + .faq-group { margin-top: 40px; }
.faq-group > h2 { font-size: 22px; letter-spacing: -0.3px; }
.faq {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; font-size: 16.5px; font-weight: 600; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex-shrink: 0;
  font-size: 22px; font-weight: 400; color: var(--brand-lift); line-height: 1;
}
.faq[open] summary::after { content: '\2212'; }
.faq p { font-size: 15px; color: var(--muted); line-height: 1.65; margin: 0 0 18px; max-width: 62ch; }

/* -------------------------------------------------------------------- prose */

.prose { max-width: 720px; margin: 0 auto; padding: clamp(40px, 7vw, 72px) 24px var(--section); }
.prose h2 { font-size: 22px; margin-top: 36px; }
.prose h2:first-of-type { margin-top: 24px; }
.prose p, .prose li { font-size: 15.5px; color: var(--muted); line-height: 1.7; }
.prose ul { padding-left: 20px; }
.prose .updated { font-size: 14px; color: var(--muted-soft); }

/* -------------------------------------------------------------------- form */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { margin-top: 18px; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.field .hint { font-size: 12.5px; font-weight: 400; color: var(--muted-soft); }
.field input, .field textarea {
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px;
  font-size: 15px; background: var(--white); font-family: inherit; color: var(--ink);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 104px; }
.field input:focus, .field textarea:focus { border-color: var(--brand-lift); }
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: #b3261e; }
.field .error { font-size: 12.5px; color: #b3261e; font-weight: 600; min-height: 0; }
.field .error:empty { display: none; }

/* The spam trap. Off-screen rather than display:none — some bots skip hidden
   inputs, and a screen reader is told to ignore it by aria-hidden + tabindex. */
.trap { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

.form-submit { width: 100%; margin-top: 22px; font-size: 16px; padding: 14px; }
.form-submit[disabled] { opacity: 0.65; cursor: progress; }
.form-status { margin-top: 14px; font-size: 14.5px; line-height: 1.55; }
.form-status[data-tone='error'] { color: #b3261e; font-weight: 600; }
.form-done { text-align: center; padding: 32px 0; }
.form-done .check {
  width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; margin: 0 auto;
}
.form-done h2 { font-size: 22px; margin-top: 18px; }
.form-done p { font-size: 15px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--wash); border-top: 1px solid var(--line-soft); }
.site-footer .shell {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  padding: 28px var(--pad); font-size: 13px; color: var(--muted-soft);
}
.site-footer .who { display: flex; align-items: center; gap: 8px; }
.site-footer .who img { width: 20px; height: 20px; border-radius: 5px; }
.site-footer .who b { font-weight: 700; color: var(--brand); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.site-footer nav a { color: var(--muted-soft); }
.site-footer nav a:hover { color: var(--brand); }

.cookie {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--navy); color: #e7ebf2; padding: 14px 20px;
  flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center;
  font-size: 13.5px; box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15);
}
.cookie.show { display: flex; }
.cookie a { color: var(--on-navy-soft); text-decoration: underline; }
.cookie button {
  background: var(--white); color: var(--brand); border: none;
  padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: 13px;
  cursor: pointer; font-family: inherit;
}

/* ------------------------------------------------------- feature spotlight */
/* One feature gets the long-form treatment on the Features page: the one
   schools and parents actually open every day. */

.spotlight { padding: var(--section) 24px; background: var(--wash); }
.spotlight .inner { max-width: var(--shell); margin: 0 auto; }
.spotlight .eyebrow {
  display: inline-block; background: rgba(29, 58, 107, 0.08); color: var(--brand);
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.spotlight h2 { font-size: clamp(26px, 4vw, 40px); margin-top: 16px; }
.spotlight > .inner > p { font-size: 17px; color: var(--muted); line-height: 1.6; margin: 14px 0 0; max-width: 62ch; }
.spotlight .split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 48px); align-items: start; margin-top: 40px;
}

/* A mock thread. Illustrative, so it is aria-hidden — a screen reader gets the
   three points beside it, which say the same thing without the theatre. */
.thread { background: var(--white); border-radius: 22px; padding: 20px; border: 1px solid var(--line); }
.thread .who { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.thread .avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.thread .who b { display: block; font-size: 14.5px; color: var(--ink); }
.thread .who span { font-size: 12.5px; color: var(--muted-soft); }
.bubble { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; margin-top: 12px; }
.bubble-in  { background: var(--wash); color: var(--ink-soft); border-bottom-left-radius: 5px; }
.bubble-out { background: var(--brand); color: var(--white); margin-left: auto; border-bottom-right-radius: 5px; }
.attach {
  display: flex; align-items: center; gap: 9px; margin-top: 10px; margin-left: auto;
  max-width: 84%; background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 12px; font-size: 13.5px; color: var(--ink-soft);
}
.attach .kind {
  flex-shrink: 0; background: #b3261e; color: var(--white); font-size: 10px; font-weight: 700;
  padding: 3px 6px; border-radius: 4px; letter-spacing: 0.5px;
}
.thread .quiet {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--muted-soft); text-align: center;
}

.spot-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; }
.spot-points h3 { font-size: 17px; letter-spacing: -0.2px; }
.spot-points p { font-size: 14.5px; color: var(--muted-soft); line-height: 1.6; margin: 5px 0 0; }

/* The same story as a clock, for anyone who reads a sequence faster than prose. */
.timeline { margin-top: clamp(32px, 5vw, 52px); }
.timeline h3 { font-size: 19px; margin-bottom: 18px; }
.timeline ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.timeline li { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.timeline .when { font-size: 12.5px; font-weight: 700; letter-spacing: 0.8px; color: var(--brand-lift); text-transform: uppercase; }
.timeline p { font-size: 14px; color: var(--muted-soft); line-height: 1.55; margin: 7px 0 0; }

/* What a school gets, stated under the hero. Facts about the product, not
   social proof — there are no customer logos to show yet, and inventing them
   is not an option. */
/* A wrapping centred flex row was the wrong tool: the four items are
   126/176/113/156px wide, so at 600px it put three on one line and orphaned
   'Local support, Sariaya' on its own, and at 390px it made a ragged
   staircase. A two-column grid below the nav's breakpoint puts them in
   aligned pairs with the dots in two tidy columns; above it they all fit one
   row (571px of text plus gaps, inside 861px) so no orphan is possible. */
.trust-strip {
  list-style: none; margin: 26px auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, auto);
  justify-content: center; justify-items: start;
  gap: 12px 28px; width: fit-content;
  font-size: 13.5px; font-weight: 600; color: var(--muted-soft);
  text-align: left;
}
@media (min-width: 861px) {
  .trust-strip { grid-template-columns: repeat(4, auto); gap: 0 26px; }
}
.trust-strip li { display: flex; align-items: center; gap: 8px; }
.trust-strip li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-lift); flex-shrink: 0;
}


/* ------------------------------------------------------------- contact page */
/* The two columns were top-aligned and wildly different heights, so the page
   looked like it had been abandoned halfway down the left side. The details
   column now sticks while the form scrolls, and the form is a white card on
   the wash rather than a grey card on white — the eye lands on the thing the
   page exists for. */
/* One column by default. The asymmetric two-column layout only above the
   breakpoint: fixed minimums of 260px + 320px cannot fit a 390px phone, and
   forcing them produced 238px of horizontal scroll. */
.contact-grid {
  align-items: start;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  padding-bottom: var(--section);
}
@media (min-width: 861px) {
  .contact-grid { grid-template-columns: minmax(240px, 0.85fr) minmax(320px, 1.15fr); }
}
@media (min-width: 861px) {
  .contact-aside { position: sticky; top: 84px; }
}
.contact-form-panel {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(21, 34, 56, 0.07);
}
.info-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: border-color 0.2s ease;
}
.info-card:hover { border-color: var(--line); }
.contact-aside dl { gap: 10px; }

/* The submit button should look like the most important control on the page. */
.form-submit { font-size: 16.5px; padding: 15px; letter-spacing: 0.1px; }

/* ------------------------------------------------------------- the app hero
   Two columns from 900px up: the pitch reads on the left, the running app sits
   on the right. Below that it stacks, demo last, because on a phone the reader
   is already holding the thing the screenshot is of. */
.app-hero {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 88px) var(--pad) clamp(36px, 6vw, 64px);
}
@media (min-width: 900px) {
  .app-hero { grid-template-columns: 1fr minmax(340px, 390px); }
}
/* Left-aligned on purpose: centred text beside an image never settles. */
.app-hero__copy { text-align: left; }
.app-hero__copy .lede { margin-left: 0; margin-right: 0; }
.app-hero__copy .pill-row { justify-content: flex-start; }
.app-hero__actions { margin-top: 28px; justify-content: flex-start; }
.app-hero__demo { justify-self: center; width: 100%; max-width: 390px; }
@media (max-width: 899px) {
  .app-hero { text-align: center; }
  .app-hero__copy { text-align: center; }
  .app-hero__copy .lede { margin-left: auto; margin-right: auto; }
  .app-hero__copy .pill-row,
  .app-hero__actions { justify-content: center; }
}

/* ------------------------------------------------------- the live app demo
   A poster that becomes the real app when somebody asks for it. The frame is
   phone-shaped because the thing inside it is a phone app; letting it fill a
   desktop column would show a layout no parent will ever see. */
.app-demo {
  margin: 0 auto;
  max-width: 390px;
}
.app-demo__poster {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 1px solid var(--rule, #d8d3c7);
  border-radius: 22px;
  background: none;
  cursor: pointer;
  line-height: 0;
  /* Cropped from the top rather than shown whole. The full screen is 780px
     tall, which pushed the hero — and the button that starts the demo — off
     the bottom of a laptop. The top of the app is the recognisable part
     anyway: the child's card and the row of actions.
     The crop is this element's overflow, not object-fit: cover on the image.
     cover scales until it fills both axes, which on a portrait screenshot in a
     shorter box sliced the sides off — the second child card and the register
     row lost their right edge. Capping height here and letting the image keep
     its own aspect ratio cuts the bottom only. */
  max-height: clamp(400px, 50vh, 540px);
  overflow: hidden;
}
.app-demo__poster img { width: 100%; height: auto; display: block; }
/* The cut edge, faded, so it reads as a screen continuing past the frame
   rather than an image that failed to load. */
.app-demo__poster::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 84px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
  z-index: 1;
}
.app-demo__poster:hover img,
.app-demo__poster:focus-visible img { filter: brightness(0.94); }
.app-demo__poster::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0.42));
  transition: background .15s ease;
}
.app-demo__poster:hover::after,
.app-demo__poster:focus-visible::after {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.32), rgba(15, 23, 42, 0.52));
}
.app-demo__play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #2563eb;
  color: #fff;
  font: 600 15px/1 system-ui, sans-serif;
  padding: 13px 22px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28);
}
/* Below the poster, not inside it. Absolutely positioned within a cropped
   image, it sat outside the visible area and nobody ever saw the warning about
   the download. */
.app-demo__note {
  display: block;
  margin-top: 10px;
  font: 500 12px/1.4 system-ui, sans-serif;
  color: var(--muted, #475569);
  text-align: center;
}
.app-demo iframe {
  width: 100%;
  /* Not a flat 780px. The poster above it is capped near 450px, so a fixed
     780px frame made the page lurch on click and pushed the top of the app —
     the part worth seeing — off the bottom. Bounded by the viewport instead,
     with a floor that still leaves a phone screen usable. */
  height: clamp(520px, calc(100vh - 150px), 780px);
  border: 1px solid var(--rule, #d8d3c7);
  border-radius: 22px;
  background: #f6f7fb;
}
.app-demo__creds {
  max-width: 390px;
  margin: 12px auto 0;
  font: 400 14px/1.5 system-ui, sans-serif;
  text-align: center;
}