/* ==========================================================================
   Platform pages (layouts/platform.html): the public website's few extras on
   top of design.css. Everything else is Bootstrap 5 (Tabler) and the design
   system's own components; colours and radii come from its tokens, so the
   website follows light/dark and glass exactly like the school system.
   ========================================================================== */

/* The website's body grows with the page, so the sticky top bar stays in view all the way down
   (at the screen's height, the bar would leave with the body after one screen). */
body.pf-site { height: auto; min-height: 100vh; }
/* Menu links to a section land below the sticky top bar, not under it. */
html:has(body.pf-site) { scroll-padding-top: 84px; }

/* Website top bar: the system's glass top bar, full width. */
.pf-navbar { position: sticky; top: 0; z-index: 1030; background: var(--tw-surface-raised); border-bottom: 1px solid var(--tw-border); }
.pf-navbar .navbar { min-height: 68px; }
.pf-navbar .nav-link { font-weight: 500; color: var(--tw-text); }
.pf-navbar .nav-link:hover, .pf-navbar .nav-link.active { color: var(--tw-primary); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root.glass .pf-navbar { background-color: var(--glass-tint-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom-color: var(--glass-border); }
}

/* "by Twincom" beside the Scuola wordmark, and "Powered by Twincom" in the footer. Twincom's logo is
   blue and red on white; on a dark page it sits on a white plate so it keeps its colours. */
.pf-by { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--tw-border);
         font-size: 13px; font-weight: 600; color: var(--tw-text); }
.pf-by > span { font-weight: 400; color: var(--tw-muted); }
.pf-by img { width: 22px; height: 22px; }
.pf-powered { display: inline-flex; flex-direction: column; gap: 6px; }
.pf-powered span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tw-muted); }
.pf-powered img { width: 140px; height: auto; }
[data-bs-theme="dark"] .pf-powered img { background: #fff; border-radius: 6px; padding: 6px 10px; }
[data-bs-theme="dark"] .pf-by img { background: #fff; border-radius: 50%; padding: 2px; }

/* Sections */
.pf-section { padding: 88px 0; position: relative; }
.pf-section-sm { padding: 56px 0; }
.pf-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tw-accent); margin-bottom: .75rem; }
.pf-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.pf-title { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--tw-text); }
.pf-lead { font-size: 1.1rem; color: var(--tw-muted); max-width: 680px; }

/* Hero: the login page's colour orbs, contained in the hero. */
.pf-hero { position: relative; overflow: hidden; padding: 72px 0 96px; }
.pf-hero .login-orbs { position: absolute; }
.pf-hero > .container-xl { position: relative; z-index: 1; }
.pf-hero h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; color: var(--tw-text); }
.pf-hero h1 .text-accent { color: var(--tw-accent); }
.pf-hero .pf-lead { font-size: 1.2rem; }

/* Device frames (_macbook.html, _iphone.html). Sizes are in cqw, so a frame looks the
   same at any width; device colours are fixed, like the real hardware, in light and dark. */
.pf-hero-shot { position: relative; }

