/* koleeza front door — landing, pricing and about. Extracted from docs/front-door/koleeza-landing-proposal.html (approved 2026-09-23); the pricing and about pages reuse it. Not loaded on the app or legal pages. */
  :root{--navy:#234E70;--cyan:#27C5D9;--gold:#FFC928;--coral:#FF6B4A;--ink:#1D3A57;--muted:#5B7590;--cream:#FFF8E6;--wash:#F4FBFD;--line:#E4ECF2}
  *{box-sizing:border-box}
  body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:900;border-radius:999px;padding:.95rem 1.5rem;font-size:1.05rem;border:0;cursor:pointer;min-height:52px}
  .btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 8px 20px rgba(255,201,40,.45)}
  .btn-navy{background:var(--navy);color:#fff}
  .btn-ghost{background:#fff;color:var(--navy);border:2px solid var(--line)}
  /* nav */
  .nav{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:5}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
  .nav img{height:36px}
  .nav .links{display:flex;gap:1.2rem;align-items:center;font-weight:800;color:var(--muted)}
  .nav .links .btn{padding:.6rem 1.1rem;min-height:40px;font-size:.95rem}
  /* hero */
  .hero{background:radial-gradient(900px 420px at 15% 0%,#FFF1BF 0%,var(--cream) 45%,#fff 100%);padding:40px 0 28px;position:relative;overflow:hidden}
  .hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
  .kicker{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:2px solid #FFE38A;border-radius:999px;padding:.35rem .9rem;font-weight:900;font-size:.85rem;color:var(--navy)}
  .kicker i{width:10px;height:10px;border-radius:50%;background:var(--coral);display:inline-block}
  h1{font-size:clamp(2.3rem,6vw,3.9rem);line-height:1.05;margin:.8rem 0 .6rem;font-weight:900;letter-spacing:-.02em}
  h1 .hi{background:linear-gradient(transparent 55%,var(--gold) 55%);padding:0 .1em}
  .sub{font-size:1.15rem;color:var(--muted);font-weight:700;max-width:520px;margin:0 0 1.3rem}
  .cta{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
  .note{font-size:.9rem;color:var(--muted);font-weight:700;margin-top:.8rem}
  /* tablet */
  .tablet{width:100%;max-width:520px;margin:0 auto;background:#1b1b1f;border-radius:22px;padding:14px;box-shadow:0 30px 60px rgba(35,78,112,.25)}
  .screen{background:#fff;border-radius:12px;overflow:hidden;font-size:15px}
  .screen .top{background:var(--navy);color:#fff;padding:14px 16px;font-weight:900;display:flex;justify-content:space-between}
  .q{padding:16px}
  .q .tag{font-size:11px;font-weight:900;color:var(--cyan);letter-spacing:.08em;text-transform:uppercase}
  .q .stem{font-weight:900;font-size:17px;margin:.3rem 0 .8rem;color:var(--navy)}
  .opt{border:2px solid var(--line);border-radius:12px;padding:10px 12px;margin:.45rem 0;font-weight:800;display:flex;justify-content:space-between;align-items:center}
  .opt.ok{border-color:#16a34a;background:#eafaf0;color:#166534}
  .opt.ok b{background:#16a34a;color:#fff;border-radius:50%;width:22px;height:22px;display:inline-grid;place-items:center;font-size:12px}
  .why{background:var(--cream);border-radius:12px;padding:10px 12px;font-weight:700;color:var(--ink);font-size:13px;margin-top:.6rem}
  .why b{color:var(--navy)}
  /* proof strip */
  .strip{background:var(--navy);color:#fff}
  .strip .wrap{display:flex;gap:1.5rem;justify-content:space-between;flex-wrap:wrap;padding:16px 20px;font-weight:800;font-size:.95rem}
  .strip span b{color:var(--gold)}
  /* steps */
  section{padding:56px 0}
  h2{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:900;letter-spacing:-.02em;margin:0 0 .4rem;color:var(--navy)}
  .lead{color:var(--muted);font-weight:700;font-size:1.05rem;margin:0 0 1.8rem;max-width:640px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .step{background:#fff;border:2px solid var(--line);border-radius:22px;padding:22px}
  .step .n{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:1.3rem;color:#fff;margin-bottom:.8rem}
  .step h3{margin:0 0 .3rem;font-size:1.15rem}
  .step p{margin:0;color:var(--muted);font-weight:700}
  /* subjects */
  .subjects{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .subj{border-radius:22px;padding:24px;color:#fff;position:relative;overflow:hidden;min-height:160px}
  .subj.m{background:linear-gradient(135deg,#1C5C8C,#27C5D9)}
  .subj.s{background:linear-gradient(135deg,#0F766E,#34D399)}
  .subj h3{margin:0 0 .3rem;font-size:1.4rem}
  .subj p{margin:0;font-weight:700;opacity:.92}
  .subj .pill{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.2);border-radius:999px;padding:.25rem .7rem;font-weight:900;font-size:.8rem}
  /* parent dashboard */
  .parent{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:center}
  .parent .ticks li{font-weight:700}
  .dash{background:#fff;border:2px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 24px 50px rgba(35,78,112,.14)}
  .dash .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem;font-weight:900;color:var(--navy)}
  .dash .hd span{font-size:.8rem;color:var(--muted);font-weight:800;background:var(--wash);border-radius:999px;padding:.2rem .6rem}
  .trow{display:grid;grid-template-columns:1.3fr 2fr auto;gap:12px;align-items:center;padding:.45rem 0;border-top:1px solid var(--line);font-weight:800;font-size:.92rem}
  .trow:first-of-type{border-top:0}
  .trow .bar{height:9px;border-radius:999px;background:#EEF2F6;overflow:hidden}
  .trow .bar i{display:block;height:100%;background:var(--cyan)}
  .trow.weak .bar i{background:var(--coral)}
  .trow .pct{min-width:2.6rem;text-align:right;color:var(--navy)}
  .help{margin-top:.9rem;background:var(--cream);border:2px solid #FFE38A;border-radius:14px;padding:.75rem .9rem;font-size:.88rem;font-weight:700;color:var(--ink)}
  .help b{color:var(--navy)}
  .plan-line{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:.9rem;font-size:.88rem;font-weight:800;color:var(--muted);flex-wrap:wrap}
  .plan-line .ok{color:#16a34a}
  .plan-line .btn{padding:.5rem .9rem;min-height:38px;font-size:.85rem}
  /* pricing */
  .price{background:var(--cream);border-radius:28px;padding:36px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;border:2px solid #FFE38A}
  .big{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:900;color:var(--navy);line-height:1}
  .big small{font-size:1rem;color:var(--muted);display:block;margin-top:.3rem;font-weight:800}
  .ticks{list-style:none;padding:0;margin:1rem 0 1.4rem;font-weight:800}
  .ticks li{margin:.4rem 0;padding-left:1.6rem;position:relative}
  .ticks li::before{content:"✓";position:absolute;left:0;color:#16a34a;font-weight:900}
  .momo{background:#fff;border-radius:22px;padding:22px;border:2px solid var(--line)}
  .momo .logo{display:inline-block;background:#FFCC00;color:#111;font-weight:900;padding:.3rem .7rem;border-radius:8px;margin-bottom:.6rem}
  .momo p{margin:.2rem 0;font-weight:700;color:var(--muted)}
  /* trust */
  .trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .trust div{background:var(--wash);border-radius:18px;padding:18px;font-weight:700;color:var(--ink)}
  .trust b{display:block;color:var(--navy);margin-bottom:.2rem}
  /* final */
  .final{background:var(--navy);color:#fff;text-align:center;border-radius:28px;padding:44px 24px}
  .final h2{color:#fff}
  footer{padding:28px 0 40px;color:var(--muted);font-weight:700;font-size:.9rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
  footer img{height:28px;opacity:.85}
  @media (max-width:700px){
    .hero .grid,.price{grid-template-columns:1fr}
    .steps,.subjects,.trust{grid-template-columns:1fr}
    .tablet{max-width:440px}
    .nav .links .plain{display:none}
    section{padding:40px 0}
    .cta .btn{width:100%}
  }
  /* pricing & about — the same front door, two more pages */
  .page-hero{padding:44px 0 28px}
  .page-hero .sub{max-width:640px}
  .subj .pill.price{background:var(--gold);color:var(--navy)}
  .examples{background:#fff;border:2px solid var(--line);border-radius:22px;overflow:hidden}
  .examples .ex{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px 20px;border-top:2px solid var(--line);font-weight:800;align-items:center}
  .examples .ex:first-child{border-top:0}
  .examples .ex small{display:block;color:var(--muted);font-weight:700;font-size:.88rem}
  .examples .ex b{color:var(--navy);font-size:1.15rem;white-space:nowrap}
  .examples .ex b small{display:inline;font-size:.8rem;margin-left:.2rem}
  .faq{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .qa{background:var(--wash);border-radius:18px;padding:18px 20px}
  .qa h3{margin:0 0 .3rem;font-size:1.05rem;color:var(--navy)}
  .qa p{margin:0;color:var(--muted);font-weight:700}
  .prose{max-width:720px}
  .prose p{color:var(--muted);font-weight:700;font-size:1.05rem;margin:.6rem 0}
  .prose h3{margin:1.6rem 0 .3rem;color:var(--navy);font-size:1.25rem}
  .prose strong{color:var(--navy)}
  .contact{background:var(--cream);border:2px solid #FFE38A;border-radius:22px;padding:22px;font-weight:800;color:var(--ink)}
  .contact a{text-decoration:underline;color:var(--navy)}
  @media (max-width:700px){.faq{grid-template-columns:1fr}}