:root{
    --navy:#17274D; --navy-2:#0F1B36; --navy-3:#1E3160;
    --teal:#2BC49A; --teal-deep:#109E77; --teal-dark:#0D8A67;
    --ink:#152238; --muted:#5B6579; --slate:#4B5A73;
    --bg:#FFFFFF; --bg-soft:#F4F8FA; --bg-mint:#EAF7F2;
    --line:#E3E9F0; --line-dark:rgba(255,255,255,.12); --radius:16px;
    --shadow:0 1px 2px rgba(21,34,56,.05), 0 10px 34px rgba(21,34,56,.08);
    --shadow-lg:0 2px 4px rgba(21,34,56,.05), 0 26px 64px rgba(21,34,56,.13);
    --maxw:1140px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--bg); color:var(--ink);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    line-height:1.6; -webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{line-height:1.12; letter-spacing:-.02em; margin:0}
  h1{font-size:clamp(1.85rem,3.9vw,3rem); font-weight:700}
  h2{font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:700}
  h3{font-size:1.12rem; font-weight:700}
  p{margin:0}
  a{color:inherit}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  .eyebrow{font-size:.76rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--teal-deep)}
  .eyebrow.on-dark{color:var(--teal)}
  .lede{font-size:1.15rem; color:var(--muted); max-width:62ch}
  .serif-em{font-family:Fraunces,Georgia,serif; font-style:italic; font-weight:500; color:var(--teal-deep)}

  .btn{display:inline-flex; align-items:center; gap:9px; justify-content:center;
    padding:14px 26px; border-radius:11px; font-weight:700; font-size:.95rem;
    text-decoration:none; border:2px solid transparent; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--teal-deep); color:#fff; box-shadow:0 8px 24px rgba(16,158,119,.35)}
  .btn-primary:hover{background:var(--teal-dark)}
  .btn-outline{background:#fff; color:var(--navy); border-color:var(--line)}
  .btn-outline:hover{border-color:var(--teal-deep); color:var(--teal-deep)}
  .btn-lg{padding:16px 30px; font-size:1.02rem}

  /* nav — navy */
  .nav{position:sticky; top:0; z-index:60; background:rgba(15,27,54,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-dark)}
  .nav-in{display:flex; align-items:center; justify-content:space-between; height:64px}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff}
  .brand .word{font-family:Fraunces,Georgia,serif; font-size:1.45rem; font-weight:500}
  .nav-links{display:flex; align-items:center; gap:28px}
  .nav-links a{color:#C6D0E0; text-decoration:none; font-size:.91rem; font-weight:600}
  .nav-links a:hover{color:#fff}
  .nav-links .btn{padding:11px 20px; color:#fff}
  @media(max-width:880px){ .nav-links a:not(.btn){display:none} }

  /* hero — light, condensed, with the live site's animated card */
  .hero{position:relative; overflow:hidden; padding:60px 0 66px;
    background:
      radial-gradient(1000px 480px at 85% -10%, rgba(43,196,154,.16), transparent 60%),
      radial-gradient(760px 420px at 5% 110%, rgba(23,39,77,.06), transparent 60%),
      linear-gradient(180deg,#FBFDFE,var(--bg-soft))}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
  @media(max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:36px} }
  .hero .lede{margin-top:14px; font-size:1.02rem}
  .hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:23px}
  .hero-proof{display:flex; gap:8px 22px; flex-wrap:wrap; margin-top:19px; font-size:.84rem; color:var(--slate); font-weight:600}
  .hero-proof span{display:inline-flex; align-items:center; gap:7px}
  .tick{color:var(--teal-deep); font-weight:800}
  .pill{display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px;
    background:var(--bg-mint); border:1px solid #BFE8DA; color:var(--teal-dark);
    font-size:.79rem; font-weight:700; letter-spacing:.03em}
  .dot{width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(43,196,154,.22)}
  .hero-show{position:relative; width:100%; aspect-ratio:1000/890;
    border-radius:22px; overflow:hidden; box-shadow:0 26px 64px rgba(4,12,30,.35);
    background:url(penna-hero-card-poster.jpg) center/cover}
  .hero-show .slide{position:absolute; inset:0; opacity:0; transition:opacity .9s ease; line-height:0}
  .hero-show .slide.s-active{opacity:1}
  .hero-show video{width:100%; height:100%; object-fit:cover; display:block}
  .hero-show svg{width:100%; height:100%; display:block}
  .show-dots{position:absolute; left:0; right:0; bottom:12px; display:flex; gap:7px; justify-content:center; z-index:2}
  .show-dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); transition:background .3s ease, transform .3s ease}
  .show-dots i.on{background:var(--teal); transform:scale(1.25)}
  @media(prefers-reduced-motion:reduce){
    .hero-show video{display:none}
    .hero-show .slide{transition:none}
    .show-dots{display:none} }

  section{padding:69px 0; scroll-margin-top:76px}
  .sec-head{max-width:72ch; margin-bottom:36px}
  .sec-head h2{margin:14px 0 16px}
  .center{margin-left:auto; margin-right:auto; text-align:center}
  .center .lede{margin-left:auto; margin-right:auto}

  /* why cards (from live site) */
  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  @media(max-width:900px){ .cards{grid-template-columns:1fr} }
  .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:28px; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
  .card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
  .card h3{margin:16px 0 9px}
  .card p{font-size:.94rem; color:var(--muted)}
  .ic-box{width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
    background:linear-gradient(145deg,#E4F5EF,#D3EFE4); color:var(--teal-deep)}

  /* modules grid (from modular concept) */
  .modules{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  @media(max-width:960px){ .modules{grid-template-columns:1fr 1fr} }
  @media(max-width:640px){ .modules{grid-template-columns:1fr} }
  .mod{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;
    box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column}
  .mod:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
  .mod .bic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
    background:linear-gradient(145deg,#E4F5EF,#D3EFE4); color:var(--teal-deep); margin-bottom:14px}
  .mod h3{margin-bottom:8px}
  .mod p{font-size:.92rem; color:var(--muted); flex:1}
  .mod .tag{margin-top:14px; align-self:flex-start; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    padding:4px 11px; border-radius:6px}
  .tag.core-tag{color:var(--teal-dark); background:var(--bg-mint); border:1px solid #BFE8DA}
  .tag.addon-tag{color:#8A5A00; background:#FDF3DF; border:1px solid #F2DDB6}

  /* pricing calculator (from modular concept) */
  .calc{background:linear-gradient(170deg,var(--navy-2),var(--navy)); color:#fff; border-radius:24px;
    padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; box-shadow:var(--shadow-lg)}
  @media(max-width:900px){ .calc{grid-template-columns:1fr; padding:30px} }
  .calc h2{color:#fff}
  .calc .lede{color:#A8B4C8}
  .calc-panel{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:26px}
  .calc-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1)}
  .calc-row label{font-size:.92rem; font-weight:600; color:#D6DEEC}
  .stepper{display:inline-flex; align-items:center; gap:2px; background:rgba(255,255,255,.08); border-radius:10px; padding:3px}
  .stepper button{width:34px; height:34px; border:0; border-radius:8px; background:transparent; color:#fff;
    font-size:1.15rem; font-weight:700; cursor:pointer; line-height:1}
  .stepper button:hover{background:rgba(255,255,255,.14)}
  .stepper b{min-width:34px; text-align:center; font-size:1.02rem; font-variant-numeric:tabular-nums}
  .calc-total{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:18px}
  .calc-total b{font-size:2.6rem; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
  .calc-total span{color:#A8B4C8; font-size:.88rem}
  .calc-note{font-size:.8rem; color:#A8B4C8; margin-top:14px; line-height:1.55}
  .calc .btn{margin-top:20px; width:100%}

  /* "what comes with it" table (from live site) */
  .included{margin-top:30px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
  .included h3{padding:22px 26px 4px}
  .included > p{padding:0 26px 18px; font-size:.9rem; color:var(--muted)}
  table{width:100%; border-collapse:collapse}
  th,td{text-align:left; padding:13px 26px; font-size:.9rem; border-top:1px solid var(--line)}
  th{background:#F7FAFD; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--slate); font-weight:700}
  td.num{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
  td small{display:block; font-weight:400; color:var(--muted); font-size:.79rem}
  .foot-note{padding:16px 26px; background:#F7FAFD; font-size:.82rem; color:var(--muted); border-top:1px solid var(--line)}
  @media(max-width:720px){ .included{overflow-x:auto} .included table{min-width:560px} }

  /* security (dark, from live site condensed) */
  .dark{background:linear-gradient(170deg,var(--navy-2),var(--navy)); color:#fff}
  .dark .lede{color:#A8B4C8}
  .sec-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  @media(max-width:900px){ .sec-list{grid-template-columns:1fr} }
  .sec-item{background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:14px; padding:22px}
  .sec-item h4{color:#fff; font-size:.97rem; margin:12px 0 6px}
  .sec-item p{font-size:.87rem; color:#A8B4C8}
  .sec-item .ic{width:36px; height:36px; border-radius:10px; background:rgba(43,196,154,.15); display:grid; place-items:center; color:var(--teal)}

  /* contact */
  .contact{background:var(--bg-soft)}
  .contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start}
  @media(max-width:940px){ .contact-grid{grid-template-columns:1fr; gap:34px} }
  .contact-ways{display:grid; gap:14px; margin-top:26px}
  .way{display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:13px; padding:15px 18px; text-decoration:none; box-shadow:var(--shadow); transition:transform .15s ease}
  .way:hover{transform:translateY(-2px)}
  .way .bic{flex:0 0 40px; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--bg-mint); color:var(--teal-deep)}
  .way b{display:block; font-size:.95rem}
  .way small{color:var(--muted); font-size:.82rem}
  form{background:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-lg); border:1px solid var(--line)}
  .f-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media(max-width:600px){ .f-row{grid-template-columns:1fr} }
  .field{margin-bottom:14px}
  label{display:block; font-size:.79rem; font-weight:700; color:var(--slate); margin-bottom:5px}
  input,select,textarea{width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:10px;
    font-family:inherit; font-size:.93rem; color:var(--ink); background:#FCFDFE}
  input:focus,select:focus,textarea:focus{outline:none; border-color:var(--teal-deep); box-shadow:0 0 0 3px rgba(43,196,154,.16)}
  textarea{resize:vertical; min-height:76px}
  .privacy{font-size:.78rem; color:var(--muted); margin-top:12px; padding:11px 13px; background:var(--bg-soft); border:1px solid var(--line); border-radius:9px}

  /* faq */
  details{background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:11px; overflow:hidden}
  summary{padding:17px 22px; font-weight:700; cursor:pointer; font-size:.98rem; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; color:var(--teal-deep); font-size:1.3rem; font-weight:400; line-height:1}
  details[open] summary::after{content:"\2013"}
  details p{padding:0 22px 18px; font-size:.93rem; color:var(--muted); max-width:78ch}

  /* footer — navy */
  footer{background:var(--navy-2); color:#94A2B8; padding:46px 0 30px; font-size:.87rem}
  footer a{color:#B6C2D6; text-decoration:none}
  footer a:hover{color:#fff}
  .foot-in{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .foot-bottom{margin-top:28px; padding-top:20px; border-top:1px solid var(--line-dark); font-size:.8rem; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}

  .rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
  .rv.in{opacity:1; transform:none}
  @media(prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} .btn:hover,.card:hover,.mod:hover,.way:hover{transform:none} }

  /* ---- legal + trust pages ---- */
  .legal-head{padding:56px 0 30px; background:var(--bg-soft); border-bottom:1px solid var(--line)}
  .legal-meta{margin-top:10px; color:var(--muted); font-size:.93rem}
  .legal-body{padding:44px 0 76px}
  .legal-grid{display:grid; grid-template-columns:232px 1fr; gap:52px; align-items:start}
  .legal-side{position:sticky; top:88px; display:grid; gap:22px}
  .legal-toc{display:grid; gap:8px; border-left:2px solid var(--line); padding-left:16px}
  .legal-toc a{color:var(--muted); text-decoration:none; font-size:.88rem; line-height:1.35}
  .legal-toc a:hover{color:var(--teal-deep)}
  .legal-aside-card{background:var(--bg-mint); border-radius:var(--radius); padding:18px 20px; display:grid; gap:7px}
  .legal-aside-h{font-weight:700; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--navy); margin-bottom:3px}
  .legal-aside-card a{color:var(--teal-dark); text-decoration:none; font-size:.9rem; font-weight:600}
  .legal-aside-card a:hover{text-decoration:underline}
  .legal-prose{max-width:74ch; color:var(--slate)}
  .legal-prose h2{font-size:1.42rem; margin:38px 0 14px; color:var(--ink); scroll-margin-top:96px}
  .legal-prose h2:first-child{margin-top:0}
  .legal-prose h3{font-size:1.04rem; margin:26px 0 10px; color:var(--ink)}
  .legal-prose p{margin:0 0 15px}
  .legal-prose ul{margin:0 0 15px; padding-left:20px; display:grid; gap:9px}
  .legal-prose li{line-height:1.62}
  .legal-prose strong{color:var(--ink)}
  .legal-prose a{color:var(--teal-dark); font-weight:600}
  .legal-prose hr{border:0; border-top:1px solid var(--line); margin:34px 0}
  .legal-prose table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:.92rem}
  .legal-prose th,.legal-prose td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
  .legal-prose th{color:var(--ink); font-weight:700; background:var(--bg-soft)}
  .legal-prose code{background:var(--bg-soft); padding:2px 6px; border-radius:5px; font-size:.88em}

  /* trust page */
  .trust-note{background:var(--bg-mint); border-radius:var(--radius); padding:20px 22px; margin:0 0 26px}
  .trust-note p{margin:0; color:var(--slate)}
  .trust-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px; margin:26px 0 8px}
  .trust-card{border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; background:#fff}
  .trust-card h3{margin-bottom:7px}
  .trust-card p{color:var(--muted); font-size:.94rem; margin:0}
  .trust-open{border:1px solid var(--line); border-left:3px solid var(--teal-deep); border-radius:12px; padding:16px 20px; margin-bottom:12px}
  .trust-open h4{margin:0 0 5px; font-size:.99rem; color:var(--ink)}
  .trust-open p{margin:0; color:var(--muted); font-size:.93rem}
  .status-yes{color:var(--teal-dark); font-weight:700}
  .status-part{color:#B7791F; font-weight:700}

  @media (max-width:900px){
    .legal-grid{grid-template-columns:1fr; gap:26px}
    .legal-side{position:static}
    .legal-toc{display:none}
  }