/* MacBook: thin black bezel, camera notch, macOS menu bar, Safari window, aluminium base. */
.pf-mac { container-type: inline-size; margin: 0; }
.pf-mac-lid { margin: 0 6.5%; padding: .55cqw .55cqw 0; background: #0e0e10; border-radius: 2.2cqw 2.2cqw 0 0;
              box-shadow: 0 0 0 1px #9ea1a6, 0 0 0 2px #d9dade; }
.pf-mac-screen { position: relative; overflow: hidden; background: #f3f4f6; border-radius: 1.7cqw 1.7cqw 0 0; }
.pf-mac-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 11cqw; height: 1.9cqw;
                background: #0e0e10; border-radius: 0 0 .9cqw .9cqw; }
.pf-mac-menubar { display: flex; align-items: center; gap: 1.6cqw; height: 2.6cqw; padding: 0 1.8cqw; font-size: 1.15cqw;
                  color: #1d1d1f; background: rgba(236, 238, 242, .92); white-space: nowrap; }
.pf-mac-menubar b { font-weight: 600; }
.pf-mac-apple svg { width: 1.15cqw; height: 1.4cqw; fill: #1d1d1f; display: block; }
.pf-mac-window { margin: 1cqw 1.4cqw 0; border-radius: 1cqw 1cqw 0 0; overflow: hidden; background: #fff;
                 box-shadow: 0 .6cqw 2.4cqw rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .08); }
.pf-mac-toolbar { display: flex; align-items: center; gap: .75cqw; height: 3.6cqw; padding: 0 1.4cqw;
                  background: #f6f6f7; border-bottom: 1px solid #e3e3e6; }
.pf-mac-toolbar i { width: 1.05cqw; height: 1.05cqw; border-radius: 50%; }
.pf-mac-toolbar i:nth-child(1) { background: #ff5f57; } .pf-mac-toolbar i:nth-child(2) { background: #febc2e; } .pf-mac-toolbar i:nth-child(3) { background: #28c840; }
.pf-mac-address { display: flex; align-items: center; justify-content: center; gap: .6cqw; margin: 0 auto; width: 42%;
                  height: 2.3cqw; font-size: 1.2cqw; color: #4b4b52; background: #e9e9ec; border-radius: .7cqw;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-mac-address svg { width: .8cqw; height: 1cqw; fill: #8a8a90; flex: none; }
.pf-mac-window img { display: block; width: 100%; height: auto; }
.pf-mac-base { position: relative; height: 2.1cqw; border-radius: 0 0 4cqw 4cqw / 0 0 1.6cqw 1.6cqw;
               background: linear-gradient(#e4e5e8, #c3c5c9 55%, #9b9ea3); box-shadow: 0 2.5cqw 4cqw -2cqw rgba(15, 23, 42, .45); }
.pf-mac-base::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 14%; height: 45%;
                       background: linear-gradient(#b5b7bb, #cfd1d4); border-radius: 0 0 1cqw 1cqw; }

/* A plain screenshot (the showcases): rounded corners, a thin border and a soft shadow, no device. */
.pf-screenshot { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--tw-border);
                 box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .35); }

/* iPhone 17: 402 × 874 points, a very thin border, Dynamic Island, status bar, home indicator. */
.pf-iphone { container-type: inline-size; padding: 1.4%; background: #1b1b1d; border-radius: 15% / 7%;
             box-shadow: 0 0 0 1px #6f7176, 0 30px 60px -20px rgba(15, 23, 42, .55); }
.pf-iphone-screen { position: relative; aspect-ratio: 402 / 874; overflow: hidden; background: #fafcfb; border-radius: 13.7% / 6.3%; }
.pf-iphone-screen img { position: absolute; left: 0; right: 0; top: 7.1%; width: 100%; height: 92.9%; object-fit: cover; object-position: top; }
.pf-iphone-status { position: absolute; inset: 0 0 auto; height: 7.1%; display: flex; align-items: center; justify-content: space-between;
                    padding: 1.2cqw 8cqw 0 11cqw; color: #000; }
.pf-iphone-time { font-size: 4.3cqw; font-weight: 600; letter-spacing: -.01em; }
.pf-iphone-island { position: absolute; left: 50%; top: 2.7cqw; transform: translateX(-50%); width: 31cqw; height: 9.2cqw;
                    background: #000; border-radius: 999px; }
.pf-iphone-icons { display: flex; align-items: center; gap: 1.5cqw; }
.pf-iphone-icons svg { height: 3cqw; width: auto; fill: currentColor; }
.pf-iphone-home { position: absolute; left: 50%; bottom: 2cqw; transform: translateX(-50%); width: 34.6cqw; height: 1.25cqw;
                  background: rgba(0, 0, 0, .85); border-radius: 999px; }

/* The hero: the MacBook with the iPhone in front, bottom right. */
.pf-hero-phone { position: absolute; width: 24%; min-width: 120px; right: -1%; bottom: -8%; z-index: 2; }
.pf-float { position: absolute; left: -4%; bottom: 10%; max-width: 270px; }
@media (max-width: 991.98px) {
  .pf-float { left: 8px; bottom: -24px; }
  .pf-hero-phone { right: 4px; bottom: -36px; width: 27%; }
  .pf-hero { padding: 40px 0 88px; }
}

/* Plan cards: the recommended one stands out with the brand colour. */
.pf-plan-featured { border: 2px solid var(--tw-primary) !important; }
.pf-price { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; color: var(--tw-text); }

/* Call to action band: the brand colour behind glass orbs. */
.pf-cta { position: relative; overflow: hidden; border-radius: calc(var(--tw-radius-card) + 8px); padding: 64px 32px; color: #fff;
          background: linear-gradient(140deg, var(--brand-secondary, #17236a), var(--brand-primary)); }
.pf-cta::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -160px; top: -260px; background: var(--brand-accent); filter: blur(90px); opacity: .45; }
.pf-cta > * { position: relative; z-index: 1; }
.pf-cta h2 { color: #fff; }

/* Footer */
.pf-footer { background: linear-gradient(135deg, #131936 0%, #1f3080 100%); color: #fff; }
.pf-footer a { text-decoration: none; }
.pf-footer-tag { color: rgba(255, 255, 255, .7); font-size: .95rem; }
.pf-footer-pill { display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25); color: #fff !important; font-weight: 500; transition: background .15s, border-color .15s; }
.pf-footer-pill:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.pf-footer-copy { color: rgba(255, 255, 255, .55); font-size: .85rem; }

/* Phones: a 16px gutter, and nothing (the plan ribbon, the hero's phone) wider than the screen. */
.pf-main { overflow-x: clip; }
@media (max-width: 575.98px) {
  .pf-main .container-xl, .pf-navbar .container-xl, .pf-footer .container-xl { padding-left: 16px; padding-right: 16px; }

  /* Phones: tighter spacing, phone-sized type, full-width buttons. */
  .pf-hero { padding: 28px 0 56px; }
  .pf-section { padding: 52px 0; }
  .pf-section.pt-0 { padding-top: 0; }
  .pf-section-sm { padding: 28px 0; }
  .pf-hero h1 { font-size: 2.2rem; }
  .pf-hero .badge { white-space: normal; text-align: left; line-height: 1.45; }
  .pf-lead, .pf-hero .pf-lead { font-size: 1.02rem; }
  .pf-title { font-size: 1.65rem; }
  .pf-eyebrow { margin-bottom: .5rem; }
  .pf-main .h1 { font-size: 1.5rem; }
  .pf-main .fs-3 { font-size: 1rem !important; }
  .pf-main .mb-5 { margin-bottom: 2rem !important; }
  #features .list-unstyled { font-size: .95rem; }
  .pf-actions > .btn { flex: 1 1 100%; width: 100%; }
  .pf-actions > .btn + .btn { margin-top: 0; }
  .pf-levels { justify-content: flex-start !important; gap: 10px 18px !important; }
  .pf-levels > :first-child { flex-basis: 100%; }
  .pf-cta { padding: 40px 20px; }
  .pf-navbar .navbar-nav .nav-link { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Demo buttons fixed on every page: bottom right on wide screens, a bar along the bottom on phones. */
.pf-fab { position: fixed; right: 24px; bottom: 24px; z-index: 1040; display: flex; gap: 8px; }
.pf-fab .btn { border-radius: 999px; }
@media (max-width: 575.98px) {
  .pf-fab { left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
            background: var(--tw-surface-raised); border-top: 1px solid var(--tw-border); }
  .pf-fab > .btn { flex: 1 1 0; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
  .pf-fab-contact .btn { padding-left: 14px; padding-right: 14px; }
  .pf-footer { padding-bottom: 96px !important; }
}


/* Parents' portal band and its three phones (landing page, 2026-11-10). */
.pf-band { background: linear-gradient(180deg, rgba(var(--tblr-primary-rgb, 38, 59, 148), .05), rgba(var(--tblr-primary-rgb, 38, 59, 148), .02)); }
.pf-phones .pf-iphone { max-width: 230px; margin: 0 auto; }
@media (min-width: 768px) { .pf-phone-raise { transform: translateY(-28px); } }