/* product page v3: generated by design/product-v3/export_theme.py, do not edit here */
:root{--display:"Inter",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif}/* Product page v2, shared layer. Built mobile first: every rule below is for a 360 to 430px phone, and
   min-width queries add the desktop. Only the colour family is carried over from the live site. */
:root{color-scheme:only light;
  --ink:#0E1618;--ink-2:#4A585D;--ink-3:#5A686C;
  --deep:#00363C;--deep-2:#00454C;--teal:#00707A;--teal-dark:#004E56;--lite:#4FC7CE;--tint:#DBEFF0;--mist:#EEF5F4;--paper:#F7FAF9;
  --amber:#FFB800;--wa:#0F7A6E;--err:#B3261E;--line:#D6E0DE;--line-soft:#E7EEEC;--field:#7F8E8B;
  --gut:20px;--max:1120px;
  --ease:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.3,.64,1);
  --shadow:0 1px 2px rgba(14,22,24,.06),0 10px 24px -14px rgba(14,22,24,.24);
  --dock:72px}
@media(min-width:768px){:root{--gut:32px}}
@media(min-width:1200px){:root{--gut:40px}}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom,0px))}
@media(min-width:960px){body{padding-bottom:0}}
.pg *,.pg *::before,.pg *::after,.hd *,.ft *,.dock *,.sheetwrap *{box-sizing:border-box}
.pg :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote){margin:0}
.pg :where(ul,ol){padding:0;list-style:none}
.pg :where(h1,h2,h3){text-wrap:balance;font-family:var(--display)}
.pg :where(p,li,dd){text-wrap:pretty}
.pg img{display:block;max-width:100%;height:auto}
:where(.pg,.hd,.ft,.dock,.sheetwrap) :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:8px}
.num,[data-count],[data-fig]{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button,a,[role=button],.chip{touch-action:manipulation}
button,[role=button],.chip,.seg button{-webkit-user-select:none;user-select:none}
a{color:inherit}

/* ---------- header ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--teal);color:#fff;padding:12px 16px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--line-soft);transition:transform .4s var(--ease)}
.hd.away{transform:translateY(-100%)}
.hd-in{display:flex;align-items:center;gap:8px;min-height:56px;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.hd .logo{display:flex;margin-right:auto;padding:6px 0}
.hd .logo svg{height:24px;width:auto}
.hd-links{display:none}
.icbtn{appearance:none;border:0;background:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.icbtn svg{width:22px;height:22px}
.icbtn:active{background:var(--mist)}
.hd-menu span,.hd-menu span::before,.hd-menu span::after{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);position:relative;transition:transform .3s var(--ease),opacity .2s}
.hd-menu span::before,.hd-menu span::after{content:"";position:absolute;left:0}
.hd-menu span::before{top:-6px}.hd-menu span::after{top:6px}
.hd-menu[aria-expanded=true] span{background:transparent}
.hd-menu[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg)}
.hd-menu[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(min-width:960px){
  .hd-in{min-height:68px;gap:28px}
  .hd .logo svg{height:28px}
  .hd-links{display:flex;gap:26px}
  .hd-links a{font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:10px 0}
  .hd-menu{display:none}
}
@media(hover:hover) and (pointer:fine){.hd-links a:hover{color:var(--teal)}}

/* ---------- buttons ---------- */
.btn{appearance:none;border:0;font:inherit;font-family:var(--body);font-weight:650;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .14s var(--ease-out),background-color .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn-main{background:var(--teal);color:#fff}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-light{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn .go{width:28px;height:28px;margin-right:-12px;border-radius:50%;background:rgba(255,255,255,.18) no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");transition:transform .25s var(--ease-out)}
.btn-amber .go,.btn-line .go{background-color:rgba(14,22,24,.08);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1618' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
@media(hover:hover) and (pointer:fine){
  .btn-main:hover{background:var(--teal-dark)}.btn-amber:hover{background:#EDAA00}.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
  .btn:hover .go{transform:translateX(3px)}
}

/* ---------- segmented control with a sliding thumb ---------- */
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:999px;background:var(--mist)}
.seg button{position:relative;z-index:1;appearance:none;border:0;background:none;font:inherit;font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink-2);min-height:44px;padding:0 12px;border-radius:999px;cursor:pointer;transition:color .2s}
.seg button[aria-pressed=true]{color:var(--ink)}
.seg-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(14,22,24,.08),0 6px 14px -8px rgba(0,54,60,.35);transition:transform .38s var(--spring)}
.seg.dark{background:rgba(255,255,255,.1)}
.seg.dark button{color:rgba(255,255,255,.75)}
.seg.dark button[aria-pressed=true]{color:var(--ink)}

/* ---------- swipe rows ---------- */
.swipe{display:grid;grid-auto-flow:column;grid-auto-columns:var(--card,82%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);padding:2px var(--gut) 12px;margin:0 calc(var(--gut) * -1);scrollbar-width:none;overscroll-behavior-x:contain}
.swipe::-webkit-scrollbar{display:none}
.swipe>*{scroll-snap-align:start}

/* ---------- pills, ticks ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;background:var(--tint);color:var(--teal-dark);font-size:13px;font-weight:650}
.ticks{display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--tint) no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300707A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.unsaid{color:var(--ink-3);font-style:italic}

/* ---------- faq ---------- */
.qitem{border-bottom:1px solid var(--line-soft)}
.qbtn{appearance:none;border:0;background:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;font:inherit;font-family:var(--body);font-size:16px;font-weight:600;color:var(--ink);padding:18px 0;min-height:56px;cursor:pointer}
.qbtn::after{content:"";flex:0 0 28px;height:28px;border-radius:50%;background:var(--mist) no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1618' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");transition:transform .3s var(--ease)}
.qbtn[aria-expanded=true]::after{transform:rotate(45deg);background-color:var(--tint)}
.qpanel{padding:0 8px 20px 0;color:var(--ink-2)}
.qpanel.in{animation:fadeup .32s var(--ease) both}
@keyframes fadeup{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- phone dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);box-shadow:0 -1px 0 var(--line-soft),0 -10px 24px -18px rgba(14,22,24,.35);transform:translateY(110%);transition:transform .45s var(--ease)}
.dock.on{transform:none}
.dock .btn{flex:1 1 auto;min-height:50px}
.dock .dk{flex:0 0 50px;height:50px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line)}
.dock .dk svg{width:22px;height:22px}
.dock .dk.wa{background:var(--wa);box-shadow:none;color:#fff}
.dock-fee{display:grid;line-height:1.15;flex:0 0 auto;padding-right:4px}
.dock-fee small{font-size:12px;color:var(--ink-3);font-weight:600}
.dock-fee b{font-size:17px;font-weight:800}
@media(min-width:960px){.dock:not(.on){transform:translateY(calc(100% + 48px))}.dock{left:auto;right:24px;bottom:24px;width:auto;border-radius:999px;padding:8px 8px 8px 22px;box-shadow:0 0 0 1px var(--line-soft),0 18px 40px -20px rgba(14,22,24,.45)}.dock .btn{flex:0 0 auto}}

/* ---------- footer ---------- */
.ft{background:var(--deep);color:rgba(255,255,255,.8);padding:48px 0 28px;font-size:14px}
.ft .logo-w svg{height:26px;width:auto}
.ft .logo-w svg g:first-child{fill:#fff}
.ft .logo-w svg g:last-child{fill:var(--lite)}
.ft-grid{display:grid;gap:28px;margin-top:20px}
.ft h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lite);margin:0 0 10px;font-family:var(--body)}
.ft a{display:block;color:#fff;text-decoration:none;padding:7px 0}
.ft .fine{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.6)}
@media(min-width:768px){.ft-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* ---------- reveal (fails open: hidden state only ever added by JS) ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv-pend{opacity:0;transform:translateY(22px)}
  .rv-in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
}

/* ---------- photos ---------- */
.ph{position:relative;overflow:hidden;border-radius:24px;background:var(--mist)}
.ph img{width:100%;height:100%;object-fit:cover}
.panel a small, .sugg a span.m { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1160px; margin: 0px auto; padding: 0 var(--gut); }
main, footer { background: var(--surface); }
header { border-bottom: 1px solid var(--line); position: sticky; top: 0px; z-index: 50; background: rgb(255, 255, 255); transition: box-shadow var(--t); }
header.scrolled { box-shadow: rgba(14, 22, 24, 0.4) 0px 6px 18px -12px; }
.h-top { display: flex; align-items: center; gap: 18px; padding-top: 12px; padding-bottom: 12px; position: relative; }
.logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.logo { flex: 0 0 auto; margin-right: 12px; padding: 3px 0px; display: flex; align-items: center; }
.logo svg { height: 30px; width: auto; display: block; }
.navsearch { flex: 1 1 0%; position: relative; min-width: 200px; max-width: 360px; }
.navsearch input { width: 100%; padding: 11px 14px 11px 40px; border: 1.5px solid var(--line-field); border-radius: var(--r-md); background: var(--surface-2); font-family: inherit; font-size: var(--fs-base); color: var(--ink); }
.navsearch input::placeholder { color: rgb(123, 136, 141); }
.navsearch input:focus { outline: none; border-color: var(--teal); background: rgb(255, 255, 255); box-shadow: rgba(0, 112, 122, 0.14) 0px 0px 0px 3px; }
.navsearch .sicon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); display: block; width: 16px; height: 16px; fill: rgb(123, 136, 141); pointer-events: none; }
.sugg { position: absolute; top: calc(100% + 6px); left: 0px; right: 0px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: rgba(14, 22, 24, 0.35) 0px 14px 30px -16px; padding: 6px; display: none; z-index: 60; }
.sugg.on { display: block; }
.sugg-h { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: 8px 10px 5px; font-weight: 700; }
.sugg a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: var(--r-sm); text-decoration: none; font-size: var(--fs-base); }
@media (hover: hover) and (pointer: fine){.sugg a:hover { background: var(--surface-2); }}
.sugg a span.t { font-weight: 500; }
.sugg a span.m { color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; }
nav.main { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; }
.hdiv { width: 1px; height: 24px; background: var(--line); flex: 0 0 auto; }
.navitem { position: relative; }
.navlink { display: flex; align-items: center; gap: 5px; padding: 9px 11px; border-radius: var(--r-sm); font-size: var(--fs-base); font-weight: 600; color: var(--ink-2); text-decoration: none; background: none; border: 0px; font-family: inherit; cursor: pointer; white-space: nowrap; }
.navitem.open .navlink { color: var(--teal); background: var(--surface-2); }
@media (hover: hover) and (pointer: fine){.navlink:hover { color: var(--teal); background: var(--surface-2); }}
.navlink[aria-current="page"] { position: relative; color: var(--ink); }
.navlink[aria-current="page"]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--teal); }
.caret { display: block; width: 9px; height: 9px; fill: currentcolor; flex: 0 0 auto; transition: transform var(--t); }
.navitem.open .caret { transform: rotate(180deg); }
.panel { position: absolute; top: calc(100% + 10px); right: -8px; width: 520px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: rgba(14, 22, 24, 0.4) 0px 18px 38px -20px; padding: 10px; display: none; z-index: 60; }
.navitem.open .panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0px 8px; }
.panel a { display: block; padding: 9px 11px; border-radius: var(--r-sm); text-decoration: none; font-size: var(--fs-base); line-height: 1.4; }
@media (hover: hover) and (pointer: fine){.panel a:hover { background: var(--surface-2); color: var(--teal); }}
.panel a small { display: block; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 400; margin-top: 1px; letter-spacing: 0px; }
.panel a b { font-weight: 600; }
.panel .all { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 11px; font-weight: 700; color: var(--teal); }
.h-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.wa-link { width: 36px; height: 36px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: border-color var(--t); }
@media (hover: hover) and (pointer: fine){.wa-link:hover { border-color: var(--wa); background: var(--teal-tint); }}
.wa-link svg { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.wa-link svg { fill: var(--wa); }
.searchbtn, .menubtn { display: none; width: 38px; height: 38px; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; flex: 0 0 auto; position: relative; background-color: rgb(255, 255, 255); background-repeat: no-repeat; background-position: 50% 50%; }
.searchbtn { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='%230E1618'><path d='M10 2a8 8 0 1 0 5.3 14l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/></svg>"); background-size: 17px 17px; }
.menubtn { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230E1618'><rect y='2' width='16' height='2' rx='1'/><rect y='7' width='16' height='2' rx='1'/><rect y='12' width='16' height='2' rx='1'/></svg>"); background-size: 16px 16px; }
.searchbtn svg, .menubtn span { display: none; }
.mgroup { border-bottom: 1px solid var(--line-soft); }
.mgroup > button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 13px var(--gut); font-size: var(--fs-md); font-weight: 600; background: none; border: 0px; font-family: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.mgroup > button .caret { width: 11px; height: 11px; }
.mgroup.open > button .caret { transform: rotate(180deg); }
.msub { display: none; padding: 0px 0px 8px; background: var(--surface-2); }
.mgroup.open .msub { display: block; }
.msub a { display: block; padding: 10px var(--gut); font-size: var(--fs-base); text-decoration: none; color: var(--ink-2); }
.mcontact { display: flex; gap: 10px; padding: 14px var(--gut) 18px; }
.mcontact a { flex: 1 1 0%; text-align: center; padding: 11px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 700; text-decoration: none; border: 1.5px solid var(--line); }
.mcontact a.wa { background: var(--wa); border-color: var(--wa); color: rgb(255, 255, 255); }
footer { border-top: 1px solid var(--line); padding: 40px 0px 26px; overflow-x: clip; }
.f-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 26px; margin-bottom: 28px; }
.f-col h2 { font-size: var(--fs-xs); letter-spacing: 0.07em; line-height: 1.25; text-transform: uppercase; margin-bottom: 13px; font-weight: 800; padding-left: 0px; }
.f-col h2::before { content: none; }
.f-col p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 30ch; }
.f-col a { display: block; font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; margin-bottom: 8px; }
@media (hover: hover) and (pointer: fine){.f-col a:hover { color: var(--teal); }}
.f-bottom { border-top: 1px solid var(--line-soft); padding-top: 18px; font-size: var(--fs-sm); color: var(--ink-2); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.disclaimer { font-size: var(--fs-xs); color: var(--ink-2); max-width: 82ch; margin-top: 14px; line-height: 1.65; }
.mobilebar { display: none; }
.skiplink { position: absolute; left: -9999px; top: 0px; background: var(--teal); color: rgb(255, 255, 255); padding: 10px 16px; z-index: 100; border-radius: 0 0 var(--r-sm) 0; font-weight: 700; font-size: var(--fs-base); }
.skiplink:focus { left: 0px; }
@media (max-width: 1100px){.h-top { gap: 12px; }}
@media (max-width: 1100px){.navlink { padding: 9px 7px; }}
@media (max-width: 1100px){.navlink[aria-current="page"]::after { left: 7px; right: 7px; }}
@media (max-width: 1100px){.f-grid { grid-template-columns: repeat(4, 1fr); }}
@media (max-width: 1100px){.f-col:first-child { grid-column: 1 / -1; margin-bottom: 4px; }}
@media (max-width: 1100px){.f-col:first-child p { max-width: 64ch; }}
@media (max-width: 1000px){nav.main { display: none; }}
@media (max-width: 1000px){.menubtn { display: flex; }}
@media (max-width: 1000px){.navsearch { max-width: 380px; }}
@media (max-width: 900px){.searchbtn { display: flex; }}
@media (max-width: 900px){.navsearch input { font-size: var(--fs-md); }}
@media (max-width: 900px){.searchbtn, .menubtn, .wa-link { width: 44px; height: 44px; }}
@media (max-width: 900px){.mnav { max-height: calc(100dvh - var(--hdr) - 84px); }}
@media (max-width: 900px){.navsearch { display: none; }}
@media (max-width: 900px){.navsearch.mobileopen { display: block; position: absolute; top: calc(100% + 12px); left: var(--gut); right: var(--gut); max-width: none; z-index: 60; }}
@media (max-width: 900px){.logo { margin-right: 8px; }}
@media (max-width: 900px){.logo svg { height: 26px; }}
@media (max-width: 900px){.hdiv { display: none; }}
@media (max-width: 900px){.f-grid { grid-template-columns: 1fr 1fr; gap: 22px; }}
@media (max-width: 900px){.mobilebar { display: flex; position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 70; background: rgb(255, 255, 255); border-top: 1px solid var(--line); padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); gap: 10px; align-items: center; }}
@media (max-width: 900px){.mobilebar a { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0px; min-height: 46px; border-radius: var(--r-md); font-weight: 700; font-size: var(--fs-base); text-decoration: none; border: 1.5px solid var(--line); color: var(--ink); }}
@media (max-width: 900px){.mobilebar a svg { width: 18px; height: 18px; fill: var(--ink); }}
@media (max-width: 900px){.mobilebar a.wa { background: var(--wa); border-color: var(--wa); color: rgb(255, 255, 255); }}
@media (max-width: 900px){.mobilebar a.wa svg { fill: rgb(255, 255, 255); }}
@media (max-width: 900px){.mobilebar.has-cta a { flex: 0 0 48px; width: 48px; height: 48px; padding: 0px; gap: 0px; }}
@media (max-width: 900px){.mobilebar.has-cta a span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }}
@media (max-width: 900px){.mobilebar .bar-cta { flex: 1 1 0%; min-width: 0px; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px; border: 1.5px solid var(--teal); border-radius: var(--r-md); background: rgb(255, 255, 255); color: var(--teal); font-family: inherit; font-size: var(--fs-base); font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }}
@media (max-width: 359px){.logo svg { height: 24px; }}
@media (max-width: 359px){.h-top { gap: 10px; }}
@media (max-width: 359px){.h-right { gap: 8px; }}
@media (max-width: 359px){.searchbtn, .menubtn, .wa-link { width: 40px; height: 40px; }}
@media (max-width: 319px){.wa-link { display: none; }}
.navlink, .navsearch input, .mcontact a, .mobilebar a { min-height: 44px; }
button.navlink { display: inline-flex; align-items: center; gap: 6px; }
.panel a small, .sugg a span.m { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1160px; margin: 0px auto; padding: 0 var(--gut); }
main, footer { background: var(--surface); }
header { border-bottom: 1px solid var(--line); position: sticky; top: 0px; z-index: 50; background: rgb(255, 255, 255); transition: box-shadow var(--t); }
.h-top { display: flex; align-items: center; gap: 18px; padding-top: 12px; padding-bottom: 12px; position: relative; }
.logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.logo { flex: 0 0 auto; margin-right: 12px; padding: 3px 0px; display: flex; align-items: center; }
.logo svg { height: 30px; width: auto; display: block; }
.navsearch { flex: 1 1 0%; position: relative; min-width: 200px; max-width: 360px; }
.navsearch input { width: 100%; padding: 11px 14px 11px 40px; border: 1.5px solid var(--line-field); border-radius: var(--r-md); background: var(--surface-2); font-family: inherit; font-size: var(--fs-base); color: var(--ink); }
.navsearch input::placeholder { color: rgb(123, 136, 141); }
.navsearch .sicon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); display: block; width: 16px; height: 16px; fill: rgb(123, 136, 141); pointer-events: none; }
.sugg { position: absolute; top: calc(100% + 6px); left: 0px; right: 0px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: rgba(14, 22, 24, 0.35) 0px 14px 30px -16px; padding: 6px; display: none; z-index: 60; }
.sugg.on { display: block; }
.sugg-h { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: 8px 10px 5px; font-weight: 700; }
.sugg a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: var(--r-sm); text-decoration: none; font-size: var(--fs-base); }
.sugg a span.t { font-weight: 500; }
.sugg a span.m { color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; }
nav.main { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; }
.hdiv { width: 1px; height: 24px; background: var(--line); flex: 0 0 auto; }
.navitem { position: relative; }
.navlink { display: flex; align-items: center; gap: 5px; padding: 9px 11px; border-radius: var(--r-sm); font-size: var(--fs-base); font-weight: 600; color: var(--ink-2); text-decoration: none; background: none; border: 0px; font-family: inherit; cursor: pointer; white-space: nowrap; }
.navlink[aria-current="page"] { position: relative; color: var(--ink); }
.navlink[aria-current="page"]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--teal); }
.caret { display: block; width: 9px; height: 9px; fill: currentcolor; flex: 0 0 auto; transition: transform var(--t); }
.panel { position: absolute; top: calc(100% + 10px); right: -8px; width: 520px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: rgba(14, 22, 24, 0.4) 0px 18px 38px -20px; padding: 10px; display: none; z-index: 60; }
.panel a { display: block; padding: 9px 11px; border-radius: var(--r-sm); text-decoration: none; font-size: var(--fs-base); line-height: 1.4; }
.panel a small { display: block; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 400; margin-top: 1px; letter-spacing: 0px; }
.panel a b { font-weight: 600; }
.panel .all { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 11px; font-weight: 700; color: var(--teal); }
.h-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.wa-link { width: 36px; height: 36px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: border-color var(--t); }
.wa-link svg { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.wa-link svg { fill: var(--wa); }
.searchbtn, .menubtn { display: none; width: 38px; height: 38px; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; flex: 0 0 auto; position: relative; background-color: rgb(255, 255, 255); background-repeat: no-repeat; background-position: 50% 50%; }
.searchbtn { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='%230E1618'><path d='M10 2a8 8 0 1 0 5.3 14l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/></svg>"); background-size: 17px 17px; }
.menubtn { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230E1618'><rect y='2' width='16' height='2' rx='1'/><rect y='7' width='16' height='2' rx='1'/><rect y='12' width='16' height='2' rx='1'/></svg>"); background-size: 16px 16px; }
.searchbtn svg, .menubtn span { display: none; }
.mgroup { border-bottom: 1px solid var(--line-soft); }
.mgroup > button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 13px var(--gut); font-size: var(--fs-md); font-weight: 600; background: none; border: 0px; font-family: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.mgroup > button .caret { width: 11px; height: 11px; }
.msub { display: none; padding: 0px 0px 8px; background: var(--surface-2); }
.msub a { display: block; padding: 10px var(--gut); font-size: var(--fs-base); text-decoration: none; color: var(--ink-2); }
.mcontact { display: flex; gap: 10px; padding: 14px var(--gut) 18px; }
.mcontact a { flex: 1 1 0%; text-align: center; padding: 11px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 700; text-decoration: none; border: 1.5px solid var(--line); }
.mcontact a.wa { background: var(--wa); border-color: var(--wa); color: rgb(255, 255, 255); }
.mobilebar { display: none; }
.skiplink { position: absolute; left: -9999px; top: 0px; background: var(--teal); color: rgb(255, 255, 255); padding: 10px 16px; z-index: 100; border-radius: 0 0 var(--r-sm) 0; font-weight: 700; font-size: var(--fs-base); }
@media (max-width: 1100px){.h-top { gap: 12px; }}
@media (max-width: 1100px){.navlink { padding: 9px 7px; }}
@media (max-width: 1100px){.navlink[aria-current="page"]::after { left: 7px; right: 7px; }}
@media (max-width: 1000px){nav.main { display: none; }}
@media (max-width: 1000px){.menubtn { display: flex; }}
@media (max-width: 1000px){.navsearch { max-width: 380px; }}
@media (max-width: 900px){.searchbtn { display: flex; }}
@media (max-width: 900px){.navsearch input { font-size: var(--fs-md); }}
@media (max-width: 900px){.searchbtn, .menubtn, .wa-link { width: 44px; height: 44px; }}
@media (max-width: 900px){.mnav { max-height: calc(100dvh - var(--hdr) - 84px); }}
@media (max-width: 900px){.navsearch { display: none; }}
@media (max-width: 900px){.navsearch.mobileopen { display: block; position: absolute; top: calc(100% + 12px); left: var(--gut); right: var(--gut); max-width: none; z-index: 60; }}
@media (max-width: 900px){.logo { margin-right: 8px; }}
@media (max-width: 900px){.logo svg { height: 26px; }}
@media (max-width: 900px){.hdiv { display: none; }}
@media (max-width: 900px){.mobilebar { display: flex; position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 70; background: rgb(255, 255, 255); border-top: 1px solid var(--line); padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); gap: 10px; align-items: center; }}
@media (max-width: 900px){.mobilebar a { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0px; min-height: 46px; border-radius: var(--r-md); font-weight: 700; font-size: var(--fs-base); text-decoration: none; border: 1.5px solid var(--line); color: var(--ink); }}
@media (max-width: 900px){.mobilebar a svg { width: 18px; height: 18px; fill: var(--ink); }}
@media (max-width: 900px){.mobilebar a.wa { background: var(--wa); border-color: var(--wa); color: rgb(255, 255, 255); }}
@media (max-width: 900px){.mobilebar a.wa svg { fill: rgb(255, 255, 255); }}
@media (max-width: 900px){.mobilebar.has-cta a { flex: 0 0 48px; width: 48px; height: 48px; padding: 0px; gap: 0px; }}
@media (max-width: 900px){.mobilebar.has-cta a span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }}
@media (max-width: 359px){.logo svg { height: 24px; }}
@media (max-width: 359px){.h-top { gap: 10px; }}
@media (max-width: 359px){.h-right { gap: 8px; }}
@media (max-width: 359px){.searchbtn, .menubtn, .wa-link { width: 40px; height: 40px; }}
@media (max-width: 319px){.wa-link { display: none; }}
.navlink, .navsearch input, .mcontact a, .mobilebar a { min-height: 44px; }
button.navlink { display: inline-flex; align-items: center; gap: 6px; }
/* The site's lead component (components/lead.php + lead.js, same fields, rules, states and submit flow),
   presented as a bottom sheet on phones and a centred dialog on desktop. Markup and behaviour are untouched. */
.lead-scrim{position:fixed;inset:0;z-index:90;background:rgba(0,30,34,.48);display:flex;align-items:flex-end;justify-content:center;overflow-y:auto;overscroll-behavior:contain}
.lead-scrim[hidden]{display:none}
.lead-modal{position:relative;width:100%;max-width:520px;background:#fff;border-radius:28px 28px 0 0;padding:14px 22px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 50px -20px rgba(0,30,34,.5);font-family:var(--body)}
.lead-modal::before{content:"";display:block;width:40px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 14px}
@media (prefers-reduced-motion:no-preference){.lead-scrim:not([hidden]){animation:scrimin .25s ease both}.lead-scrim:not([hidden]) .lead-modal{animation:sheetup .45s var(--ease) both}}
@keyframes scrimin{from{opacity:0}to{opacity:1}}
@keyframes sheetup{from{transform:translateY(60%);opacity:.4}to{transform:none;opacity:1}}
@media(min-width:768px){.lead-scrim{align-items:center;padding:24px}.lead-modal{border-radius:28px;padding:28px 30px}.lead-modal::before{display:none}}
.lead-close{position:absolute;top:12px;right:12px;appearance:none;border:0;width:44px;height:44px;border-radius:50%;background:var(--mist);display:grid;place-items:center;cursor:pointer}
.lead-close svg{width:18px;height:18px;fill:var(--ink)}
.lead-form[hidden]{display:none}
.lead-unit .fhead{padding-right:48px}
.lead-unit .fhead h2{font-family:var(--display);font-size:24px;line-height:1.2;font-weight:750;letter-spacing:-.02em;margin:0}
.lead-unit .fnote{margin:6px 0 0;color:var(--ink-2);font-size:15px}
.lead-unit .fields{display:grid;gap:14px;margin-top:18px}
.lead-field{display:grid;gap:6px}
.lead-field label{font-size:14px;font-weight:650}
.lead-field input{width:100%;min-height:52px;padding:0 16px;font:inherit;font-size:16px;border:1.5px solid var(--field);border-radius:14px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.lead-field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,112,122,.14)}
.lead-field .telwrap{display:flex}
.lead-field .telwrap span{display:grid;place-items:center;padding:0 14px;border:1.5px solid var(--field);border-right:0;border-radius:14px 0 0 14px;background:var(--mist);font-weight:600}
.lead-field .telwrap input{border-radius:0 14px 14px 0}
.lead-err{display:none;font-size:13px;font-weight:600;color:var(--err)}
.lead-field.invalid .lead-err{display:block}
.lead-field.invalid input{border-color:var(--err)}
.lead-hp{position:absolute;left:-9999px}
.lead-submit{appearance:none;border:0;min-height:54px;border-radius:999px;background:var(--teal);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;margin-top:4px;transition:transform .14s var(--ease-out),background-color .2s}
.lead-submit:active{transform:scale(.98)}
.lead-submit:disabled{opacity:.7}
.lead-consent{margin:12px 0 0;font-size:13px;color:var(--ink-3)}
.lead-consent a{color:var(--teal)}
.lead-fail{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#FCEDEC;color:var(--err);font-size:14px;font-weight:600}
.lead-fail[hidden]{display:none}
.lead-done{display:none;text-align:center;padding:24px 4px 8px}
.lead-done:not([hidden]){display:block}
.lead-tick{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--tint);display:grid;place-items:center}
.lead-tick svg{width:30px;height:30px;fill:var(--teal)}
@media (prefers-reduced-motion:no-preference){.lead-done:not([hidden]) .lead-tick{animation:pop .5s var(--spring) both}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.lead-done b{display:block;font-family:var(--display);font-size:22px}
.lead-done p{margin:6px 0 0;color:var(--ink-2)}
.lead-unit.sent .fhead{display:none}
/* Product page v3: one section library, Inter, light, teal family. Mobile first; min-width queries add desktop. */
body.v3,.v3 .pg{background:var(--paper)}
.pg h2{font-size:clamp(26px,6.6vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.03em}
.pg h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.sub{margin-top:10px;color:var(--ink-2);font-size:16px;max-width:62ch}
.small{font-size:14px;color:var(--ink-2);margin-top:14px}
.k{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.sec{padding:56px 0}
.sec.tint{background:var(--mist)}
.head{display:grid;gap:10px;margin-bottom:20px;max-width:760px}
.head .pill{justify-self:start;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.two{display:grid;gap:26px}
.two.top{align-items:start}
.ph.wide{aspect-ratio:3/2}
@media(min-width:960px){.sec{padding:96px 0}.two{grid-template-columns:1fr 1fr;gap:64px;align-items:center}.two.top{align-items:start}}

/* hero: a scene card, the name, three facts and Apply all inside the first viewport */
.hero{padding:12px 0 28px;background:var(--paper)}
.hero-grid{display:grid;gap:18px}
.scene{position:relative;margin:0;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--mist);box-shadow:var(--shadow)}
.scene img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
@media (prefers-reduced-motion:no-preference){.scene img{animation:settle 1.2s var(--ease-out) both}}
@keyframes settle{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.logo-pill{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 6px 16px -10px rgba(14,22,24,.5)}
.logo-u{display:block;width:auto;max-width:150px;height:22px;object-fit:contain}
.mono{display:grid;place-items:center;width:28px;height:28px;border-radius:6px;background:var(--deep);color:#fff;font-weight:800}
.hero-copy{display:grid;gap:12px}
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:13px;font-weight:600;color:var(--ink-3)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 8px;color:var(--line)}
.crumbs a{color:var(--ink-3);text-decoration:none;min-height:30px;display:inline-flex;align-items:center}
.crumbs [aria-current]{color:var(--teal-dark)}
.hero h1{font-size:clamp(32px,8.6vw,56px);line-height:1.02;font-weight:800;letter-spacing:-.04em}
.h1u{display:block;margin-top:6px;font-size:clamp(18px,4.8vw,24px);line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--ink-2)}
.lede{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:52ch}
.facts{display:grid;grid-template-columns:1.25fr .85fr 1fr;gap:8px}
.fact{display:grid;gap:2px;padding:12px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft)}
.fact small{font-size:12px;font-weight:700;color:var(--ink-3)}
.fact b{font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.hero .ctas{flex-wrap:nowrap}
.hero .ctas .btn{flex:1 1 auto}
.wa-btn{flex:0 0 52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:#fff}
.wa-btn svg{width:24px;height:24px}
@media(min-width:960px){
  .hero{padding:36px 0 56px}
  .hero-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .scene{order:2;aspect-ratio:4/3}
  .hero .ctas .btn{flex:0 0 auto}
}

/* chip nav, sticky over the header once scrolled */
.chipnav{position:sticky;top:0;z-index:55;background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--line-soft)}
.chipnav-in{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px var(--gut);max-width:var(--max);margin:0 auto}
.chipnav-in::-webkit-scrollbar{display:none}
.chipnav-a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:var(--mist);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.chipnav-a[aria-current]{background:var(--deep);color:#fff}
html{scroll-padding-top:72px}

/* audience notes */
.notes{display:grid;gap:10px;margin-top:16px}
.anote{display:grid;gap:4px;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:inset 3px 0 0 var(--teal),inset 0 0 0 1px var(--line-soft)}
.anote .who{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.anote p{font-size:15px;color:var(--ink-2)}

/* fees */
.fees{display:grid;gap:16px;padding:22px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.fees-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.fig .num{font-size:clamp(40px,12vw,60px);font-weight:800;letter-spacing:-.045em;line-height:1}
.fig .term{font-weight:700;color:var(--ink-2)}
.diff{font-size:14px;font-weight:700;color:var(--teal-dark);background:var(--tint);padding:10px 12px;border-radius:12px}
.sched{display:flex;gap:4px;align-items:flex-end;height:44px}
.sched i{flex:1 1 0;max-width:56px;height:100%;border-radius:6px;background:var(--teal);transform-origin:50% 100%}
.sched[data-n="18"] i,.sched[data-n="30"] i{background:var(--lite)}
@media (prefers-reduced-motion:no-preference){.sched.go i{animation:grow .5s var(--ease-out) both;animation-delay:calc(var(--i) * 20ms)}}
@keyframes grow{from{transform:scaleY(.1);opacity:0}to{transform:none;opacity:1}}
.note{color:var(--ink-2)}
.conc{border-top:1px solid var(--line-soft);padding-top:6px}
.conc summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700}
.conc li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.unsaid{color:var(--ink-3);font-style:italic;font-weight:500}
@media(min-width:960px){#fees .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}#fees .notes{margin-top:0}}

/* recognition */
.conds{display:grid;gap:10px}
.conds li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:2px 14px;padding:20px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.conds .n{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--teal);color:#fff;font-weight:800;font-size:18px}
.conds b{font-size:17px;line-height:1.35}
.conds span:last-child{color:var(--teal-dark);font-weight:700}
.proofs{display:grid;gap:10px;margin-top:12px}
.proofs div{padding:18px;border-radius:20px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px var(--line-soft)}
.proofs h3{margin-bottom:6px}
.proofs p{font-size:15px;color:var(--ink-2)}
@media(min-width:960px){.conds{grid-template-columns:1fr 1fr}.proofs{grid-template-columns:repeat(3,1fr)}}

/* inline lead band */
.leadband{padding:40px 0;background:var(--deep)}
.leadcard .lead-unit{max-width:560px;margin:0 auto;background:#fff;border-radius:20px;padding:24px}
.leadcard .lead-unit .fhead h2{font-size:22px}

/* study */
.kv{display:grid;margin-top:16px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft);padding:4px 18px}
.kv div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.kv div:last-child{border-bottom:0}
.kv dt{font-size:12px;font-weight:800;color:var(--teal);text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
.kv dd{font-size:15px}

/* curriculum */
.sems{margin-top:6px}
.sem{display:grid;align-content:start;gap:10px;padding:20px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.sem.y2{background:var(--deep);color:#fff}
.sem-k{font-size:12px;font-weight:800;color:var(--teal);text-transform:uppercase;letter-spacing:.06em}
.sem.y2 .sem-k{color:var(--lite)}
.sem li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:15px}
.sem.y2 li{border-color:rgba(255,255,255,.14)}
.sem .el{font-weight:700}
.sem .el span{flex:0 0 auto;align-self:center;font-size:12px;font-weight:700;color:var(--lite);white-space:nowrap}
.dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.dots i{width:20px;height:4px;border-radius:6px;background:var(--line)}
.dots i.on{background:var(--teal)}
.covers{margin-top:18px;padding:18px;border-radius:20px;background:var(--mist)}
.covers .k:first-child{margin-top:0}
.covers .cov{font-size:16px}
@media(min-width:960px){.sems{grid-template-columns:repeat(var(--cols,4),1fr);grid-auto-flow:row;overflow:visible;margin:6px 0 0;padding:0}.dots{display:none}}

/* eligibility */
.ticks{margin-top:16px}
.ticks li{font-size:15px;color:var(--ink-2)}
.ticks b{color:var(--ink)}
.suits{margin-top:18px}
.h3gap{font-size:20px;margin-bottom:12px}
.steps{display:grid;gap:8px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:38px 1fr;gap:0 12px;padding:14px;border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.steps li::before{content:counter(s);grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--tint);color:var(--teal-dark);font-weight:800}
.steps span{font-size:14px;color:var(--ink-2)}

/* university */
.uni-logo{display:inline-flex;align-items:center;height:56px;padding:0 18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft);justify-self:start}
.uni-logo .logo-u{height:32px;max-width:200px}
.ranks .rkc{display:grid;align-content:start;gap:4px;padding:16px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft)}
.rk{font-size:32px;font-weight:800;letter-spacing:-.04em;color:var(--teal);line-height:1.05}
.rp{font-weight:700;font-size:15px;line-height:1.3}
.rs{font-size:13px;color:var(--ink-2)}
@media(min-width:960px){.ranks{grid-template-columns:repeat(3,1fr);grid-auto-flow:row;overflow:visible;margin:0;padding:0}}

/* careers */
.honest{margin-top:20px;padding:16px 18px;border-radius:16px;background:var(--mist);color:var(--ink-2);font-size:15px;max-width:72ch}

/* compare */
.uc{display:grid;align-content:start;gap:10px;padding:20px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.uc.mine{box-shadow:inset 0 0 0 2px var(--teal),var(--shadow)}
.uc-logo{display:flex;align-items:center;height:36px}
.uc-logo .logo-u{height:24px;max-width:150px}
.uc-u{font-size:14px;font-weight:700;color:var(--ink-2)}
.uc-fee{font-size:30px;font-weight:800;letter-spacing:-.03em}
.uc ul{display:grid;gap:6px;font-size:14px;color:var(--ink-2)}
.uc .pill{justify-self:start}
@media(min-width:960px){#compare .swipe{grid-template-columns:repeat(4,1fr);grid-auto-flow:row;overflow:visible;margin:22px 0 0;padding:0}#compare .dots{display:none}}

/* faq, close */
.faqgrid{display:grid;gap:12px}
@media(min-width:960px){.faqgrid{grid-template-columns:1fr 2fr;gap:64px}}
.close{padding:56px 0 88px;background:#fff}
.close-ph{aspect-ratio:4/3;max-height:60svh}
.close h2{font-size:clamp(28px,7.4vw,44px);line-height:1.08}
.close .ctas{margin-top:20px}
/* logos keep their set height (the shared img rule sets height:auto) */
.pg .logo-pill .logo-u{height:20px;width:auto;max-width:130px}
.pg .uni-logo .logo-u{height:30px;width:auto;max-width:190px}
.pg .uc-logo .logo-u{height:22px;width:auto;max-width:140px}
.pill{white-space:nowrap;flex:0 0 auto}
.fees .seg button{white-space:nowrap;padding:0 8px;font-size:14px}
@media(max-width:380px){.fees .seg button{font-size:13px;padding:0 6px}}

/* ---- conversion elements ---- */
.chipnav-apply{flex:0 0 auto;margin-left:auto;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--teal);color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.sharefee{margin-top:4px;min-height:46px;font-size:15px}
.checkcard{padding:22px;border-radius:20px;background:#fff;box-shadow:var(--shadow);display:grid;gap:10px}
.cform{display:grid;gap:16px;margin-top:8px}
.cq{border:0;margin:0;padding:0;display:grid;gap:8px}
.cq legend{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);font-size:15px;font-weight:600;cursor:pointer;transition:box-shadow .2s,background-color .2s}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt span::before{content:"";display:inline-block;vertical-align:-5px;width:22px;height:22px;margin-right:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--field);transition:box-shadow .2s}
.opt input:checked+span::before{box-shadow:inset 0 0 0 7px var(--teal)}
.opt:has(input:checked){background:var(--tint);box-shadow:inset 0 0 0 2px var(--teal)}
.opt:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.cres{display:grid;gap:12px;margin-top:6px;padding:16px;border-radius:16px;background:var(--mist)}
.cres p{font-size:15px;color:var(--ink-2)}
.cres b{color:var(--ink)}
.cres-ok b{color:var(--teal-dark)}
@media (prefers-reduced-motion:no-preference){.cres.in{animation:fadeup .4s var(--ease) both}}
.asks{padding:48px 0 8px}
.asks h2{font-size:clamp(24px,6vw,34px)}
.askrow{display:grid;gap:8px;margin-top:16px}
.ask{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 16px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft);text-decoration:none;font-weight:600;font-size:15px;color:var(--ink);transition:box-shadow .2s,transform .14s var(--ease-out)}
.ask svg{flex:0 0 22px;width:22px;height:22px;color:var(--wa)}
.ask:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){.ask:hover{box-shadow:inset 0 0 0 1.5px var(--wa)}}
@media(min-width:960px){.askrow{grid-template-columns:1fr 1fr}.checkcard{max-width:720px}}
.cres [hidden],.cres[hidden]{display:none!important}
/* Optimised v3: nav under the header, tighter rhythm, one home per fact. */
:root{--hh:56px}
@media(min-width:960px){:root{--hh:68px}}
.pv-opt .hd{z-index:60}
.pv-opt .chipnav{top:var(--hh);z-index:50;box-shadow:0 1px 0 var(--line-soft)}
.pv-opt .chipnav-in{padding:8px var(--gut);gap:6px}
.pv-opt .chipnav-a{min-height:38px;padding:0 13px;font-size:14px}
.pv-opt .chipnav-apply{min-height:44px}
.pv-opt .sec{padding:48px 0}
@media(min-width:960px){.pv-opt .sec{padding:88px 0}}
.pv-opt .head{margin-bottom:18px}
.pv-opt .head .sub{margin-top:6px;font-size:15px}
.pv-opt .pg h2{font-size:clamp(26px,7vw,40px)}
/* hero */
.pv-opt .lede{font-size:16px}
.pv-opt .facts{grid-template-columns:1.3fr 1fr .9fr}
/* curriculum: electives marked, credits stated once below */
.pv-opt .sem .el{position:relative;padding-left:16px;font-weight:700}
.pv-opt .sem .el::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--teal)}
.pv-opt .sem.y2 .el::before{background:var(--lite)}
/* eligibility */
.pv-opt .checkcard{padding:18px;border-radius:20px}
.pv-opt .rule{margin-top:14px;border-top:1px solid var(--line-soft)}
.pv-opt .rule summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700;color:var(--teal-dark)}
.pv-opt .rule .ticks{margin:4px 0 8px}
.pv-opt .cres [hidden],.pv-opt .cres[hidden]{display:none!important}
/* university: logo and name are the heading */
.pv-opt #university .head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pv-opt #university .head h2{font-size:clamp(22px,5.6vw,32px)}
.pv-opt #university .kv{margin-top:14px}
/* close: the inline form is the last section */
.pv-opt .close{padding:48px 0 96px;background:var(--deep)}
.pv-opt .close .close-ph{display:none}
.pv-opt .close .lead-unit{max-width:560px;margin:0 auto;background:#fff;border-radius:20px;padding:24px}
@media(min-width:960px){.pv-opt .close .close-ph{display:block;aspect-ratio:4/5;max-height:560px}.pv-opt .close .lead-unit{margin:0}}
/* dock steps aside at the closing form */
.pv-opt .dock.on.away{transform:translateY(110%)}
@media(min-width:960px){.pv-opt .dock.on.away{transform:translateY(calc(100% + 48px))}}

/* ---- 10 October refinement ---- */
/* live site chrome: tokens it reads, same 1160px content width as every other page */
:root{--surface:#FFFFFF;--surface-2:#F3F7F6;--line-field:#7F8E8B;--teal-tint:#DBEFF0;--r-sm:6px;--r-md:10px;--t:.18s ease;--hdr:64px;
  --fs-xs:12px;--fs-sm:13px;--fs-base:15px;--fs-md:16px;--fs-lead:18px;--fs-xl:20px;--max:1160px}
.pv-opt header#hdr{z-index:60}
.pv-opt .mobilebar{display:none}

/* jobs: who it suits as a readable list, roles as a two-step ladder */
.pv-opt .jobs{display:grid;gap:14px}
.pv-opt .fitcard{padding:20px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.pv-opt .helps{display:grid;gap:14px;margin-top:24px}
@media(min-width:600px){.pv-opt .helps{grid-template-columns:1fr 1fr;gap:20px}}
.pv-opt .help h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--teal)}
.pv-opt .help p{margin:0;font-size:16px}
.pv-opt .fitcard h3{font-size:15px;font-weight:700;margin-bottom:10px}
.pv-opt .fitlist{display:grid;gap:0}
.pv-opt .fitlist li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--line-soft);font-size:15px;line-height:1.45}
.pv-opt .fitlist li:first-child{border-top:0;padding-top:4px}
.pv-opt .fitlist li::before{content:"";position:absolute;left:0;top:13px;width:18px;height:18px;border-radius:50%;background:var(--tint) no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300707A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.pv-opt .fitlist li:first-child::before{top:6px}
.pv-opt .ladder{display:grid;gap:8px;padding:20px;border-radius:20px;background:var(--deep);color:#fff}
.pv-opt .ladder .k{color:var(--lite);margin:0 0 10px}
.pv-opt .ladder .chip{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.pv-opt .rung.later .chip{background:#fff;color:var(--ink);box-shadow:none}
.pv-opt .rung-arrow{display:block;width:2px;height:22px;margin-left:18px;background:rgba(255,255,255,.35);position:relative}
.pv-opt .rung-arrow::after{content:"";position:absolute;left:-4px;bottom:-1px;width:8px;height:8px;border-right:2px solid rgba(255,255,255,.6);border-bottom:2px solid rgba(255,255,255,.6);transform:rotate(45deg)}
.pv-opt #careers .honest{margin-top:14px}
@media(min-width:960px){.pv-opt .jobs{grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}.pv-opt .fitcard,.pv-opt .ladder{padding:28px}}

/* compare: every card responds to hover, not only the current one */
.pv-opt .uc{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .pv-opt .uc:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 18px 34px -22px rgba(14,22,24,.45)}
  .pv-opt .uc.mine:hover{box-shadow:inset 0 0 0 2px var(--teal),0 18px 34px -22px rgba(14,22,24,.45)}
}
.pv-opt .uc .btn-line{min-height:44px;justify-self:start;margin-top:4px}

/* closing lead form: what happens next beside the form */
.pv-opt .close{background:var(--mist);padding:56px 0 104px}
.pv-opt .closegrid{display:grid;gap:22px}
.pv-opt .closeinfo{display:grid;gap:14px;align-content:start}
.pv-opt .closeinfo .uni-logo{height:48px;padding:0 14px}
.pv-opt .closeinfo .uni-logo .logo-u{height:26px}
.pv-opt .close-h{font-size:clamp(26px,6.6vw,38px);line-height:1.1;font-weight:800;letter-spacing:-.03em}
.pv-opt .closefacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.pv-opt .closefacts div{padding:12px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft)}
.pv-opt .closefacts div:first-child{grid-column:1/-1}
.pv-opt .closefacts dt{font-size:12px;font-weight:700;color:var(--ink-3)}
.pv-opt .closefacts dd{margin:0;font-weight:800;font-size:16px}
.pv-opt .next{display:grid;gap:10px;margin:4px 0 0;padding:0;list-style:none;counter-reset:n}
.pv-opt .next li{counter-increment:n;display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:15px;color:var(--ink-2);line-height:1.45}
.pv-opt .next li::before{content:counter(n);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--deep);color:#fff;font-weight:800;font-size:13px}
.pv-opt .close .lead-unit{max-width:none;margin:0;background:#fff;border-radius:20px;padding:24px;box-shadow:0 1px 2px rgba(14,22,24,.06),0 24px 48px -30px rgba(0,54,60,.45)}
.pv-opt .close .lead-unit .fhead h2{font-size:21px}
.pv-opt .close .lead-unit .fields{gap:14px}
.pv-opt .close .lead-submit{width:100%;min-height:54px}
@media(min-width:960px){
  .pv-opt .close{padding:96px 0}
  .pv-opt .closegrid{grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .pv-opt .close .lead-unit{padding:32px}
}

/* dock now also carries Call, as the live mobile bar does */
.pv-opt .dock .dk.call{color:var(--ink)}
.pv-opt .dock{gap:8px}
.pv-opt .dock .dk{flex:0 0 48px;height:48px}
@media(min-width:960px){.pv-opt .dock .dk.call{display:none}}
/* review fixes: content edge matches the live header and footer; one Apply on desktop; tighter rhythm */
.pv-opt .pg .wrap{box-sizing:content-box}
@media(min-width:960px){.pv-opt .dock{display:none}.pv-opt .sec{padding:72px 0}.pv-opt .close{padding:80px 0}}
.pv-opt .close .lead-unit .fhead h2{font-size:18px}
.pv-opt .chipnav-in{box-sizing:content-box}

/* ---- desktop redesign (10 October): reading column + sticky summary rail ---- */
.pv-opt .rail{display:none}
.pv-opt .bodygrid{display:block}
.pv-opt .sharefee.ok{box-shadow:inset 0 0 0 1.5px var(--teal);color:var(--teal-dark)}
@media(min-width:1100px){
  .pv-opt .bodygrid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:56px;max-width:var(--max);margin:0 auto;padding:0 var(--gut);box-sizing:content-box;align-items:start}
  .pv-opt .maincol{min-width:0}
  .pv-opt .maincol .wrap{max-width:none;padding:0;margin:0}
  .pv-opt .maincol .sec{padding:64px 0;background:none!important;border-top:1px solid var(--line)}
  .pv-opt .maincol .sec:first-child{border-top:0;padding-top:48px}
  .pv-opt .maincol .sub{max-width:62ch}
  /* section interiors sized for a 770px column */
  .pv-opt .maincol #fees .wrap{display:grid;grid-template-columns:1fr;gap:16px}
  .pv-opt .maincol #fees .notes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:0}
  .pv-opt .maincol #fees .fees{padding:28px}
  .pv-opt .maincol .two{grid-template-columns:1fr 1fr;gap:40px}
  .pv-opt .maincol #study .two{grid-template-columns:.85fr 1.15fr;gap:32px;align-items:start}
  .pv-opt .maincol #study .ph{aspect-ratio:4/5}
  .pv-opt .maincol .sems{grid-template-columns:1fr 1fr!important;gap:14px}
  .pv-opt .maincol #compare .swipe{grid-template-columns:1fr 1fr!important;gap:14px}
  .pv-opt .maincol .ranks{grid-template-columns:repeat(3,1fr)}
  .pv-opt .maincol .faqgrid{grid-template-columns:1fr;gap:4px}
  .pv-opt .maincol .faqgrid .head{position:static}
  .pv-opt .maincol .askrow{grid-template-columns:1fr 1fr}
  .pv-opt .maincol .proofs{grid-template-columns:repeat(3,1fr)}
  .pv-opt .maincol .jobs{grid-template-columns:1fr 1fr}
  .pv-opt .maincol #careers .honest{max-width:680px}
  /* the rail */
  .pv-opt .rail{display:block;position:sticky;top:calc(var(--hh) + var(--navh, 60px) + 24px);margin-top:48px;margin-bottom:64px}
  .pv-opt .railcard{display:grid;gap:10px;padding:24px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line-soft),0 24px 48px -32px rgba(0,54,60,.45)}
  .pv-opt .rail-logo{display:flex;align-items:center;height:28px}
  .pv-opt .rail-logo .logo-u{height:22px;width:auto;max-width:150px}
  .pv-opt .rail-name{font-weight:700;font-size:16px;letter-spacing:-.01em}
  .pv-opt .rail-l{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .pv-opt .rail-fee{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1}
  .pv-opt .rail-sub{font-size:13px;color:var(--ink-2)}
  .pv-opt .railcard .btn{width:100%;min-height:50px}
  .pv-opt .rail-wa svg{width:20px;height:20px;color:var(--wa)}
  .pv-opt .rail-facts{display:grid;margin:6px 0 0;border-top:1px solid var(--line-soft)}
  .pv-opt .rail-facts div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
  .pv-opt .rail-facts dt{color:var(--ink-3);font-weight:600}
  .pv-opt .rail-facts dd{margin:0;font-weight:700;text-align:right}
  .pv-opt .rail-link{font-weight:700;color:var(--teal-dark);font-size:14px;text-decoration:underline;text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}
  .pv-opt .rail-call{font-size:13px;color:var(--ink-3)}
  .pv-opt .rail-call a{color:var(--ink);font-weight:700}
  /* with the rail always in view, the bar's Apply chip is redundant */
  .pv-opt .chipnav-apply{display:none}
  /* hero sits on the same grid as the body below it */
  .pv-opt .hero-grid{grid-template-columns:minmax(0,1fr) 336px;gap:56px}
  .pv-opt .hero .scene{aspect-ratio:4/5;max-height:420px}
}
@media(min-width:1100px){
  .pv-opt .maincol p{max-width:680px}
  .pv-opt .rail{margin-bottom:0}
  .pv-opt .railcard{gap:12px;padding:22px}
  .pv-opt .rail-top{display:grid;gap:6px}
  .pv-opt .rail-name{font-size:15px}
  .pv-opt .rail-l{margin-top:2px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
  .pv-opt .rail-fee{font-size:36px}
  .pv-opt .railcard .btn{min-height:48px}
  .pv-opt .rail-facts{grid-template-columns:1fr 1fr;gap:8px;border:0;margin:2px 0 0}
  .pv-opt .rail-facts div{display:grid;gap:2px;padding:10px 12px;border:0;border-radius:12px;background:var(--paper)}
  .pv-opt .rail-facts dt{font-size:12px}
  .pv-opt .rail-facts dd{text-align:left;font-size:14px}
  .pv-opt .rail-foot{display:flex;justify-content:space-between;gap:10px;font-size:13px}
  .pv-opt .rail-foot a{display:inline-flex;align-items:center;min-height:32px;font-weight:700;color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px}
  .pv-opt .rail-foot a[href^=tel]{color:var(--ink-2);font-weight:600;text-decoration:none}
}
@media(min-width:960px){.pv-opt .closegrid{align-items:start}.pv-opt .closeinfo{padding-top:24px}}
.pv-opt .chipnav{background:#fff}

/* ---- size scale (9 October): calm prices, one scale for every widget ---- */
/* the lead form lives outside main, so it needs its own box model */
.lead-scrim,.lead-scrim *,.lead-scrim *::before,.lead-scrim *::after{box-sizing:border-box}
/* headings */
.pv-opt .hero h1{font-size:clamp(28px,7.6vw,44px);line-height:1.08;letter-spacing:-.035em}
.pv-opt .h1u{font-size:clamp(16px,4.2vw,20px);margin-top:6px}
.pv-opt .pg h2,.pv-opt .close-h{font-size:clamp(22px,6vw,30px);line-height:1.15;letter-spacing:-.025em}
.pv-opt #university .head h2{font-size:clamp(20px,5.2vw,26px)}
/* prices: figures read as data, not as display type */
.pv-opt .fact b{font-size:16px;font-weight:700}
.pv-opt .fees .fig .num{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.pv-opt .fees .fig .term{font-size:15px}
.pv-opt .rail-fee{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.pv-opt .uc-fee{font-size:20px;font-weight:700;letter-spacing:-.01em}
.pv-opt .dock-fee b{font-size:15px;font-weight:700}
.pv-opt .rk{font-size:22px;font-weight:700;letter-spacing:-.02em}
@media(min-width:960px){.pv-opt .fees .fig .num{font-size:32px}}
/* fee widget */
.pv-opt .fees{gap:14px}
.pv-opt .sched{height:28px;gap:4px}
.pv-opt .sched i{border-radius:6px}
.pv-opt .fees-top h2{font-size:clamp(22px,6vw,30px)}
/* buttons and controls */
.pv-opt .hero .btn{min-height:48px}
.pv-opt .wa-btn{flex-basis:48px;height:48px}
.pv-opt .railcard .btn{min-height:44px;font-size:15px}
.pv-opt .opt{min-height:48px;padding:8px 14px;font-size:15px}
.pv-opt .sharefee{min-height:44px;font-size:14px}
/* cards: one padding and radius rhythm */
.pv-opt .fees,.pv-opt .checkcard{padding:20px;border-radius:20px}
@media(min-width:960px){.pv-opt .maincol #fees .fees{padding:24px}}
.pv-opt .uc,.pv-opt .fitcard,.pv-opt .ladder{padding:18px;border-radius:20px}
.pv-opt .conds li{padding:16px;border-radius:16px}
.pv-opt .conds .n{width:36px;height:36px;border-radius:12px;font-size:15px}
.pv-opt .conds li{grid-template-columns:36px 1fr}
.pv-opt .conds b{font-size:15.5px}
.pv-opt .proofs div{padding:16px}
.pv-opt .ranks .rkc{padding:14px}
.pv-opt .steps li{padding:12px 14px}
/* lead form: one compact form, used by the pop-up and the end of the page */
.lead-modal{max-width:440px;padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px))}
@media(min-width:768px){.lead-modal{padding:24px 24px 22px}}
.lead-unit .fhead h2{font-size:19px;letter-spacing:-.015em}
.lead-unit .fnote{font-size:14px;margin-top:4px}
.lead-unit .fields{gap:12px;margin-top:14px}
.lead-field{gap:5px}
.lead-field label{font-size:13px}
.lead-field input{min-height:46px;height:46px;border-radius:12px;padding:0 14px}
.lead-field .telwrap span{border-radius:12px 0 0 12px;padding:0 12px}
.lead-field .telwrap input{border-radius:0 12px 12px 0}
.lead-submit{min-height:48px;height:48px;font-size:15px}
.lead-consent{font-size:12px;margin-top:10px}
.pv-opt .close .lead-unit{padding:22px;border-radius:20px;max-width:440px}
.pv-opt .close .lead-unit .fhead h2{font-size:18px}
.pv-opt .close .lead-submit{min-height:48px;height:48px}
@media(min-width:960px){.pv-opt .closegrid{grid-template-columns:1fr 440px;justify-content:space-between}.pv-opt .close .lead-unit{padding:24px}}
.pv-opt .close-h{max-width:18ch}

/* ---- SEO round (18 October): compare table, guide links, sibling specialisations, documents ---- */
/* compare: one real table; below 900px each row is a swipe card */
.pv-opt .ctable{display:block;width:100%;border-collapse:separate;border-spacing:0}
.pv-opt .ctable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pv-opt .ctable tbody.swipe{margin-top:18px}
.pv-opt .ctable tr.uc{display:grid;align-content:start;gap:8px}
.pv-opt .ctable th,.pv-opt .ctable td{display:block;padding:0;text-align:left;font-size:14px;font-weight:400;color:var(--ink-2)}
.pv-opt .ctable th[scope=row]{display:grid;gap:6px;justify-items:start;margin-bottom:2px}
.pv-opt .ctable .uc-u{font-size:14px;font-weight:700;color:var(--ink-2)}
.pv-opt .ctable td.uc-fee{color:var(--ink);font-size:20px;font-weight:700;letter-spacing:-.01em}
.pv-opt .ctable .unsaid{font-style:italic;color:var(--ink-3)}
.pv-opt .uc-a{font-size:14px;font-weight:600;color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;min-height:24px;display:inline-flex;align-items:center}
@media(min-width:900px){
  .pv-opt .ctable{display:table;margin-top:22px;background:#fff;border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
  .pv-opt .ctable thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:table-header-group}
  .pv-opt .ctable thead th{display:table-cell;padding:14px 14px 12px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);vertical-align:bottom}
  .pv-opt .ctable tbody.swipe,.pv-opt .maincol #compare .ctable tbody.swipe{display:table-row-group!important;margin:0;padding:0;overflow:visible}
  .pv-opt .ctable tr.uc{display:table-row;padding:0;border-radius:0;background:#fff;box-shadow:none;transform:none}
  .pv-opt .ctable tbody th,.pv-opt .ctable tbody td{display:table-cell;padding:16px 14px;vertical-align:top;border-bottom:1px solid var(--line-soft)}
  .pv-opt .ctable tbody tr:last-child>*{border-bottom:0}
  .pv-opt .ctable th[scope=row]{display:table-cell;margin:0}
  .pv-opt .ctable th[scope=row]>*{display:block}
  .pv-opt .ctable th[scope=row] .uc-u{margin:6px 0 4px}
  .pv-opt .ctable th[scope=row] .pill{display:inline-flex}
  .pv-opt .ctable td.uc-fee{font-size:17px;white-space:nowrap}
  .pv-opt .ctable tr.uc.mine{background:var(--tint);box-shadow:inset 3px 0 0 var(--teal)}
  .pv-opt #compare [data-swipe] .dots{display:none}
}
@media(min-width:900px) and (hover:hover) and (pointer:fine){
  .pv-opt .ctable tr.uc:hover{transform:none;background:var(--mist);box-shadow:inset 3px 0 0 var(--line)}
  .pv-opt .ctable tr.uc.mine:hover{transform:none;background:var(--tint);box-shadow:inset 5px 0 0 var(--teal)}
}
/* guide links under a section */
.pv-opt .reads{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:20px;font-size:14px}
.pv-opt .reads-k{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.pv-opt .reads ul{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0;padding:0}
.pv-opt .reads a,.pv-opt .more-a,.pv-opt .sib-l a{color:var(--teal-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pv-opt .reads a,.pv-opt .more-a{display:inline-flex;min-height:24px;align-items:center}
.pv-opt .more-a{margin-top:8px;font-size:14px}
/* other specialisations at this university */
.pv-opt .sibs{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.pv-opt .sib-l{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0 0;padding:0}
.pv-opt .sib-l a{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-2)}
@media(hover:hover) and (pointer:fine){.pv-opt .sib-l a:hover{box-shadow:inset 0 0 0 1px var(--teal);color:var(--teal-dark)}}
.pv-opt .docs{margin-bottom:14px}
.pv-opt .sib-l{gap:6px}
.pv-opt .sib-l a{min-height:32px;padding:0 11px;font-size:13px}
.pv-opt .steps + .h3gap{margin-top:24px}
/* the specialisation beside its closest options at the same university */
.pv-opt .nbs{margin-top:28px}
.pv-opt .nbs h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.pv-opt .nbs .sub{margin-top:6px;font-size:15px;color:var(--ink-2);max-width:62ch}
.pv-opt .nb-grid{display:grid;gap:12px;margin-top:14px}
.pv-opt .nb{padding:18px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.pv-opt .nb.mine{box-shadow:inset 0 0 0 2px var(--teal),var(--shadow)}
.pv-opt .nb h4{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;font-weight:700}
.pv-opt .nb h4 a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pv-opt .nb ul{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}
.pv-opt .nb li{padding-left:14px;position:relative}
.pv-opt .nb li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--line)}
.pv-opt .nb.mine li::before{background:var(--teal)}
@media(min-width:700px){.pv-opt .nb-grid{grid-template-columns:repeat(3,1fr)}}
.pv-opt .inds{margin-top:20px}
.pv-opt .ind-l{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0 0;padding:0}
.pv-opt .ind-l li{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:var(--tint);font-size:13px;font-weight:600;color:var(--ink-2)}
@media(max-width:479px){.pv-opt .fees-top{flex-wrap:wrap;row-gap:8px}.pv-opt .fees-top h2{flex:1 0 100%}}
@media(max-width:699px){
  .pv-opt .nb-grid{grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);
    margin:14px calc(var(--gut) * -1) 0;padding:2px var(--gut) 12px;scrollbar-width:none;overscroll-behavior-x:contain}
  .pv-opt .nb{scroll-snap-align:start}
}

/* ---- design round (19 October): heading 14.1, trust row, photographs, shipped tokens, motion and hover ---- */
/* shipped tokens (sidenotes/style.css :root) */
.pv-opt{--ink-2:#46545A;--line:#D2DAD8;--line-soft:#E6EBE9;--line-field:#7F8E8B}
.pv-opt .lead-field input,.lead-scrim .lead-field input{border-color:var(--line-field,#7F8E8B)}
.pv-opt .num,.pv-opt [data-fig],.pv-opt .rail-fee,.pv-opt .uc-fee,.pv-opt .dock-fee b,.pv-opt .fact b,.pv-opt .ctable td,.pv-opt .rk,.pv-opt .conc b{font-variant-numeric:tabular-nums}
/* section heading 14.1: ink, then the last noun phrase in teal */
.pv-opt h2 .hl{color:var(--teal)}
.pv-opt .ladder h2 .hl,.pv-opt .close h2 .hl{color:var(--lite)}
/* trust row in the hero */
.pv-opt .trust{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.pv-opt .trust li{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px 0 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:600;color:var(--ink)}
.pv-opt .trust li::before{content:"";width:14px;height:14px;flex:none;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2300707A'/%3E%3Cpath d='M4.6 8.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pv-opt .hero .trust + .facts{margin-top:14px}
/* photographs */
.pv-opt .ph-fig{margin:0;overflow:hidden;border-radius:20px;background:var(--tint)}
.pv-opt .ph-fig img{display:block;width:100%;height:100%;object-fit:cover}
.pv-opt .ph-fig.band{aspect-ratio:16/7;margin-top:16px}
.pv-opt .ph-fig.band img{object-position:center 40%}
.pv-opt .ph-fig.portrait{aspect-ratio:16/9}
.pv-opt .ph-fig.portrait img{object-position:center 25%}
@media(max-width:959px){.pv-opt .ph-fig.portrait.headroom img{object-position:center 6%}}
@media(min-width:960px){
  .pv-opt #fees .ph-fig.band{grid-column:1/-1;margin-top:0;aspect-ratio:21/7}
  .pv-opt .maincol .jobs{grid-template-columns:240px 1fr;grid-template-areas:"ph fit" "ph ladder"}
  .pv-opt .maincol .jobs .ph-fig{grid-area:ph;aspect-ratio:auto;height:100%}
  .pv-opt .maincol .jobs .fitcard{grid-area:fit}.pv-opt .maincol .jobs .ladder{grid-area:ladder}
}
/* motion: photographs ease in once; the waiting state is added by script, so content shows if script fails */
.pv-opt .ph-fig img{transition:transform 900ms cubic-bezier(.2,0,0,1),opacity 600ms cubic-bezier(.2,0,0,1)}
.pv-opt .ph-pend img{opacity:0;transform:scale(1.06)}
.pv-opt .hero h1 .h1u{transition:opacity 500ms cubic-bezier(.2,0,0,1)}
/* press feedback on touch and mouse */
.pv-opt .btn,.pv-opt .btn-main,.pv-opt .chipnav-a,.pv-opt .sib-l a,.pv-opt .ask,.pv-opt .seg button{transition:transform 120ms ease-out}
.pv-opt .btn:active,.pv-opt .btn-main:active,.pv-opt .chipnav-a:active,.pv-opt .sib-l a:active,.pv-opt .ask:active,.pv-opt .seg button:active{transform:scale(.97)}
.pv-opt .nb,.pv-opt .fitcard,.pv-opt .proofs>div{transition:transform 200ms cubic-bezier(.2,0,0,1)}
@media(hover:hover) and (pointer:fine){
  .pv-opt .ph-fig:hover img{transform:scale(1.03)}
  .pv-opt .nb:hover,.pv-opt .proofs>div:hover{transform:translateY(-3px)}
  .pv-opt .sib-l a:hover{transform:translateY(-1px)}
  .pv-opt .reads a:hover,.pv-opt .more-a:hover,.pv-opt .uc-a:hover{opacity:.8}
}
@media(prefers-reduced-motion:reduce){
  .pv-opt .ph-fig img,.pv-opt .btn,.pv-opt .btn-main,.pv-opt .chipnav-a,.pv-opt .sib-l a,.pv-opt .ask,.pv-opt .seg button,.pv-opt .nb,.pv-opt .fitcard,.pv-opt .proofs>div{transition:none}
  .pv-opt .ph-pend img{opacity:1;transform:none}
  .pv-opt .btn:active,.pv-opt .btn-main:active{transform:none}
}
@media(max-width:479px){.pv-opt .trust{gap:6px}.pv-opt .trust li{font-size:12px;padding:0 10px 0 8px;gap:5px}}
/* trust line and sources, as on the guide pages (19 October) */
.pv-opt .trustline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.pv-opt .trustline .tl-ic{width:16px;height:16px;flex:none;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l5.5 2v4.2c0 3.3-2.3 6.3-5.5 7.3-3.2-1-5.5-4-5.5-7.3V3z' fill='%2300707A'/%3E%3Cpath d='M5.3 8.1l1.8 1.8 3.6-3.8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pv-opt .trustline a{color:var(--teal-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;display:inline-flex;min-height:24px;align-items:center}
.pv-opt .srcs{display:grid;gap:10px;margin:16px 0 0;padding:0 0 0 20px;font-size:15px}
.pv-opt .srcs li{padding-left:4px;color:var(--ink-2)}
.pv-opt .srcs a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line-field)}
.pv-opt .srcs .dom{display:block;font-size:13px;color:var(--ink-2)}
@media(hover:hover) and (pointer:fine){.pv-opt .srcs a:hover{text-decoration-color:var(--teal);color:var(--teal-dark)}}
.pv-opt .trustline{display:block}
.pv-opt .trustline .tl-ic{display:inline-block;vertical-align:-3px;margin-right:6px}
.pv-opt .trustline a{display:inline;min-height:0}
.pv-opt .close h2 .hl{color:var(--teal)}
/* accessibility fixes (20 October, WCAG 2.2 audit) */
.pv-opt .skip:focus{position:fixed;left:8px;top:8px;z-index:200}
.pv-opt .hero .scene{max-width:100%}
.pv-opt .hero .scene img{max-width:100%}
@media(max-width:359px){.pv-opt .dock .dock-fee{display:none}}   /* the four dock items need 348px; the fee shows in the hero and fees section */
@media(max-width:359px){.pv-opt .hero .facts{grid-template-columns:repeat(3,minmax(0,1fr))}.pv-opt .hero .fact b,.pv-opt .hero .fact small{overflow-wrap:anywhere}.pv-opt .hero-grid,.pv-opt .hero-copy{min-width:0}}
/* impeccable critique (20 Oct): the coloured side stripe on the fee notes is a stock generated-UI tell; a quiet tinted panel instead */
.pv-opt .anote{box-shadow:none;background:var(--tint);border-radius:16px}
.pv-opt .anote .who{color:var(--teal-dark)}
.pv-opt .anote p{color:var(--ink)}

/* Refresh round, 20 October: polish (make-interfaces-feel-better, web-design-guidelines) */
:root{color-scheme:light}
.pv-opt{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.pv-opt p,.pv-opt li,.pv-opt dd{text-wrap:pretty}
.pv-opt .logo-u{width:auto}
.pv-opt a,.pv-opt button,.pv-opt summary,.pv-opt label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pv-opt .wrap > p.small,.pv-opt .curric-foot,.pv-opt .sub{max-width:70ch}
/* Labels: sentence case at 600 (design system: buttons, labels, eyebrows 600); the tracked capitals on every block read as template */
.pv-opt .k,.pv-opt .kv dt,.pv-opt .sem-k,.pv-opt .cq legend,.pv-opt .anote .who,.pv-opt .rail-l,.pv-opt .ctable thead th,.pv-opt .reads-k{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
/* One weight ladder on the page: 400 text, 600 labels and buttons, 700 subheads, 800 headlines */
.pv-opt .btn,.pv-opt .pill,.pv-opt .lead-field label{font-weight:600}
.pv-opt .lead-unit .fhead h2{font-weight:800}
.pv-opt p.small{max-width:70ch}
.pv-opt .cmp-subs{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px;font-size:13px;color:var(--ink-2)}
/* Reduced motion keeps orientation: the dock fades in place instead of sliding up (accessible-animation, tier 2) */
@media(prefers-reduced-motion:reduce){.pv-opt .dock{transition:opacity .15s;opacity:0}.pv-opt .dock.on{opacity:1}}
/* Phones: the chip bar keeps a sideways flick to itself, and controls show no long-press callout (mobile-native) */
.pv-opt .chipnav{overscroll-behavior-x:contain}
.pv-opt .btn,.pv-opt .chipnav-a,.pv-opt .ask,.pv-opt .seg button,.pv-opt .qbtn{-webkit-touch-callout:none}
/* Readability floor (design-taste inspector, ui-ux-pro-max): running text 16px, nothing read below 13px */
.pv-opt main .cmp-subs li{font-size:14px;line-height:1.4}
.pv-opt .fact small,.pv-opt .rail dt,.pv-opt .trust li,.pv-opt .lead-consent{font-size:13px}
.pv-opt .head .sub,.pv-opt .nbs .sub,.pv-opt .kv dd,.pv-opt .anote p,.pv-opt .proofs p,.pv-opt #recognition p:not([class]),.pv-opt .cres p,.pv-opt .ticks li,.pv-opt .fitlist li,.pv-opt .srcs li,.pv-opt .honest{font-size:16px}
/* Bug hunt (20 October): breadcrumb separator after each item, so a wrapped line never starts with "/" */
.pv-opt .crumbs li+li::before{content:none}
.pv-opt .crumbs li:not(:last-child)::after{content:"/";margin:0 8px;color:var(--ink-3)}
/* Desktop hero (Gulshan, 20 October: the photo was cropped wrongly). The photos are landscape, so the frame is 3:2
   and the media column wider, which keeps both people in shot instead of cutting one out of a 4:5 portrait crop. */
@media(min-width:960px){
  .pv-opt .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:48px}
  .pv-opt .hero .scene{aspect-ratio:3/2;max-height:none}
  .pv-opt .hero .scene img{object-position:50% 40%}
}
/* Comments round (20 October) */
/* other specialisations: link cards in a grid instead of a row of chips */
.pv-opt .sibs{margin-top:28px}
.pv-opt .sibs-h{font-size:18px;font-weight:700;margin:0 0 12px}
.pv-opt .sib-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px}
.pv-opt .sib-grid a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 16px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-weight:600;text-decoration:none;transition:transform .14s var(--ease-out)}
.pv-opt .sib-grid a::after{content:"";flex:none;width:18px;height:18px;background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300707A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.pv-opt .sib-grid a:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.pv-opt .sib-grid a:hover{box-shadow:inset 0 0 0 1.5px var(--teal);color:var(--teal-dark)}}
/* compare rows: a clear "View course" button for each other university */
.pv-opt .uc-a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;margin-top:8px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--teal);color:var(--teal-dark);font-size:14px;font-weight:600;text-decoration:none;transition:transform .14s var(--ease-out)}
.pv-opt .uc-a::after{content:"";width:16px;height:16px;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300707A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.pv-opt .uc-a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pv-opt .uc-a:hover{background:var(--teal);color:#fff}.pv-opt .uc-a:hover::after{filter:brightness(0) invert(1)}}
.pv-opt .sib-grid li{display:flex}.pv-opt .sib-grid a{flex:1}
/* Comments round 2 (20 October): fee total line, compare "View course", rotating specialisations, apply band, dock */
.pv-opt .fee-total{margin:4px 0 0;padding:12px 14px;border-radius:12px;background:var(--mist);font-size:15px;line-height:1.5;color:var(--ink)}
/* compare: a quiet "View course" button in its own column; a full-width button at the foot of each phone card */
.pv-opt .uc-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--tint);color:var(--teal-dark);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .14s var(--ease-out)}
.pv-opt .uc-go::after{content:"";width:16px;height:16px;flex:none;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004E56' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.pv-opt .uc-go:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pv-opt .uc-go:hover{background:var(--teal);color:#fff}.pv-opt .uc-go:hover::after{filter:brightness(0) invert(1)}}
.pv-opt .uc-go-c:empty{padding:0}
@media(max-width:899px){.pv-opt .uc-go-c{display:block}.pv-opt .uc-go{width:100%;margin-top:6px}}
@media(min-width:900px){.pv-opt .uc-go-c{text-align:right;vertical-align:middle}}
/* other specialisations: the last card leads to the full list */
.pv-opt .sib-all a{background:var(--deep);color:#fff;box-shadow:none}
.pv-opt .sib-all a::after{filter:brightness(0) invert(1)}
@media (hover:hover) and (pointer:fine){.pv-opt .sib-all a:hover{background:var(--teal);color:#fff;box-shadow:none}}
/* apply band: deep teal, the ask and three facts beside a white form card; no logo */
.pv-opt .close{background:var(--deep);color:#fff}
.pv-opt .close .close-h{color:#fff}
.pv-opt .close .close-h .hl{color:var(--lite)}
.pv-opt .close-lead{margin:0;max-width:40ch;font-size:17px;line-height:1.55;color:rgba(255,255,255,.88)}
.pv-opt .close-facts{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:520px}
.pv-opt .close-facts li{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pv-opt .close-facts span{font-size:13px;color:rgba(255,255,255,.75)}
.pv-opt .close-facts b{font-size:15px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.pv-opt .close .lead-unit{box-shadow:0 18px 40px -24px rgba(0,0,0,.55)}
@media(max-width:479px){.pv-opt .close-facts{grid-template-columns:1fr 1fr 1fr;gap:6px}.pv-opt .close-facts li{padding:10px}.pv-opt .close-facts b{font-size:14px}}
@media(min-width:960px){.pv-opt .closegrid{align-items:center}.pv-opt .closeinfo{padding-top:0}}
/* phone dock: fee on the left, WhatsApp and Apply Now on the right; the call button is gone */
.pv-opt .dock{gap:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pv-opt .dock .dock-fee{flex:1 1 auto;min-width:0;display:grid;gap:0}
.pv-opt .dock .dock-fee small{font-size:13px;color:var(--ink-3)}
.pv-opt .dock .dock-fee b{font-size:15px;font-weight:800}
.pv-opt .dock .btn-main{flex:0 0 auto;min-height:48px;padding:0 22px}
.pv-opt .dock .dk.wa{order:2}
.pv-opt .dock .btn-main{order:3}
@media(max-width:359px){.pv-opt .dock .dock-fee{display:grid}.pv-opt .dock .btn-main{padding:0 16px}}
/* Design review fixes (20 October) */
/* the apply card keeps dark text inside the dark band (labels and the +91 prefix were white on white) */
.pv-opt .close .lead-unit{color:var(--ink)}
.pv-opt .close .lead-unit .fhead h2{color:var(--ink)}
/* eligibility options: the radio sits beside the text, so a wrapped line lines up with the first */
.pv-opt .opt span{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;align-items:center}
.pv-opt .opt span::before{margin-right:0;vertical-align:0}
/* fee notes: label and text start at the same height in both cards */
.pv-opt .anote{align-content:start}
/* class details on phones: the label sits above its answer, so answers get the full width */
@media(max-width:599px){.pv-opt #study .kv div{grid-template-columns:1fr;gap:2px}.pv-opt #study .kv dt{padding-top:0}}
/* desktop rail facts: one fact per row, no lone tile */
.pv-opt .rail-facts{grid-template-columns:1fr}
.pv-opt .rail-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
/* other specialisations: two columns, the full-list link across the bottom */
@media(min-width:600px){.pv-opt .sib-grid{grid-template-columns:1fr 1fr}.pv-opt .sib-all{grid-column:1/-1}}
/* Comments round 4 (20 October, Amity page) */
/* fee box: on wide screens a second column lists every plan, so the box is not half empty */
.pv-opt .fees-plans{display:none}
@media(min-width:900px){
  .pv-opt .fees-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:28px;align-items:start}
  .pv-opt .fees-plans{display:block;padding:16px 18px;border-radius:14px;background:var(--mist)}
  .pv-opt .fees-plans ul{list-style:none;margin:8px 0 0;padding:0;display:grid}
  .pv-opt .fees-plans li{display:grid;grid-template-columns:1fr auto;column-gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
  .pv-opt .fees-plans li:last-child{border-bottom:0}
  .pv-opt .fees-plans .pl-k{font-weight:600;color:var(--ink)}
  .pv-opt .fees-plans .pl-how{grid-column:1;font-size:13px;color:var(--ink-2)}
  .pv-opt .fees-plans b{grid-column:2;grid-row:1/span 2;align-self:center;font-size:15px}
}
/* compare table: fixed columns, every row built the same way, buttons level */
@media(min-width:900px){
  .pv-opt .ctable{table-layout:fixed;width:100%}
  .pv-opt .ctable thead th:nth-child(1){width:30%}
  .pv-opt .ctable thead th:nth-child(2){width:15%}
  .pv-opt .ctable thead th:nth-child(3){width:12%}
  .pv-opt .ctable thead th:nth-child(4){width:25%}
  .pv-opt .ctable thead th:nth-child(5){width:18%}
  .pv-opt .ctable th,.pv-opt .ctable td{vertical-align:top}
  .pv-opt .ctable thead th{white-space:nowrap;vertical-align:bottom}
  .pv-opt .uc-go-c{text-align:right}
}
.pv-opt .uc-here{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:#fff;color:var(--teal-dark);font-size:13px;font-weight:600}
.pv-opt .uc .uc-logo{display:flex;align-items:center;height:28px}
/* apply band: one tidy row, less empty space */
@media(min-width:960px){
  .pv-opt .close{padding:64px 0}
  .pv-opt .closegrid{max-width:1040px;margin:0 auto;grid-template-columns:minmax(0,1fr) 420px;gap:56px;align-items:center}
}
/* apply band, second pass (Gulshan, 20 October: still a wide empty middle at 1440): heading and form sit as one centred pair */
@media(min-width:960px){
  .pv-opt .closegrid{max-width:none;grid-template-columns:minmax(0,380px) 420px;justify-content:center;gap:72px}
  .pv-opt .close .close-h{font-size:36px;line-height:1.1;letter-spacing:-.03em;max-width:none}
  .pv-opt .close-lead{font-size:18px;max-width:34ch}
}
/* curriculum: a plain line when the university does not list the specialisation's subjects */
.pv-opt .cur-note{margin:18px 0 0;max-width:68ch;font-size:16px;line-height:1.55;color:var(--ink-2)}
/* compare table inside the 768px reading column (rail showing): the button column was 16px too narrow and spilled out */
@media(min-width:900px){
  .pv-opt .ctable thead th:nth-child(1){width:27%}
  .pv-opt .ctable thead th:nth-child(2){width:14%}
  .pv-opt .ctable thead th:nth-child(3){width:11%}
  .pv-opt .ctable thead th:nth-child(4){width:27%}
  .pv-opt .ctable thead th:nth-child(5){width:21%}
  .pv-opt .uc-go{white-space:nowrap}
  .pv-opt .ctable .uc-go-c{padding-left:8px}
}
/* "This page" pill: white only on the tinted desktop row; on the white phone card it takes the tint */
@media(max-width:899px){.pv-opt .uc-here{background:var(--teal-tint)}}
/* phone compare card: an empty cell names its column ("Subjects: Not listed"), since the card has no header row */
@media(max-width:899px){.pv-opt .ctable td.unsaid[data-col]::before{content:attr(data-col) ": ";font-style:normal;color:var(--ink-2)}}
/* phone compare cards: the course button sits on the card's bottom edge, so it lines up across cards of any length */
@media(max-width:899px){
  .pv-opt .ctable tr.uc{display:flex;flex-direction:column;gap:8px}
  .pv-opt .ctable tr.uc .uc-go-c{margin-top:auto}
}
/* fees: the payment plans column is gone (20 October), so the fee box takes the full width again */
.pv-opt .fees-grid{display:block}
/* ---- fee statement (20 October redesign): plan switcher, the chosen plan's figure and its payments side by side,
   a receipt that follows the plan, then the photo beside the two notes. Tone steps, no hairlines, tabular figures. */
.pv-opt .fees.fx{display:grid;gap:20px;padding:22px 18px 18px;border-radius:20px;background:#fff}
.pv-opt .fx .fees-top h2{margin:0}
.pv-opt .fx-body{display:grid;gap:18px}
.pv-opt .fx .fig{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px}
.pv-opt .fx .fig .num{font-size:40px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.pv-opt .fx .fig .term{font-size:16px;font-weight:400;color:var(--ink-2)}
.pv-opt .fx .note{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--ink);max-width:38ch}
.pv-opt .fx .diff{margin:8px 0 0;font-size:15px;font-weight:600;color:var(--teal-dark)}
.pv-opt .fx-k{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--ink-2)}
.pv-opt .fx-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pv-opt .fx-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:44px;padding:11px 14px;border-radius:12px;background:var(--mist);font-size:15px}
.pv-opt .fx-rows li span{color:var(--ink-2)}
.pv-opt .fx-rows li b{font-size:16px;font-weight:700;color:var(--ink)}
.pv-opt .fx-foot{display:grid;gap:14px;padding:16px;border-radius:16px;background:var(--tint)}
.pv-opt .fx-receipt{margin:0;display:grid;gap:6px}
.pv-opt .fx-receipt div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pv-opt .fx-receipt dt{font-size:15px;color:var(--ink-2)}
.pv-opt .fx-receipt dd{margin:0;font-size:16px;font-weight:600;color:var(--ink)}
.pv-opt .fx-receipt .fx-sum{margin-top:4px;padding-top:10px;box-shadow:inset 0 2px 0 rgba(0,78,86,.14)}
.pv-opt .fx-receipt .fx-sum dt{font-size:16px;font-weight:700;color:var(--ink)}
.pv-opt .fx-receipt .fx-sum dd{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--deep)}
.pv-opt .fx-foot .sharefee{justify-self:start;background:#fff}
.pv-opt .fx .conc{margin:0;border-radius:14px;background:var(--mist);padding:0 14px}
.pv-opt .fx .conc summary{min-height:48px;display:flex;align-items:center;gap:8px;font-weight:600}
.pv-opt .fx-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 10px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--teal-dark)}
.pv-opt .fx .conc li b{white-space:nowrap}
.pv-opt .fx .conc .conc-note{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.pv-opt .fx .conc ul+.conc-note{margin-top:4px}
.pv-opt .fx .fig .num.is-text{font-size:30px;letter-spacing:-.025em;line-height:1.15}
.pv-opt .fx-after{display:grid;gap:12px;margin-top:12px}
.pv-opt .fx-after .fx-photo{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:16/10}
.pv-opt .fx-after .fx-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pv-opt .fx-after .notes{display:grid;gap:12px;margin:0}
@media(min-width:700px){
  .pv-opt .fees.fx{padding:28px}
  .pv-opt .fx-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
  .pv-opt .fx .fig .num{font-size:48px}
  .pv-opt .fx .fig .num.is-text{font-size:36px}
  .pv-opt .fx-foot{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:28px}
  .pv-opt .fx-foot .sharefee{justify-self:end}
  .pv-opt .fx-foot:not(:has(.fx-sum)){align-items:center}   /* one receipt row (no application fee) sits level with the button */
  .pv-opt .fx-after{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}
  .pv-opt .fx-after .fx-photo{aspect-ratio:auto;min-height:100%}
  .pv-opt .maincol #fees .fx-after .notes{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:no-preference){
  .pv-opt .fx-rows.go li{animation:fxRow .34s cubic-bezier(.2,0,0,1) both;animation-delay:calc(var(--i,0) * 45ms)}
}
@keyframes fxRow{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* compare table, third pass (21 October): the button column has a fixed width that always holds "View course", and the
   text columns share what is left, so the button can never spill out of the card at any width from 900px up */
@media(min-width:900px){
  .pv-opt .ctable thead th:nth-child(1){width:auto}
  .pv-opt .ctable thead th:nth-child(2){width:15%}
  .pv-opt .ctable thead th:nth-child(3){width:12%}
  .pv-opt .ctable thead th:nth-child(4){width:30%}
  .pv-opt .ctable thead th:nth-child(5){width:148px}
  .pv-opt .ctable .uc-go{padding-left:14px;padding-right:14px}
}
@media(min-width:900px){
  .pv-opt .ctable thead th:nth-child(2){width:14%}
  .pv-opt .ctable thead th:nth-child(3){width:11%}
  .pv-opt .ctable thead th:nth-child(4){width:27%}
  .pv-opt .ctable .uc-logo{max-width:100%;overflow:hidden}
  .pv-opt .ctable .uc-logo img{height:22px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
}
/* compare rows carry the university name only (no logos, 21 October): the name is the row's label, set like one */
.pv-opt .ctable .uc-u{display:block;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
/* university head (21 October): the logo sits on its own line and the heading goes below it on every page, so a narrow
   logo (DPU) no longer squeezes the heading beside it while a wide one (Manipal) pushes it down */
.pv-opt #university .head{flex-direction:column;align-items:flex-start;gap:14px}
/* all-in figure that is the pay-at-once price (Amity): a plain line under it says what instalments cost, no asterisk */
.pv-opt .fact .fact-note{display:block;margin-top:4px;font-size:13px;font-weight:400;line-height:1.35;color:var(--ink-2)}
.pv-opt .rail-note{margin:4px 0 0;font-size:13px;line-height:1.35;color:var(--ink-2)}

/* SC 2.4.11 (21 October): below 960px the dock covers the bottom of the screen, so focus scrolls stop above it */
@media(max-width:959px){html:has(.pv-opt){scroll-padding-bottom:96px}}
/* the hero facts below 360px (24 October): smaller figures and padding, so they stay inside their tiles */
@media(max-width:359px){.pv-opt .facts{gap:6px}.pv-opt .fact{padding:10px 8px}.pv-opt .fact b{font-size:clamp(12px,4.2vw,15px)}}
/* release 1.47.0: the executive MBA subject list (was inline on its pages) */
.pv-opt .elist{display:grid;margin:6px 0 0;padding:0;list-style:none;column-gap:32px}.pv-opt .elist li{padding:12px 0;border-top:1px solid var(--line);font-size:15px;font-weight:600;line-height:1.4}@media(min-width:768px){.pv-opt .elist{grid-template-columns:1fr 1fr}}

/* Site chrome guard: generated from style.css by export_theme.py */
.pv-opt #hdr,.pv-opt footer{--ink:#0E1618;--ink-2:#46545A;--line:#D2DAD8;--line-soft:#E6EBE9;--line-field:#7F8E8B;--surface:#FFFFFF;--surface-2:#F3F7F6;--teal:#00707A;--teal-dark:#004E56;--teal-deep:#00363C;--teal-tint:#DBEFF0;--amber:#FFB800;--amber-line:#B27F00;--amber-dark:#EDAA00;--wa:#0F7A6E;--wa-dark:#0E7A6D;--teal-lite:#4FC7CE;--err:#B3261E;--fs-xs:12px;--fs-sm:13px;--fs-base:14.5px;--fs-md:16px;--fs-lead:18px;--fs-xl:20px;--r-sm:6px;--r-md:10px;--r-pill:100px;--gut:40px;--t:.18s ease;font-family:"Inter",system-ui,sans-serif;font-size:var(--fs-base);line-height:1.6;color:var(--ink)}
@media(max-width:1000px){.pv-opt #hdr,.pv-opt footer{--gut:32px}}
@media(max-width:600px){.pv-opt #hdr,.pv-opt footer{--gut:24px}}
@media(max-width:359px){.pv-opt #hdr,.pv-opt footer{--gut:16px}}
.pv-opt #hdr .wrap,.pv-opt footer .wrap{max-width:1160px}
/* Lead sheet: flush to the bottom on phones (components.css sets the backdrop padding) */
@media(max-width:767px){.pv-opt .lead-scrim{padding:0}}
/* The theme's success panel: its tick is a <p> and its message is capped at 34ch by components.css, so the
   sheet's .lead-done p margin pushed both left of the centred heading */
.pv-opt .lead-done p{margin-left:auto;margin-right:auto}
.pv-opt .lead-done .lead-tick{margin:0 auto 14px}