/* ==========================================================================
   The Value Selling Portal (portal/index.html). Sits on style.css tokens.
   Light grounds throughout: the menu has many elements and reads calmer on
   paper and white than on navy. Orange stays a button colour only.

   The one loud element is the AI lane: a phone-call card. Everything else is
   compact photo tiles, so all nine items fit one desktop screen.
   ========================================================================== */

.pt{
  --ink:#233146; --sec:#5F6B7A; --line:#DCE3EC;
  --self:#2277AA; --ai:#1F6FD1; --coach:#143058;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  background:#fff; color:var(--ink);
}
.pt [hidden]{display:none !important}
.pt .btn{border-radius:3px}
.pt h1, .pt h2, .pt h3{text-wrap:balance}
.pt-in{max-width:1320px; margin:0 auto; padding-inline:clamp(16px, 3.4vw, 40px)}
html.pt-locked{overflow:hidden}

/* ---------- header ---------- */
.pt-head{background:#fff; border-bottom:1px solid var(--line)}
.pt-head__in{display:flex; align-items:center; gap:16px; min-height:60px}
.pt-head .logo img{height:26px; width:auto; display:block}
.pt-head__name{font:600 15px/1.2 var(--font-display); color:var(--blue-900); padding-left:16px; border-left:1px solid var(--line)}
.pt-head__acct{margin-left:auto}

/* ---------- hero + account ---------- */
.pt-hero{background-color:var(--paper); border-bottom:1px solid var(--paper-deep)}
.pt-hero__in{display:grid; gap:24px; padding-block:clamp(28px, 4.5vw, 52px)}
.pt-hero__copy{display:grid; gap:10px; min-width:0}
.pt-q{margin:0; text-wrap:balance; font:800 clamp(30px, 4vw, 52px)/1.02 var(--font-display); letter-spacing:-.03em; color:var(--blue-900)}
.pt-hero h1{margin:0; font:600 clamp(19px, 1.7vw, 23px)/1.3 var(--font-display); color:var(--blue-900); max-width:52ch}
.pt-lead{margin:0; color:var(--content-body); font-size:1.0625rem; max-width:56ch}
/* The hero film: a poster with a play button; a click opens the player below.
   The play button sits bottom left, clear of Kristian's face. */
.pt-film{margin:0; display:grid; grid-template-rows:1fr auto; gap:8px; min-width:0}
.pt-film__btn{position:relative; display:block; width:100%; padding:0; border:0; border-radius:4px; overflow:hidden; cursor:pointer;
  background:var(--blue-900); aspect-ratio:16/9; box-shadow:0 14px 34px -16px rgba(20,48,88,.45)}
.pt-film__btn img, .pt-film video{display:block; width:100%; height:100%; object-fit:cover}
/* The poster is taller than the frame: anchored near the top, so whatever the
   frame's shape, his head stays in and the rest is shirt, not wall. */
.pt-film__btn img{object-position:50% 18%}
.pt-film video{border-radius:4px; aspect-ratio:16/9; background:#000; object-fit:contain}
.pt-film__play{position:absolute; left:14px; bottom:14px; width:68px; height:68px; border-radius:50%;
  display:grid; place-items:center; background:var(--action); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.3); transition:transform .2s}
.pt-film__play svg{width:28px; height:28px; margin-left:4px}
.pt-film__btn:hover .pt-film__play{transform:scale(1.06); background:var(--action-hover)}
.pt-film__len{position:absolute; right:10px; bottom:10px; padding:3px 8px; border-radius:3px; background:rgba(11,28,56,.78); color:#fff;
  font:600 12.5px/1.3 'IBM Plex Mono', ui-monospace, monospace}
.pt-film figcaption{font-size:14px; color:var(--sec)}
.pt-film figcaption b{color:var(--blue-900)}

/* The player. Landscape screens: the vertical film at full height, beside its
   chapters and the sign-up. Portrait screens (phones): the film full screen. */
.pt-player{--h:min(calc(100dvh - 120px), 780px); padding:0; border:0; overflow:visible; max-width:none; max-height:none;
  background:#fff; color:var(--ink); border-radius:8px}
/* 720 x 928: the film is cropped from 9:16 (no ceiling, no lap; Tibor, 30 Oct). */
.pt-player[open]{display:grid; grid-template-columns:calc(var(--h) * 720 / 928) 400px}
.pt-player::backdrop{background:rgba(11,28,56,.86)}
.pt-player video{display:block; width:100%; height:var(--h); object-fit:cover; background:#000; border-radius:8px 0 0 8px}
.pt-player__x{position:absolute; top:-54px; right:0; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--blue-900); display:grid; place-items:center}
.pt-player__x svg{width:20px; height:20px}
.pt-player__x:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.pt-player__side{height:var(--h); overflow-y:auto; padding:26px 28px 22px; display:grid; align-content:start; gap:14px}
.pt-player__k, .pt-player__side h3{margin:0; font:600 12px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--sec)}
.pt-player__side h2{margin:-4px 0 0; font:800 26px/1.1 var(--font-display); letter-spacing:-.015em; color:var(--blue-900)}
.pt-player__by{margin:0; display:flex; gap:12px; align-items:center; font-size:14px; line-height:1.35; color:var(--sec)}
.pt-player__by img{width:44px; height:44px; border-radius:50%; flex:0 0 auto}
.pt-player__by b{display:block; font:700 15px/1.25 var(--font-display); color:var(--blue-900)}
.pt-player__side h3{margin-top:4px}
.pt-chap{list-style:none; margin:-6px 0 0; padding:0; border-top:1px solid var(--line)}
.pt-chap button{width:100%; display:grid; grid-template-columns:38px 22px minmax(0,1fr); align-items:center; gap:8px; padding:9px 10px 9px 8px;
  border:0; border-bottom:1px solid var(--line); background:none; font:500 15px/1.3 var(--font-body); color:var(--ink); text-align:left; cursor:pointer}
.pt-chap time{font:600 12.5px/1 var(--mono); color:var(--sec)}
.pt-chap i:not(:empty){width:22px; height:22px; border-radius:50%; background:var(--lane); color:#fff; font:700 12px/22px var(--font-display); font-style:normal; text-align:center}
.pt-chap button[aria-current="true"]{background:var(--blue-100); box-shadow:inset 3px 0 0 var(--blue-900); font-weight:700; color:var(--blue-900)}
.pt-chap button:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
@media (hover:hover){ .pt-chap button:hover{background:var(--blue-100)} }
.pt-player__side .btn{margin-top:4px}
.pt-player__fine{margin:-6px 0 0; text-align:center; font-size:13px; color:var(--sec)}
@media (orientation:portrait){
  .pt-player{width:100%; height:100%; margin:0; border-radius:0; background:#000}
  .pt-player[open]{grid-template-columns:1fr}
  .pt-player video{height:100dvh; object-fit:contain; border-radius:0}
  .pt-player__side{display:none}
  .pt-player__x{top:12px; right:12px; z-index:1}
}
.pt-legend{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 20px; font-size:14px; color:var(--sec)}
.pt-legend li{display:flex; align-items:center; gap:8px}
.st{width:10px; height:10px; border-radius:50%; display:inline-block}
.st--live{background:var(--green-500)}
.st--soon{background:transparent; box-shadow:inset 0 0 0 2px var(--self)}
.st--paid{background:var(--blue-900)}

.pt-acct{background:#fff; border:1px solid var(--line); border-radius:6px; padding:clamp(18px, 2.4vw, 26px);
  box-shadow:0 1px 2px rgba(20,48,88,.06), 0 18px 40px -18px rgba(20,48,88,.28); min-width:0; scroll-margin:24px;
  align-self:start}
.pt-acct h2{margin:0; font:700 21px/1.2 var(--font-display); color:var(--blue-900)}
.pt-form{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px}
.pt-form > h2, .pt-form__sub, .pt-consent, .pt-err, .pt-form .btn{grid-column:1/-1}
.pt-form__sub{margin:-6px 0 2px; color:var(--sec); font-size:15px}
.pt-form__terms{margin:4px 0 0; font-size:13px; text-align:center}
.pt-form__terms a{color:inherit}
.pt-form__signin{grid-column:1/-1; margin:0; font-size:14.5px; text-align:center; color:var(--sec)}
.pt-f{display:grid; gap:5px; min-width:0}
.pt-f label{font-weight:600; font-size:14px; color:var(--blue-900)}
.pt-f input, .pt-f select{font:inherit; font-size:16px; padding:10px 12px; border:1px solid #C9D3DF; border-radius:3px; background:#fff; color:var(--ink); width:100%; min-width:0}
.pt-f input:focus, .pt-f select:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus)}
.pt-hp{position:absolute; left:-9999px}
.pt-consent{display:flex; gap:10px; font-size:14px; color:var(--sec); line-height:1.4; align-items:flex-start}
.pt-consent input{margin-top:2px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--blue-900)}
.pt-consent a{color:inherit}
.pt-err{margin:0; color:var(--red-500); font-weight:600; font-size:14px; min-height:0}
.pt-err:empty{display:none}
.pt-done{display:grid; gap:12px; justify-items:start}
.pt-done p{margin:0; color:var(--content-body)}
.pt-done__tick{width:44px; height:44px; border-radius:50%; background:var(--green-500); color:#fff; display:grid; place-items:center}
.pt-done__tick svg{width:24px; height:24px}
.pt-pulse{animation:pt-pulse 1.1s var(--ease)}
@keyframes pt-pulse{0%{box-shadow:0 0 0 0 rgba(201,79,18,.55)}100%{box-shadow:0 0 0 18px rgba(201,79,18,0)}}

/* Wide: the headline across both columns, then the film and the form side by
   side. The film takes the form's height (cover-cropped), so the two line up. */
@media (min-width:960px){
  .pt-hero__in{grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr); gap:28px 40px}
  .pt-hero__copy{grid-column:1 / -1}
  .pt-film__btn, .pt-film video{aspect-ratio:auto; height:100%; min-height:300px}
  /* The form sets the row's height and the film fills it exactly, top and
     bottom: the poster is laid over the button (it has no say in the height),
     and the caption hangs below the row instead of adding to it. */
  .pt-film{position:relative; grid-template-rows:1fr}
  .pt-film__btn img{position:absolute; inset:0}
  .pt-film figcaption{position:absolute; left:0; top:calc(100% + 8px)}
  .pt-acct{align-self:stretch}
}

/* ---------- the menu ---------- */
.pt-menu{padding-block:clamp(20px, 2.4vw, 28px) clamp(40px, 6vw, 72px)}
.pt-lanes{display:grid; gap:28px}
.pt-lane{display:grid; grid-template-rows:auto 1fr; gap:14px; min-width:0}
/* "We help you practice, in three ways" is the page's logic (Kristian, Oct
   2026), so the lane headers are the loudest thing under the hero: a solid
   band in the lane colour, "Practice" on its own line above the way. */
.pt-menu__h{display:grid; gap:4px; margin-bottom:18px}
.pt-menu__h h2{margin:0; font:800 clamp(24px, 2.6vw, 32px)/1.1 var(--font-display); letter-spacing:-.02em; color:var(--blue-900)}
.pt-menu__h p{margin:0; color:var(--content-body); max-width:70ch}
.pt-menu__h .pt-legend{margin-top:8px}
.pt-lane__h{display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:6px; background:var(--lane); color:#fff}
.pt-lane__ico{width:44px; height:44px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; color:var(--lane); background:#fff}
.pt-lane__ico svg{width:24px; height:24px}
.pt-lane__h h3{margin:0; font:800 21px/1.1 var(--font-display); color:#fff}
.pt-lane__h h3 span{display:block; font:600 12.5px/1.2 var(--font-body); letter-spacing:.12em; text-transform:uppercase; opacity:.8; margin-bottom:3px}
.pt-lane__h p{margin:4px 0 0; font-size:14px; color:rgba(255,255,255,.85)}
.pt-lane--self{--lane:var(--self)}
.pt-lane--ai{--lane:var(--ai)}
.pt-lane--coach{--lane:var(--coach)}
.pt-lane__list{display:grid; gap:10px; align-content:start}
.pt-welcome{background:var(--paper); border-bottom:1px solid var(--paper-deep)}
.pt-welcome .pt-in{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; padding-block:14px}
.pt-welcome h1{margin:0; font:700 clamp(20px, 2vw, 26px)/1.2 var(--font-display); color:var(--blue-900)}
.pt-welcome p{margin:0; color:var(--content-body)}

/* A tile: photo, status, title, one line, who it is for. The whole tile is the link. */
.pt-tile{display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; padding:10px; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--line); border-radius:6px; position:relative;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease)}
.pt-tile__img{border-radius:4px; overflow:hidden; background:var(--blue-100); aspect-ratio:1}
.pt-tile__img img{width:100%; height:100%; object-fit:cover; display:block}
.pt-tile__txt{display:grid; gap:3px; align-content:center; min-width:0}
.pt-tile__top{display:flex; align-items:center; gap:8px}
.pt-t{font:700 16px/1.25 var(--font-display); color:var(--blue-900)}
.pt-d{font-size:14.5px; line-height:1.4; color:var(--content-body)}
.pt-who{font-size:13px; color:var(--sec)}
@media (hover:hover){
  .pt-tile:hover, .pt-strip:hover{border-color:var(--blue-500); box-shadow:0 10px 24px -14px rgba(20,48,88,.35)}
  .pt-tile:hover .pt-t, .pt-strip:hover .pt-t{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}
}
.pt-tile:focus-visible, .pt-call:focus-visible, .pt-strip:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.pt-tile[data-status="soon"] .pt-tile__img img{filter:saturate(.55)}

/* Status chips */
.pt-st{display:inline-flex; align-items:center; gap:6px; font:600 12px/1 var(--font-body); letter-spacing:.01em; padding:4px 8px; border-radius:20px; white-space:nowrap}
.pt-st--live{background:#E3F4E7; color:#1E6B31}
.pt-st--live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green-500)}
.pt-st--soon{background:#fff; color:var(--self); box-shadow:inset 0 0 0 1.5px currentColor}
.pt-st--free{background:#E3F4E7; color:#1E6B31}
.pt-st--paid{background:var(--blue-900); color:#fff; font:700 12.5px/1 var(--font-display)}
.pt-st--paid small{font:500 11.5px/1 var(--font-body); opacity:.8}
.pt-lock{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:var(--sec); background:var(--blue-100)}
.pt-lock svg{width:13px; height:13px}

/* ---------- audience tags ---------- */
.pt-tile__top{flex-wrap:wrap; row-gap:4px}
.pt-auds{margin-left:auto; display:flex; gap:6px}
.pt-aud{display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:3px; font:600 12px/1.2 var(--font-body); white-space:nowrap}
.pt-aud::before{content:""; width:12px; height:12px; flex:0 0 auto; background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat}
/* Managers: a person with a team behind; salespeople: a speech bubble. */
.pt-aud--m{background:#FCEBDD; color:#9A3D0E;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21c.8-4.4 4-6.5 8-6.5s7.2 2.1 8 6.5z'/%3E%3C/svg%3E")}
.pt-aud--s{background:#E2EEFA; color:#17588F;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E")}

/* ---------- the entry tile: the free session, booked by language ---------- */
.pt-tile--entry{border:2px solid var(--green-500); padding-top:18px; box-shadow:0 12px 28px -18px rgba(30,107,49,.55)}
.pt-start{position:absolute; top:-11px; left:12px; padding:3px 9px; border-radius:3px; background:#1E6B31; color:#fff;
  font:700 11.5px/1.3 var(--font-body); letter-spacing:.08em; text-transform:uppercase}
.pt-flags{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:6px}
.pt-flags img{width:20px; height:15px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(20,48,88,.12)}
.pt-flags em{font:600 12.5px/1 var(--font-body); font-style:normal; color:var(--sec); margin-left:4px}
.pt-book{justify-self:start; display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:7px 12px; border-radius:3px;
  background:var(--action); color:#fff; font:700 14px/1.2 var(--font-display)}
.pt-book .ico{width:16px; height:16px}
@media (hover:hover){ .pt-tile--entry:hover{border-color:var(--green-500)} .pt-tile--entry:hover .pt-book{background:var(--action-hover)} }

/* ---------- the AI lane: a phone ringing, on a light ground ---------- */
.pt-call{display:grid; grid-template-rows:minmax(0,1fr) auto; text-decoration:none; color:inherit; height:100%; min-height:380px;
  border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease)}
.pt-call__phone{display:grid; justify-items:center; align-content:center; gap:4px; padding:22px 16px; text-align:center;
  background:radial-gradient(120% 90% at 50% 38%, #fff 0%, #EEF4FB 55%, #E2ECF7 100%); color:var(--blue-900)}
.pt-call__ring{font-size:13px; color:var(--sec)}
.pt-call__face{position:relative; width:112px; height:112px; margin:10px 0 8px; border-radius:50%}
.pt-call__face img{width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 18%; display:block; position:relative; z-index:1;
  box-shadow:0 0 0 4px #fff, 0 10px 24px -10px rgba(20,48,88,.45)}
.pt-call__face::before, .pt-call__face::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #9CC6EE;
  animation:pt-wave 2.8s ease-out infinite}
.pt-call__face::after{animation-delay:1.4s}
@keyframes pt-wave{0%{transform:scale(1); opacity:.9}100%{transform:scale(1.6); opacity:0}}
.pt-call__phone b{font:700 19px/1.2 var(--font-display)}
.pt-call__role{font-size:13.5px; color:var(--sec)}
.pt-call__btns{display:flex; gap:30px; margin-top:12px}
.pt-call__btns i{width:36px; height:36px; border-radius:50%; display:block; position:relative}
.pt-call__btns .no{background:#E5484D}
.pt-call__btns .yes{background:#34C759}
.pt-call__btns i::after{content:""; position:absolute; inset:0; margin:auto; width:17px; height:17px;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E")}
.pt-call__btns .no::after{transform:rotate(135deg)}
.pt-call__txt{display:grid; gap:3px; padding:14px 14px 12px; border-top:1px solid var(--line)}
@media (hover:hover){
  .pt-call:hover{border-color:var(--blue-500); box-shadow:0 10px 24px -14px rgba(20,48,88,.35)}
  .pt-call:hover .pt-t{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}
}

/* ---------- the strip under the lanes ---------- */
.pt-more{display:grid; gap:10px; margin-top:28px}
.pt-strip{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; padding:10px 18px 10px 10px;
  border:1px solid var(--line); border-radius:6px; text-decoration:none; color:inherit; background:var(--blue-100);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease)}
.pt-strip__img{width:96px; aspect-ratio:16/10; border-radius:4px; overflow:hidden}
.pt-strip__img img{width:100%; height:100%; object-fit:cover; display:block}
.pt-strip__txt{display:grid; gap:3px; min-width:0}
.pt-strip__go{color:var(--blue-900)}
.pt-strip__num{width:96px; display:grid; justify-items:center; line-height:1}
.pt-strip__num s{font:600 14px/1 var(--font-display); color:var(--before); text-decoration-thickness:1.5px}
.pt-strip__num b{font:800 30px/1 var(--font-display); color:var(--blue-900); letter-spacing:-.02em; margin-top:4px}
.pt-logos{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin-top:6px}
.pt-logos img{height:16px; width:auto; opacity:.7; filter:grayscale(1)}
.pt-logos img.volvo{height:22px}

/* ---------- desktop: three lanes side by side ---------- */
@media (min-width:1000px){
  .pt-lanes{grid-template-columns:1.05fr .8fr 1.15fr; gap:24px; align-items:stretch}
  .pt-lane__list{align-content:stretch}
  .pt-lane--coach .pt-lane__list{align-content:start}
  .pt-more{grid-template-columns:1fr 1fr; gap:24px}
  .pt-tile{grid-template-columns:84px minmax(0,1fr)}
  .pt-lane--coach .pt-tile{grid-template-columns:64px minmax(0,1fr); gap:12px; padding:8px 10px 8px 8px}
  .pt-lane--coach .pt-d{font-size:14px}
}
/* The coach lane has five items; on a laptop-height screen keep them short. */

@media (max-width:520px){
  .pt-form{grid-template-columns:1fr}
  .pt-tile{grid-template-columns:76px minmax(0,1fr); gap:12px}
  .pt-call{min-height:0}
  .pt-strip{grid-template-columns:auto minmax(0,1fr)}
  .pt-strip__go{display:none}
  .pt-strip__img, .pt-strip__num{width:72px}
  .pt-head__name{display:none}
}

/* ---------- detail panel ---------- */
.pt-scrim{position:fixed; inset:0; background:rgba(15,36,70,.42); z-index:80; opacity:0; transition:opacity .25s var(--ease)}
.pt-panel{position:fixed; z-index:81; top:0; right:0; bottom:0; width:min(600px, 100%); background:#fff; overflow-y:auto;
  overscroll-behavior:contain; box-shadow:-24px 0 60px -20px rgba(15,36,70,.45);
  transform:translateX(24px); opacity:0; transition:transform .3s var(--ease), opacity .25s var(--ease)}
body.pt-open .pt-scrim{opacity:1}
body.pt-open .pt-panel{transform:none; opacity:1}
.pt-panel__x{position:fixed; top:12px; right:12px; z-index:2; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--blue-900); display:grid; place-items:center; box-shadow:0 2px 10px rgba(15,36,70,.2)}
.pt-panel__x svg{width:20px; height:20px}
.pt-panel__x:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.pt-p__img{margin:0; aspect-ratio:16/8; overflow:hidden; background:var(--blue-100)}
.pt-p__img img{width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block}
.pt-p__in{padding:22px clamp(18px, 4vw, 36px) 36px; display:grid; gap:14px}
.pt-p__crumb{margin:0; font-size:14px; color:var(--sec)}
.pt-p__in h2{margin:-6px 0 0; font:800 clamp(26px, 3.2vw, 32px)/1.1 var(--font-display); letter-spacing:-.015em; color:var(--blue-900)}
.pt-p__meta{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:14px; color:var(--sec)}
.pt-p__lead{margin:4px 0 0; font-size:1.125rem; line-height:1.5; color:var(--ink)}
.pt-p__in h3{margin:10px 0 0; font:700 16px/1.2 var(--font-display); color:var(--blue-900)}
.pt-p__list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pt-p__list li{position:relative; padding-left:28px; color:var(--content-body)}
.pt-p__list li::before{content:""; position:absolute; left:2px; top:.35em; width:14px; height:8px; border-left:2.5px solid var(--green-500); border-bottom:2.5px solid var(--green-500); transform:rotate(-45deg)}
.pt-p__steps{list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:0}
.pt-p__steps li{counter-increment:s; position:relative; padding:0 0 14px 40px; color:var(--content-body)}
.pt-p__steps li::before{content:counter(s); position:absolute; left:0; top:-2px; width:26px; height:26px; border-radius:50%;
  background:var(--blue-900); color:#fff; font:700 13px/26px var(--font-display); text-align:center}
.pt-p__steps li:not(:last-child)::after{content:""; position:absolute; left:12.5px; top:26px; bottom:0; width:1.5px; background:var(--line)}
.pt-p__result{margin:4px 0 0; padding:12px 14px; background:var(--paper); border-radius:4px; font-weight:600; color:var(--blue-900)}
.pt-p__facts{margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.pt-p__facts div{background:#fff; padding:10px 14px}
.pt-p__facts dt{font-size:13px; color:var(--sec)}
.pt-p__facts dd{margin:2px 0 0; font-weight:700; color:var(--blue-900)}
.pt-p__dots{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pt-p__dots span{display:grid; gap:2px; padding:12px 14px; border-radius:4px; background:var(--blue-100); color:var(--sec); font-size:14px}
.pt-p__dots b{font:800 34px/1 var(--font-display); color:var(--before)}
.pt-p__dots span + span b{color:var(--sky-strong, #1F6FD1)}
.pt-p__q{margin:0; padding:4px 0 4px 16px; border-left:3px solid var(--line)}
.pt-p__q p{margin:0; font-style:italic; color:var(--ink)}
.pt-p__q footer{margin-top:6px; font-size:14px; color:var(--sec)}
.pt-p__q footer b{display:block; color:var(--ink)}
.pt-p__sub{margin:-6px 0 0; color:var(--content-body)}
.pt-langs{display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:6px}
.pt-langs button{display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--line); border-radius:4px; background:#fff;
  font:500 14.5px/1.2 var(--font-body); color:var(--ink); cursor:pointer; text-align:left}
.pt-langs img{width:24px; height:18px; border-radius:2px; object-fit:cover; flex:0 0 auto; box-shadow:0 0 0 1px rgba(20,48,88,.12)}
.pt-langs svg{flex:0 0 auto; color:var(--blue-700)}
.pt-langs button:hover{border-color:var(--blue-500)}
.pt-langs button[aria-checked="true"]{border-color:var(--blue-900); background:var(--blue-100); font-weight:700; box-shadow:inset 0 0 0 1px var(--blue-900)}
.pt-langs button:focus-visible{outline:3px solid var(--focus); outline-offset:1px}
.pt-p__act{margin-top:8px}
.pt-cta2{margin-top:10px}
.pt-onlist{margin:0; display:flex; gap:10px; align-items:center; padding:14px 16px; border-radius:4px; background:#E3F4E7; color:#1E6B31; font-weight:600}
.pt-onlist svg{width:22px; height:22px; flex:0 0 auto}

/* ---------- footer ---------- */
.pt-foot{border-top:1px solid var(--line); padding-block:20px; font-size:14px; color:var(--sec)}
.pt-foot .pt-in{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px}
.pt-foot a{color:inherit; margin-left:18px}

@media (prefers-reduced-motion:reduce){
  .pt-call__face::before, .pt-call__face::after, .pt-pulse{animation:none}
  .pt-call__face::after{display:none}
  .pt-panel, .pt-scrim{transition:none}
}