/* Site-wide polish (2026-11-14): form states, hover/focus, gentle motion.
   Hand-written, loads after the Webflow CSS and fixes.css. Motion is off
   for people who ask their device to reduce it. */
:root{--apg-orange:var(--_variables---colors--brand-orange,#ff6b35);--apg-orange-hover:var(--_variables---colors--brand-orange-hover,#e55a2b);--apg-ink:var(--_variables---colors--heading,#1b2541);--apg-red:#d93025;--apg-green:var(--_variables---colors--green,#2bb656)}
html{-webkit-tap-highlight-color:transparent}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:#ffe1d3;color:var(--apg-ink)}
[id]{scroll-margin-top:96px}

/* ---- Forms ---- */
.w-form input:not([type=hidden]):not([type=submit]):not([type=checkbox]):not([type=radio]),.w-form select,.w-form textarea{transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.w-form input:not([type=submit]):not([type=checkbox]):not([type=radio]):hover,.w-form select:hover,.w-form textarea:hover{border-color:rgba(27,37,65,.28)}
.w-form input:not([type=submit]):not([type=checkbox]):not([type=radio]):focus,.w-form select:focus,.w-form textarea:focus{outline:none;border-color:var(--apg-orange)!important;box-shadow:0 0 0 3px rgba(255,107,53,.16)}
.w-form [aria-invalid],.w-form .apg-invalid:not(.apg-phone):not(.cu-phone-wrap){border-color:var(--apg-red)!important;background-color:#fffafa}
.w-form [aria-invalid]:focus{box-shadow:0 0 0 3px rgba(217,48,37,.14)!important}
.apg-invalid .cu-ms-trigger,.apg-invalid [class*="ms-trigger"],.apg-invalid [class*="ms-toggle"]{border-color:var(--apg-red)!important}
.apg-err{display:flex;align-items:center;gap:6px;margin:6px 0 2px;color:var(--apg-red);font-size:13px;line-height:1.35;font-weight:500;animation:apg-pop .18s ease-out}
.apg-err::before{content:"!";flex:none;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--apg-red);color:#fff;font-size:11px;font-weight:700}
.apg-phone{display:flex;gap:8px;width:100%}
.apg-phone>input{flex:1;min-width:0;width:100%!important}
.apg-code{flex:none;width:132px;height:auto;align-self:stretch;border:1px solid rgba(0,0,0,.12);border-radius:8px;padding:0 6px;font:inherit;font-size:15px;color:var(--apg-ink);background-color:#fff;cursor:pointer}
@media (max-width:479px){.apg-code{width:112px;font-size:14px}}
.w-form [type=submit]{transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease,opacity .2s}
.w-form [type=submit].apg-busy{cursor:progress;opacity:.85;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='3'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px 18px;background-position:calc(50% - 72px) 50%}
.w-form-done:has(.apg-done),div:has(>.apg-done){background:none!important;padding:0!important}
.apg-done{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 24px;border-radius:16px;background:linear-gradient(180deg,#f1fbf4 0%,#fff 100%);border:1px solid #cfeedd;text-align:center;color:var(--apg-ink);animation:apg-rise .45s cubic-bezier(.2,.7,.2,1)}
.apg-done:focus,.w-form-done:focus{outline:none}
.apg-done strong{font-size:20px;line-height:1.3;font-weight:700}
.apg-done p{margin:0;max-width:30em;color:var(--_variables---colors--para,#475569);font-size:15px;line-height:1.55}
.apg-done__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--apg-green);color:#fff;box-shadow:0 8px 20px rgba(43,182,86,.28);animation:apg-pop .4s .1s cubic-bezier(.2,.9,.3,1.4) both}
.apg-fail{padding:14px 16px;border-radius:10px;background:#fff4f3;border:1px solid #f6c9c5;color:#a1251b;font-size:14px;line-height:1.5;text-align:left}
.apg-fail a{color:inherit;text-decoration:underline}
.w-form-fail:has(.apg-fail){background:none;padding:0;margin-top:12px}

.apg-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:12px 0 4px;color:var(--_variables---colors--para,#475569);font-size:13px;line-height:1.4}
.apg-trust span{display:inline-flex;align-items:center;gap:6px}
.apg-trust span::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--apg-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}

/* ---- Buttons, links, cards ---- */
.w-button,.button-wrap,.ag-sticky-cta-btn,.w-pagination-next{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
a:focus-visible,button:focus-visible,.w-button:focus-visible,summary:focus-visible,[role=tab]:focus-visible,.w-tab-link:focus-visible{outline:2px solid var(--apg-orange);outline-offset:3px;border-radius:6px}
.lp-t-card,.tutor-card,.wall-card,[class*="testimonial-card"],[class*="score-card"],.ag-faq-item{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
@media (hover:hover){
  .w-button:hover,.button-wrap:hover,.ag-sticky-cta-btn:hover,.w-form [type=submit]:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,107,53,.25)}
  .w-button:active,.button-wrap:active,.w-form [type=submit]:active{transform:translateY(0);box-shadow:none}
  .lp-t-card:hover,.tutor-card:hover,.wall-card:hover,[class*="testimonial-card"]:hover,[class*="score-card"]:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(16,24,40,.08)}
  .ag-faq-item:hover{border-color:rgba(255,107,53,.35)}
}

/* Header gets a soft shadow once the page scrolls (polish.js). */
.w-nav,.navbar{transition:box-shadow .25s ease}
.apg-scrolled .w-nav,.apg-scrolled .navbar{box-shadow:0 6px 24px rgba(16,24,40,.07)}

/* ---- Motion ---- */
@keyframes apg-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes apg-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes apg-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  /* Sections fade up as they scroll in (polish.js marks only what starts below the fold). */
  .apg-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--apg-delay,0s)}
  .apg-reveal.apg-in{opacity:1;transform:none}
  /* Tabs (score tables) and FAQ answers ease in instead of popping. */
  .w-tab-pane.w--tab-active{animation:apg-fade .4s cubic-bezier(.2,.7,.2,1)}
  details[open]>:not(summary){animation:apg-fade .3s ease-out}
  [data-apg-more]>.w-dyn-item.apg-shown{animation:apg-fade .45s cubic-bezier(.2,.7,.2,1) both}
}
@media (prefers-reduced-motion:reduce){.apg-reveal{opacity:1!important;transform:none!important}*{scroll-behavior:auto!important}}

/* ---- Laptop text size (2026-11-14): Webflow sizes text for big monitors
   (body 15px, labels 13px), small on 13–16" laptops. Most sizes are rem,
   so a slightly larger root scales text with its spacing; a few px-sized
   classes are bumped directly. ---- */
@media (min-width:1280px){html{font-size:17.5px}}
@media (min-width:1680px){html{font-size:18px}}