/* Subscribe v8 (28 Oct 2026), from v7. The shell and pages 1, 2, 3 and 5.
   s7- shell, page 1 cover and page 3 product · m7- page 2 markets · t8- page 5 "Want to know more?".
   The plans page (pl-) lives apart in plans.css / plans.js; the pager only pages to it. */

@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:block;src:url('../../../assets/fonts/inter-latin.woff2') format('woff2')}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:block;src:url('../../../assets/fonts/playfair-latin.woff2') format('woff2')}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:block;src:url('../../../assets/fonts/playfair-italic-latin.woff2') format('woff2')}

:root{
  --paper:#FCFBF8; --soft:#F4F2ED; --sheet:#FFFFFF; --ink:#14161A; --text:#3B3E45; --grey:#6B6F78; --line:#E8E4DC; --line2:#D9D3C7;
  --red:#C8102E; --red-d:#A50D26; --night:#0E0F12; --night2:#101216;
  --disp:"Playfair Display",Georgia,serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,6.6vw,112px);
  --headh:clamp(64px,9vh,84px);
  --vh:100vh;
}
@supports (height:100dvh){:root{--vh:100dvh}}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body.s7{margin:0;overflow:hidden;background:var(--night);color:var(--text);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(.s7) a{color:inherit}
.s7 img{display:block;max-width:100%}
:where(.s7) :where(h1,h2,h3,p,ul,ol,figure){margin:0}
.s7 :focus-visible{outline:2px solid var(--red);outline-offset:3px}
.s7-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the deck: one full screen per page ---------- */
/* 1px taller than the screen (and 1px of padding, so the last page still lands exactly): a scroller exactly the size of
   the screen becomes Android Chrome's root scroller, and then the first swipe in each direction only moves the address bar */
.s7-deck{position:relative;height:calc(100vh + 1px);height:calc(var(--vh) + 1px);padding-bottom:1px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;
  scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.s7-deck::-webkit-scrollbar{display:none}
.s7-deck.is-gliding{scroll-snap-type:none}
.s7-page{position:relative;height:100vh;height:var(--vh);overflow:hidden}
.s7-stop{scroll-snap-align:start;scroll-snap-stop:always}

/* ---------- fixed header: logo and Log in (from v6b), tone follows the page ---------- */
.s7-head{position:fixed;z-index:20;top:0;left:0;right:0;height:var(--headh);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);pointer-events:none;color:#fff;
  border-bottom:1px solid transparent;transition:color .4s ease,background-color .4s ease,border-color .4s ease}
.s7-head a{pointer-events:auto}
.s7-logo{position:relative;display:block;width:104px;height:29px}
.s7-logo img{position:absolute;inset:0;width:104px;height:auto;transition:opacity .4s ease}
.s7-logo-ink{opacity:0}
.s7-login{font:500 15px/1 var(--sans);text-decoration:none;padding:12px 0;opacity:.88}
.s7-login:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
body[data-tone="light"] .s7-head{color:var(--ink)}
body[data-tone="light"] .s7-logo-ink{opacity:1}
body[data-tone="light"] .s7-logo-rev{opacity:0}

/* ---------- page marks (v6a lines) ---------- */
.s7-dots{position:fixed;z-index:20;right:clamp(10px,2vw,30px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;color:#fff;transition:color .4s ease}
.s7-dots a{display:flex;align-items:center;justify-content:flex-end;width:44px;height:30px;color:inherit}
.s7-dots i{display:block;width:16px;height:2px;background:currentColor;opacity:.36;transition:width .45s var(--ease),opacity .3s,background-color .3s}
.s7-dots a:hover i{opacity:.75}
.s7-dots a[aria-current="true"] i{width:30px;opacity:1;background:var(--red)}
body[data-tone="light"] .s7-dots{color:var(--ink)}

/* ---------- shared bits ---------- */
.s7-btn{display:flex;align-items:center;justify-content:center;width:100%;height:58px;margin-top:26px;border:0;border-radius:3px;background:var(--red);color:#fff;font:600 17px/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .2s ease}
.s7-btn:hover{background:var(--red-d)}

.s7-cue{position:absolute;z-index:3;left:var(--gut);bottom:26px;display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);font:500 14px/1 var(--sans);text-decoration:none;padding:10px 0}
.s7-cue:hover{color:#fff}
.s7-cue svg{animation:s7-nudge 2.4s ease-in-out infinite}
.s7-cue--ink{color:var(--grey)}
.s7-cue--ink:hover{color:var(--ink)}
@keyframes s7-nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* =========================================================
   Page 1: the drifting wall and one button (v7 page 1; no price now, the panel is lighter)
   ========================================================= */
.s7-p1{background:var(--night);display:flex;flex-direction:column;justify-content:center;isolation:isolate}
.s7-wall{position:absolute;inset:-14px;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;padding:0 10px;z-index:0;will-change:transform;
  animation:s7-wall-in 1.8s var(--ease) both}
@keyframes s7-wall-in{from{opacity:0;transform:scale(1.06)}}
.s7-col{position:relative;overflow:hidden;height:100%}
.s7-track{display:flex;flex-direction:column;gap:10px;will-change:transform;animation:s7-up var(--dur,140s) linear infinite;animation-delay:var(--del,0s)}
.s7-col:nth-child(even) .s7-track{animation-name:s7-down}
@keyframes s7-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - 5px),0)}}
@keyframes s7-down{from{transform:translate3d(0,calc(-50% - 5px),0)}to{transform:translate3d(0,0,0)}}
@media (hover:hover){.s7-col:hover .s7-track{animation-play-state:paused}}
.s7-track.is-held,.s7-p1.is-away .s7-track{animation-play-state:paused}

.s7-tile{position:relative;flex:none;overflow:hidden;background:#1C1E23;aspect-ratio:var(--ar,16/9)}
.s7-tile img{width:100%;height:100%;object-fit:cover}
.s7-tile::after{content:"";position:absolute;inset:0;background:var(--night);opacity:.56;transition:opacity .35s ease}
.s7-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:28px 12px 11px;background:linear-gradient(to top,rgba(10,11,13,.92),rgba(10,11,13,0));color:#fff;font:500 13px/1.35 var(--sans);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.s7-cap b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:500}
.s7-cap i{display:block;margin-top:5px;font-style:normal;font-size:11.5px;color:rgba(255,255,255,.66);font-variant-numeric:lining-nums}
@media (hover:hover){
  .s7-p1 .s7-tile:hover::after{opacity:0}
  .s7-p1 .s7-tile:hover .s7-cap{opacity:1;transform:none}
}
.s7-tile.is-on::after{opacity:0}
.s7-tile.is-on .s7-cap{opacity:1;transform:none}

/* data features: always 16:10 and never cropped tall or square, so the whole picture and its Data insight mark show */
.s7-tile--data img{object-position:50% 50%}
.s7-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(14,15,18,.72) 0,rgba(14,15,18,0) 140px),
    linear-gradient(to top,rgba(14,15,18,.62) 0,rgba(14,15,18,0) 130px),
    linear-gradient(90deg,rgba(14,15,18,.62) 0,rgba(14,15,18,.3) 38%,rgba(14,15,18,0) 62%)}

.s7-panel{position:relative;z-index:2;margin-left:var(--gut);width:min(640px,calc(100% - 2*var(--gut)));background:var(--paper);padding:52px 56px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04);animation:s7-panel-in 1.1s var(--ease) .15s both}
@keyframes s7-panel-in{from{opacity:0;transform:translate3d(-28px,0,0)}}
.s7-panel h1{font:500 clamp(36px,3.3vw,50px)/1.07 var(--disp);color:var(--ink);letter-spacing:-.014em;text-wrap:balance}
.s7-panel h1 em{display:block;font-style:italic;font-weight:500}
.s7-panel-logo{display:block;width:104px;height:auto;margin:0 0 32px}
/* the panel carries the logo on the cover, so the header logo steps back there */
@media (min-width:761px){body[data-key="top"] .s7-head .s7-logo{opacity:0;pointer-events:none}}
.s7-head .s7-logo{transition:opacity .4s ease}
.s7-panel .s7-btn{margin-top:38px}

/* =========================================================
   Page 2: the region, sized by a year of stories (v6b page 1)
   ========================================================= */
.m7-p2{background:var(--night2);color:#fff;display:grid;grid-template-columns:minmax(360px,34%) 1fr;gap:0 clamp(16px,2vw,40px);padding:var(--headh) calc(var(--gut) + 30px) clamp(56px,9vh,84px) var(--gut);isolation:isolate}
.m7-dawn{position:absolute;z-index:-1;left:0;top:0;width:140%;height:140%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(226,178,128,.10),rgba(226,178,128,.03) 55%,rgba(226,178,128,0) 100%);
  transform:translate3d(48%,-6%,0);opacity:.95}
.m7-dawn.is-sweep{transition:transform 3.4s cubic-bezier(.3,.1,.2,1)}

.m7-text{align-self:center;position:relative;z-index:2;max-width:470px}
.m7-p2 h2{font:500 clamp(40px,3.6vw,54px)/1.05 var(--disp);color:#fff;letter-spacing:-.015em;text-wrap:balance}
.m7-p2 h2 em{display:block;font-style:italic;font-weight:500;color:#F3E9DD}
.m7-cap{margin-top:clamp(30px,6vh,56px);pointer-events:none}
.m7-cap-in{position:relative;min-height:118px}
.m7-cap-card{position:absolute;inset:0 0 auto 0;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.m7-cap-card.is-out{opacity:0;transform:translateY(-6px)}
.m7-cap-card.is-pre{opacity:0;transform:translateY(8px)}
.m7-cap-n{font:italic 500 28px/1.1 var(--disp);color:#fff}
.m7-cap-h{margin-top:8px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.86)}
.m7-cap-h i{font-style:normal;color:#E7A0AA}
.m7-quiet{margin-top:clamp(18px,3.4vh,30px);font-size:14.5px}
.m7-quiet a{color:rgba(255,255,255,.72);text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:3px}
.m7-quiet a:hover{color:#fff;text-decoration-color:#fff}

.m7-field{position:relative;min-height:0;min-width:0;margin:-34px -24px 0 0}
.m7-map{position:absolute;inset:0}
.m7-lens{position:absolute;left:0;top:0;will-change:transform}
.m7-lens-body{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.m7-lens-img{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#20232A;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.m7-lens-img img{position:absolute;top:0;left:-25%;width:150%;height:100%;max-width:none;object-fit:cover;animation:m7-pan var(--pan,46s) ease-in-out infinite alternate;animation-delay:var(--pdel,0s)}
@keyframes m7-pan{from{transform:translate3d(-9%,0,0) scale(1.04)}to{transform:translate3d(9%,0,0) scale(1.04)}}
.m7-lens-img::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(16,18,22,.05),rgba(16,18,22,.42));opacity:1;transition:opacity .5s ease}
.m7-lens-ring{position:absolute;inset:-6px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(252,251,248,.2);transition:box-shadow .4s ease}
.m7-lens.is-on .m7-lens-img::after,.m7-lens.is-hit .m7-lens-img::after{opacity:.25}
.m7-lens.is-on .m7-lens-ring{box-shadow:inset 0 0 0 1.5px var(--red)}
.m7-rip{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--red);pointer-events:none;opacity:0}
.m7-lab{position:absolute;white-space:nowrap;text-align:center;pointer-events:none;line-height:1.1}
.m7-lens .m7-lab b{display:block;font:italic 500 15px/1.15 var(--disp);color:#fff;letter-spacing:.005em}
.m7-lens .m7-lab{left:50%;top:calc(100% + 10px);transform:translateX(-50%)}
.m7-lens[data-lab="a"] .m7-lab{top:auto;bottom:calc(100% + 10px)}
.m7-lens[data-lab="r"] .m7-lab{left:calc(100% + 12px);top:50%;transform:translateY(-50%);text-align:left}
.m7-lens[data-lab="l"] .m7-lab{left:auto;right:calc(100% + 12px);top:50%;transform:translateY(-50%);text-align:right}
.m7-lens[data-lab="i"] .m7-lab{top:50%;transform:translate(-50%,-50%);z-index:2}
.m7-lens[data-lab="i"] .m7-lens-img::after{background:rgba(16,18,22,.5)}
.m7-lens[data-lab="i"] .m7-lab b{font-size:13px}
/* before the page is first reached, the lenses wait at zero size (script sets them); without scripts they show at once */

/* =========================================================
   Page 3: the website, the app and Cover Notes. Three objects with air between them; the one you point at,
   focus or tap comes forward and the other two step back, smaller and softer. Transforms only, no layout shift.
   ========================================================= */
.s7-p3{background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--headh) var(--gut) 64px}
.s7-p3::before{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to bottom,rgba(244,242,237,0),var(--soft));pointer-events:none}
.s7-show{position:relative;width:min(100%,calc((var(--vh) - var(--headh) - 380px) / .37),1380px);container-type:inline-size}
.s7-p3 h2{font:500 clamp(34px,3.6vw,56px)/1.04 var(--disp);letter-spacing:-.02em;color:var(--ink);text-wrap:balance;margin-bottom:max(clamp(24px,4.6vh,52px),calc(2.6cqw + 6px))}
/* (the floor keeps the headline clear of the phone when it is pointed at and lifts forward) */

.s7-scene{perspective:1800px}
.s7-stage{position:relative;aspect-ratio:100/37;container-type:inline-size;transform-origin:50% 60%}
.s7-layer{position:absolute;z-index:1}
.s7-l-browser{left:0;top:3.6cqw;width:39cqw}
.s7-l-phone{left:41.75cqw;top:0;width:16.5cqw;z-index:2}
.s7-l-card{right:0;top:5cqw;width:39cqw}
.s7-layer.is-on{z-index:4}
/* the focus move: a quick transform and a fade, nothing that changes the layout */
.s7-fo{--px:0px;--py:0px;transform-origin:50% 55%;transition:transform .42s var(--ease),opacity .3s ease,filter .3s ease}
.s7-p3.has-focus .s7-layer.is-on .s7-fo{transform:translate3d(0,-1.2cqw,0) scale(1.065)}
.s7-p3.has-focus .s7-layer:not(.is-on) .s7-fo{transform:translate3d(var(--px),calc(var(--py) + .8cqw),0) scale(.9);opacity:.42;filter:saturate(.3)}
.s7-p3[data-focus="browser"] .s7-l-phone .s7-fo{--px:1.8cqw}
.s7-p3[data-focus="browser"] .s7-l-card .s7-fo{--px:1.2cqw}
.s7-p3[data-focus="phone"] .s7-l-browser .s7-fo{--px:-1.4cqw}
.s7-p3[data-focus="phone"] .s7-l-card .s7-fo{--px:1.4cqw}
.s7-p3[data-focus="card"] .s7-l-phone .s7-fo{--px:-1.8cqw}
.s7-p3[data-focus="card"] .s7-l-browser .s7-fo{--px:-1.2cqw}

/* the website: its own container, so its type keeps its proportions at any size */
.s7-browser{container-type:inline-size;aspect-ratio:43/32;background:#fff;border-radius:2.2cqw;overflow:hidden;
  box-shadow:0 0 0 1px rgba(20,22,26,.07),0 .5cqw 1.2cqw rgba(20,22,26,.05),0 3cqw 7cqw -2cqw rgba(20,22,26,.22)}
.s7-bar{display:flex;align-items:center;gap:1.1cqw;height:6.4cqw;padding:0 2.4cqw;background:#F2F0EB;border-bottom:1px solid var(--line)}
.s7-bar i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#D8D2C6}
.s7-url{display:flex;align-items:center;gap:.9cqw;margin:0 auto;max-width:62cqw;height:4cqw;padding:0 2cqw;background:#fff;border-radius:1cqw;
  font:400 1.75cqw/1 var(--sans);color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 0 1px rgba(20,22,26,.05)}
.s7-url svg{flex:none;width:1.6cqw;height:1.6cqw}
.s7-doc{padding:3.2cqw 6.4cqw 0}
.s7-doc-top{padding-bottom:2.1cqw;margin-bottom:3.4cqw;border-bottom:1px solid var(--line)}
.s7-doc-top img{width:auto;height:3.5cqw}
.s7-doc-date{margin:0 0 1.2cqw;font:400 1.7cqw/1.2 var(--sans);color:var(--grey)}
.s7-doc-h{margin:0 0 1.8cqw;font:600 4.3cqw/1.14 var(--disp);letter-spacing:-.012em;color:var(--ink);max-width:80cqw}
.s7-doc-s{margin:0 0 3cqw;font:400 2cqw/1.55 var(--sans);color:var(--text);max-width:82cqw}
.s7-doc-img{width:100%;height:34cqw;object-fit:cover;object-position:50% 72%;border-radius:.4cqw}

/* Cover Notes: the real panel from the Discover page (Page Studio's s5 "#cn-examples"), ported: masthead with its red rule,
   "From the latest edition", then each item's date line, bold Inter headline and full paragraph, hairlines between.
   The box has a fixed height; its list scrolls inside it (page.js runs it on hover, focus or tap).
   The card's own padding is in stage units (an element's own padding resolves against the stage); inside, card units. */
.s7-card.cnp{--cnp-fade:max(3cqw,16px);--cn-ink:#1F2328;--cn-text:#3B3E45;--cn-muted:#6B6F78;--cn-line:#E3E7EB;--cn-red:#D1495B;
  container-type:inline-size;position:relative;display:flex;flex-direction:column;aspect-ratio:39/30.4;overflow:hidden;
  background:#fff;border:1px solid var(--cn-line);border-radius:.64cqw;padding:1.6cqw 1.92cqw 0;
  box-shadow:0 .16cqw .32cqw rgba(31,35,40,.03),0 1.1cqw 3.2cqw rgba(31,35,40,.08)}
.cnp-mast{flex:none;display:flex;align-items:baseline;gap:1.64cqw;padding-bottom:2.05cqw;border-bottom:2px solid var(--cn-red)}
.cnp-mast b{font:700 4.71cqw/1 var(--disp);letter-spacing:-.02em;color:var(--cn-ink)}
.cnp-mast span{font:500 2.66cqw/1 var(--sans);color:var(--cn-muted)}
.cnp-mast img{width:10.25cqw;height:auto;transform:translateY(.4cqw)}
.cnp-from{flex:none;margin:2.46cqw 0 0;font:500 2.46cqw/1.4 var(--sans);color:var(--cn-muted)}
.cnp-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(transparent,#000 var(--cnp-fade),#000 calc(100% - 4cqw),transparent);
  mask-image:linear-gradient(transparent,#000 var(--cnp-fade),#000 calc(100% - 4cqw),transparent)}
/* the top fade is as deep as the first item's top padding, so it only shows once the list scrolls under the date line */
.cnp-scroll::-webkit-scrollbar{display:none}
.cnp-ex{list-style:none;margin:0;padding:0 0 4cqw}
.cnp-i{padding:2.25cqw 0;border-top:1px solid var(--cn-line)}
.cnp-i:first-child{border-top:0;padding-top:var(--cnp-fade)}
.cnp-xd{font:500 2.46cqw/1.33 var(--sans);color:var(--cn-muted);font-variant-numeric:tabular-nums}
.cnp-xh{margin:.82cqw 0 0;font:650 4.5cqw/1.25 var(--sans);letter-spacing:-.015em;color:var(--cn-ink);overflow-wrap:break-word;text-wrap:balance}
.cnp-xp{margin:1.23cqw 0 0;font:400 2.77cqw/1.45 var(--sans);color:var(--cn-text);overflow-wrap:break-word}
.cnp-xp b{font-weight:650;color:var(--cn-ink)}

/* the app: the real screen at its own aspect, corners concentric with the frame, island where iOS puts it */
.s7-phone{container-type:inline-size;width:100%}
.s7-phone-body{position:relative;border-radius:16.5cqw;padding:3.2cqw;border:1.15cqw solid transparent;
  background:linear-gradient(#0B0C0E,#0B0C0E) padding-box,linear-gradient(140deg,#B4B7BC 0%,#5A5C61 22%,#C9CBCF 48%,#606267 74%,#A9ACB1 100%) border-box;
  box-shadow:0 1.5cqw 3cqw rgba(0,0,0,.18),0 9cqw 18cqw -6cqw rgba(20,22,26,.55)}
.s7-screen{position:relative;border-radius:12.2cqw;overflow:hidden;aspect-ratio:1320/2868;background:#FBFAF7;transform:translateZ(0)}
.s7-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.s7-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 30%);pointer-events:none}
.s7-island{position:absolute;top:5.7cqw;left:50%;width:28.4cqw;height:8.4cqw;margin-left:-14.2cqw;border-radius:4.2cqw;background:#000}
.s7-side{position:absolute;width:1.3cqw;border-radius:.6cqw;background:linear-gradient(90deg,#6E7176,#A6A9AE)}
.s7-sd1{left:-2.3cqw;top:20%;height:5%}
.s7-sd2{left:-2.3cqw;top:28%;height:9%}
.s7-sd3{right:-2.3cqw;top:26%;height:13%;background:linear-gradient(90deg,#A6A9AE,#6E7176)}

/* three captions, one under each object, centred on it; pointing at one brings its object forward */
.s7-gets{list-style:none;padding:0;margin-top:clamp(22px,4vh,44px);display:grid;grid-template-columns:39fr 22fr 39fr}
.s7-gets li{display:flex;justify-content:center}
.s7-gets button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:27cqw;cursor:pointer;transition:opacity .3s ease}
.s7-gets b{font:600 clamp(18px,1.6cqw,24px)/1.2 var(--disp);color:var(--ink);letter-spacing:-.005em}
.s7-gets b::after{content:"";display:block;width:26px;height:2px;margin:9px auto 0;background:var(--red);transition:width .4s var(--ease)}
.s7-gets button.is-on b::after{width:46px}
.s7-gets span{margin-top:9px;font-size:clamp(14px,1.15cqw,16.5px);line-height:1.48;color:var(--text);text-wrap:pretty}
.s7-gets button:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.s7-p3.has-focus .s7-gets button:not(.is-on){opacity:.42}
.s7-gets i{font-style:normal}
.s7-short{display:none}
.s7-p3 .s7-cue{left:50%;transform:translateX(-50%)}

/* assembly as the page arrives: hidden only while scripts run and the page has not been reached; a fail-safe shows it anyway */
.js .s7-p3:not(.is-in) .s7-in{opacity:0;animation:s7-unhide 0s 9s forwards}
@keyframes s7-unhide{to{opacity:1}}
.s7-p3.is-in .s7-in-browser{animation:s7-browser .95s var(--ease) .12s both}
.s7-p3.is-in .s7-in-phone{animation:s7-phone 1.05s var(--ease) .3s both}
.s7-p3.is-in .s7-in-card{animation:s7-card .95s var(--ease) .48s both}
@keyframes s7-browser{from{opacity:0;transform:translate3d(-4cqw,5cqw,0) scale(.96)}}
@keyframes s7-phone{from{opacity:0;transform:translate3d(0,8cqw,0)}}
@keyframes s7-card{from{opacity:0;transform:translate3d(4cqw,6cqw,0) rotate(2.5deg)}}


/* =========================================================
   Page 5: want to know more? The year's pictures in grey; a lens drifts over them and brings one patch
   back to colour, close up. The tour is the closer look.
   ========================================================= */
.t8-p5{background:var(--night);color:#fff;isolation:isolate}
.t8-field{position:absolute;inset:0;overflow:hidden}   /* no stacking context: the lens rides above the shade, under the words */
#t8-far{z-index:0}
.t8-mosaic{position:absolute;left:0;top:0;width:var(--fw,100%);display:grid;grid-template-columns:repeat(var(--tc,6),minmax(0,1fr));gap:10px;padding:10px}
.t8-mosaic img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#1C1E23}
#t8-far{filter:grayscale(1) brightness(.62);opacity:.5}
.t8-lens{position:absolute;z-index:2;left:0;top:0;width:calc(2 * var(--lr,200px));height:calc(2 * var(--lr,200px));will-change:transform}
.t8-glass{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#1C1E23;transform:translateZ(0);
  box-shadow:0 34px 80px -24px rgba(0,0,0,.85);transition:transform .9s var(--ease),opacity .7s ease}
.t8-mosaic--near{transform-origin:0 0;will-change:transform}
.t8-glass::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(14,15,18,0) 55%,rgba(14,15,18,.38))}
.t8-ring{position:absolute;inset:-8px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(252,251,248,.3);pointer-events:none;transition:opacity .7s ease}
.t8-rip{position:absolute;inset:-8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--red);pointer-events:none;opacity:0}
.js .t8-p5:not(.is-in) .t8-glass{opacity:0;transform:scale(.6)}
.js .t8-p5:not(.is-in) .t8-ring{opacity:0}

.t8-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(14,15,18,.94) 0,rgba(14,15,18,.82) 26%,rgba(14,15,18,.34) 46%,rgba(14,15,18,0) 60%),
    linear-gradient(to bottom,rgba(14,15,18,.7) 0,rgba(14,15,18,0) 150px),
    linear-gradient(to top,rgba(14,15,18,.75) 0,rgba(14,15,18,0) 140px)}

.t8-text{position:absolute;z-index:3;left:var(--gut);top:50%;transform:translateY(-52%);width:min(540px,calc(100% - 2 * var(--gut)))}
.t8-p5 h2{font:500 clamp(48px,5.2vw,84px)/1 var(--disp);color:#fff;letter-spacing:-.02em;text-shadow:0 1px 2px rgba(10,11,13,.45),0 4px 30px rgba(10,11,13,.6)}
.t8-p5 h2 em{display:block;font-style:italic;font-weight:500;color:#F3E9DD}
.t8-btn{display:inline-flex;align-items:center;justify-content:center;height:58px;min-width:220px;padding:0 34px;margin-top:clamp(30px,5vh,48px);border-radius:3px;
  background:var(--paper);color:var(--ink);font:600 17px/1 var(--sans);letter-spacing:.01em;text-decoration:none;transition:background .2s ease,box-shadow .2s ease;box-shadow:0 8px 28px -8px rgba(10,11,13,.6)}
.t8-btn:hover{background:#fff;box-shadow:0 0 0 4px rgba(252,251,248,.16)}
.t8-links{list-style:none;padding:0;margin-top:clamp(22px,3.6vh,34px);display:flex;flex-wrap:wrap;gap:8px 26px;font-size:15px}
.t8-links a{text-shadow:0 1px 2px rgba(10,11,13,.7),0 0 14px rgba(10,11,13,.6);color:rgba(255,255,255,.78);text-decoration:underline;text-decoration-color:rgba(255,255,255,.26);text-underline-offset:4px;display:inline-block;padding:4px 0}
.t8-links a:hover{color:#fff;text-decoration-color:#fff}
.t8-foot{position:absolute;z-index:3;left:var(--gut);bottom:24px;display:flex;align-items:center;gap:12px;font-size:12.5px;color:rgba(255,255,255,.5)}
.t8-foot img{width:64px;height:auto;opacity:.8}
.t8-foot span span{margin:0 .3em}

/* ---------- short desktop screens (1280x720 and the like) ---------- */
@media (min-width:761px) and (max-height:800px){
  :root{--headh:64px}
  .s7-panel{padding:38px 42px 38px}
  .s7-panel .s7-btn{height:54px;margin-top:30px}
  .m7-cap-in{min-height:108px}
  .s7-show{width:min(100%,calc((var(--vh) - var(--headh) - 335px) / .37),1380px)}
  .s7-p3{padding-bottom:50px}
  .s7-p3 h2{margin-bottom:max(clamp(18px,3.4vh,30px),calc(2.6cqw + 6px))}
  .s7-p3 .s7-cue{bottom:10px}
  .s7-gets{margin-top:18px}
  .s7-gets span{font-size:14px}
  .t8-p5 h2{font-size:clamp(44px,4.6vw,64px)}
  .t8-btn{height:54px}
  .t8-foot{bottom:16px}
}

@media (min-width:761px) and (max-height:660px){
  .s7-p3 h2{font-size:32px}
  .s7-show{width:min(100%,calc((var(--vh) - var(--headh) - 320px) / .37),1380px)}
}

/* ---------- mid widths ---------- */
@media (max-width:1180px){
  .s7-wall{grid-template-columns:repeat(5,1fr)}
  .s7-col:nth-child(n+6){display:none}
}
@media (max-width:1100px) and (min-width:761px){
  .m7-p2{grid-template-columns:minmax(320px,40%) 1fr}
}

/* =========================================================
   Phones: designed for 402x714, 360x639 and 360x599
   ========================================================= */
@media (max-width:760px){
  :root{--gut:20px;--headh:52px}
  .s7-logo,.s7-logo img{width:86px}
  .s7-login{font-size:14px}
  .s7-dots{right:2px}
  .s7-dots a{width:22px;height:24px}
  .s7-dots i{width:3px;height:12px;border-radius:2px;transition:height .45s var(--ease),opacity .3s}
  .s7-dots a[aria-current="true"] i{width:3px;height:22px}
  body[data-tone="dark"] .s7-head{background:linear-gradient(to bottom,rgba(14,15,18,.7),rgba(14,15,18,0))}

  /* page 1: the wall stays, three columns, the offer is a sheet at the foot */
  .s7-p1{justify-content:flex-end}
  .s7-wall{grid-template-columns:repeat(3,1fr);gap:7px;padding:0 7px;inset:-8px}
  .s7-col:nth-child(n+4){display:none}
  .s7-track{gap:7px}
  @keyframes s7-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - 3.5px),0)}}
  @keyframes s7-down{from{transform:translate3d(0,calc(-50% - 3.5px),0)}to{transform:translate3d(0,0,0)}}
  .s7-tile::after{opacity:.3}
  .s7-cap{font-size:11.5px;padding:20px 8px 8px}
  .s7-cap i{font-size:10.5px}
  .s7-shade{background:linear-gradient(to bottom,rgba(14,15,18,.82) 0,rgba(14,15,18,0) 96px)}
  .s7-panel{margin:0;width:auto;padding:22px var(--gut) 22px;box-shadow:0 -24px 40px -10px rgba(0,0,0,.5);animation-name:s7-sheet-in}
  @keyframes s7-sheet-in{from{opacity:0;transform:translate3d(0,24px,0)}}
  .s7-panel h1{font-size:clamp(25px,7.2vw,29.5px);line-height:1.1;text-wrap:pretty}
  .s7-panel .s7-btn{height:52px;margin-top:18px}
  .s7-p1 .s7-cue{position:relative;z-index:3;order:-1;align-self:flex-end;left:auto;bottom:auto;margin:0 var(--gut) 12px;font-size:13px;padding:9px 12px;background:rgba(14,15,18,.66);border-radius:3px;color:#fff}

  /* page 2: the region on top, the latest headline and the line below */
  .m7-p2{display:flex;flex-direction:column;padding:var(--headh) var(--gut) 46px}
  .m7-text{display:contents}
  .m7-field{order:0;flex:1 1 auto;min-height:150px;margin:4px -6px 0}
  .m7-lens .m7-lab{display:none}
  .m7-cap{order:1;margin-top:10px}
  .m7-cap-in{margin-top:0;min-height:86px}
  .m7-cap-n{font-size:20px}
  .m7-cap-h{margin-top:3px;font-size:12.5px;line-height:1.4}
  .m7-p2 h2{order:2;margin-top:12px;font-size:clamp(27px,7.6vw,32px);line-height:1.06}
  .m7-p2 h2 em{display:inline}
  .m7-quiet{order:3;margin-top:10px;font-size:14px}
  .s7-cue{bottom:max(8px,env(safe-area-inset-bottom));font-size:13.5px}

  /* page 3: the phone on the left, the website and Cover Notes on the right, a little air between all three */
  .s7-p3{justify-content:flex-start;padding:calc(var(--headh) + 6px) var(--gut) 46px}
  .s7-p3::before{display:none}
  .s7-show{width:100%;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .s7-p3 h2{font-size:clamp(26px,7.6vw,31px);margin:0 16px 0 0}
  .s7-scene{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;margin:10px 0 8px;perspective:none}
  .s7-stage{width:min(100%,calc((var(--vh) - var(--headh) - 262px) / .98));aspect-ratio:100/98}
  .s7-l-phone{left:0;top:9cqw;width:36.5cqw}
  .s7-l-browser{left:40.5cqw;top:0;width:59.5cqw}
  .s7-l-card{left:40.5cqw;right:auto;top:48cqw;width:59.5cqw}
  .s7-p3.has-focus .s7-layer.is-on .s7-fo{transform:translate3d(0,-1cqw,0) scale(1.05)}
  .s7-p3.has-focus .s7-layer:not(.is-on) .s7-fo{transform:translate3d(var(--px),var(--py),0) scale(.92)}
  .s7-p3[data-focus] .s7-fo{--px:0px;--py:0px}
  .s7-p3[data-focus="phone"] .s7-l-browser .s7-fo,.s7-p3[data-focus="phone"] .s7-l-card .s7-fo{--px:1.6cqw}
  .s7-p3[data-focus="browser"] .s7-l-phone .s7-fo{--px:-1.4cqw}
  .s7-p3[data-focus="browser"] .s7-l-card .s7-fo{--py:1.8cqw}
  .s7-p3[data-focus="card"] .s7-l-phone .s7-fo{--px:-1.4cqw}
  .s7-p3[data-focus="card"] .s7-l-browser .s7-fo{--py:-1.8cqw}
  .s7-browser{aspect-ratio:63/47;border-radius:3cqw}
  .s7-url{display:none}
  .s7-doc-s{display:none}
  .s7-doc-h{font-size:6.2cqw;line-height:1.16;margin-bottom:3cqw}
  .s7-doc-date{font-size:3cqw}
  .s7-doc-top img{height:4.6cqw}
  .s7-doc-img{height:40cqw}
  /* Cover Notes on phones: a miniature at rest; tapped, it comes forward large enough to read */
  .s7-card.cnp{aspect-ratio:59.5/48;padding:3.3cqw 3.6cqw 0;border-radius:1.4cqw}
  .cnp-mast{gap:2.4cqw;padding-bottom:3cqw}
  .cnp-mast b{font-size:7.6cqw}
  .cnp-mast span{font-size:4.2cqw}
  .cnp-mast img{width:16cqw}
  .cnp-from{margin-top:3.4cqw;font-size:4.1cqw}
  .cnp-i{padding:3.4cqw 0}
  .s7-card.cnp{--cnp-fade:max(2.8cqw,12px)}
  .cnp-xd{font-size:4.1cqw}
  .cnp-xh{margin-top:1.2cqw;font-size:6.4cqw;line-height:1.22}
  .cnp-xp{margin-top:1.8cqw;font-size:4.7cqw;line-height:1.42}
  .s7-p3[data-focus="card"] .s7-l-card.is-on .s7-fo{transform:translate3d(-21cqw,-13cqw,0) scale(1.5)}
  .s7-gets{padding:0;margin-top:4px;grid-template-columns:1fr;row-gap:0}
  .s7-gets li{display:block}
  .s7-gets button{display:grid;grid-template-columns:96px 1fr;column-gap:10px;align-items:baseline;text-align:left;max-width:none;width:100%;padding:8px 0;border-top:1px solid var(--line2)}
  .s7-gets li:last-child button{border-bottom:1px solid var(--line2)}
  .s7-gets b{font-size:15.5px}
  .s7-gets b::after{display:none}
  .s7-gets span{margin:0;font-size:13px;line-height:1.38}
  .s7-long{display:none}
  .s7-short{display:inline!important}
  .s7-p3 .s7-cue{left:var(--gut);transform:none}


  /* page 5: the lens in the upper half, the words and the tour at the foot */
  .t8-mosaic{gap:6px;padding:6px}
  .t8-shade{background:
    linear-gradient(to top,rgba(14,15,18,.96) 0,rgba(14,15,18,.9) 40%,rgba(14,15,18,0) 64%),
    linear-gradient(to bottom,rgba(14,15,18,.8) 0,rgba(14,15,18,0) 96px)}
  .t8-text{top:auto;bottom:calc(52px + env(safe-area-inset-bottom));transform:none;left:var(--gut);right:var(--gut);width:auto}
  .t8-p5 h2{font-size:clamp(38px,11vw,46px)}
  .t8-btn{display:flex;width:100%;height:52px;margin-top:22px}
  .t8-links{margin-top:14px;gap:2px 22px;font-size:14px}
  .t8-foot{left:var(--gut);bottom:max(14px,env(safe-area-inset-bottom));font-size:11.5px;gap:10px}
  .t8-foot img{width:56px}

}
@media (max-width:380px){.s7-gets button{grid-template-columns:88px 1fr}}
/* the shortest phones (Samsung Internet 360x599) */
@media (max-width:760px) and (max-height:660px){
  .s7-panel{padding-top:18px;padding-bottom:18px}
  .s7-panel h1{font-size:26px}
  .s7-panel .s7-btn{height:50px;margin-top:14px}
  .m7-p2 h2{font-size:clamp(25px,7vw,29px)}
  .s7-p3 h2{font-size:26px}
  .s7-stage{width:min(100%,calc((var(--vh) - var(--headh) - 300px) / .98))}
  .s7-gets button{padding:6px 0}
  .s7-gets span{font-size:12.5px}
  .t8-p5 h2{font-size:36px}
  .t8-btn{height:50px;margin-top:18px}
  .t8-links{margin-top:10px}
}
@media (max-width:760px) and (max-height:620px){
  .m7-cap-h{font-size:12px}
}

/* ---------- reduced motion: still pages one screen at a time, nothing drifts, nothing is hidden ---------- */
@media (prefers-reduced-motion:reduce){
  .s7-wall,.s7-panel,.s7-track,.s7-cue svg,.m7-lens-img img{animation:none!important}
  .js .s7-p3 .s7-in{animation:none!important;opacity:1!important}
  .s7-in,.s7-fo,.s7-gets b::after,.s7-dots i,.s7-cap,.s7-tile::after,.m7-cap-card,.t8-glass,.t8-ring{transition:none!important}
  .js .t8-p5 .t8-glass{opacity:1!important;transform:none!important}
  .js .t8-p5 .t8-ring{opacity:1!important}
  .s7-deck.is-fade{animation:s7-fade .22s ease}
  @keyframes s7-fade{from{opacity:.35}to{opacity:1}}
}
/* cover panel logo on phones: smaller, tighter; dropped on the shortest screens so the button stays on screen */
@media (min-width:761px) and (max-height:800px){.s7-panel-logo{margin-bottom:24px}}
@media (max-width:760px){.s7-panel-logo{width:112px;margin-bottom:14px}}
@media (max-width:760px) and (max-height:620px){.s7-panel-logo{display:none}}

/* Fable's cover pass (28 Oct 2026): three deliberate lines, the action lands last, a pool of shade behind the panel */
.s7-panel h1{font-size:clamp(34px,2.9vw,46px)}
.s7-panel h1 span{display:block;white-space:nowrap}
.s7-panel .s7-btn{max-width:320px}
.s7-panel-logo,.s7-panel h1,.s7-panel .s7-btn{animation:s7-rise .7s var(--ease) both}
.s7-panel-logo{animation-delay:.42s}
.s7-panel h1{animation-delay:.51s}
.s7-panel .s7-btn{animation-delay:.6s}
@keyframes s7-rise{from{opacity:0;transform:translate3d(0,8px,0)}}
.s7-p1 .s7-shade::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at calc(var(--gut) + 280px) 50%,rgba(14,15,18,.5),rgba(14,15,18,0))}
@media (max-width:760px){
  .s7 .s7-panel-logo{display:none}
  .s7-panel h1{font-size:24px}
  .s7-panel h1 span{display:inline}
  .s7-panel h1 em{display:inline}
  .s7-panel .s7-btn{max-width:none}
  .s7-p1 .s7-shade::after{display:none}
}
@media (prefers-reduced-motion:reduce){.s7-panel-logo,.s7-panel h1,.s7-panel .s7-btn{animation:none}}
/* phones: the cover invites a look first; Subscribe is a normal-sized button beside "Market by market" (29 Oct 2026) */
.s7-look{display:none}
@media (max-width:760px){
  .s7-panel h1 span,.s7-panel h1 em{display:block}
  .s7-acts{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
  .s7-panel .s7-acts .s7-btn{width:auto;height:44px;margin:0;padding:0 24px;font-size:15px}
  .s7-look{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font:600 15px/1 var(--sans);text-decoration:none;animation:s7-rise .7s var(--ease) .66s both}
  .s7-look svg{animation:s7-nudge 2.4s ease-in-out infinite}
  .s7-p1 > .s7-cue{display:none}
}
@media (max-width:760px) and (max-height:660px){.s7-acts{margin-top:12px}}
@media (prefers-reduced-motion:reduce){.s7-look,.s7-look svg{animation:none}}
/* phones (29 Oct 2026, his pick B): no paper sheet, light type on the darkened wall, two text choices */
@media (max-width:760px){
  .s7-p1 .s7-shade{background:linear-gradient(to bottom,rgba(14,15,18,.82) 0,rgba(14,15,18,0) 96px),linear-gradient(to top,rgba(14,15,18,.97) 0,rgba(14,15,18,.93) 30%,rgba(14,15,18,.55) 46%,rgba(14,15,18,0) 64%)}
  .s7-panel{background:none;box-shadow:none;padding:0 var(--gut) max(22px,env(safe-area-inset-bottom))}
  .s7-panel h1{color:#F4F2ED;font-size:28px;line-height:1.12}
  .s7-acts{margin-top:20px;padding-top:6px;border-top:1px solid rgba(244,242,237,.16)}
  .s7-look{color:#F4F2ED}
  .s7-panel .s7-acts .s7-btn{order:2;background:none;padding:0;height:44px;color:#F4F2ED;font:600 15px/1 var(--sans);gap:8px}
  .s7-panel .s7-acts .s7-btn::after{content:"→";color:var(--red);font-size:17px;transition:transform .25s var(--ease)}
  .s7-panel .s7-acts .s7-btn:hover::after{transform:translateX(4px)}
}
@media (max-width:760px) and (max-height:660px){.s7-panel h1{font-size:26px}.s7-acts{margin-top:14px}}

/* Cover Notes lead picture: whole, as the Cover Notes page shows it, with its kind as a small grey caption */
.cnp-lead{float:right;width:30%;margin:.4cqw 0 1cqw 3cqw}
.cnp-lead img{display:block;width:100%;height:auto;aspect-ratio:1200/675;border-radius:.5cqw;background:var(--cn-line)}
.cnp-lead figcaption{margin-top:.8cqw;font:500 2.2cqw/1.3 var(--sans);color:var(--cn-muted)}
.cnp-i:first-child .cnp-xp{clear:both}
@media (max-width:760px){ .cnp-lead{width:32%;margin-left:3.6cqw} .cnp-lead figcaption{margin-top:1.2cqw;font-size:3.5cqw} }
/* wall hover caption: a brighter headline and the date in red (a lighter red, so it reads on the dark fade) */
.s7-cap{background:linear-gradient(to top,rgba(10,11,13,.96) 0%,rgba(10,11,13,.82) 45%,rgba(10,11,13,0))}
.s7-cap b{font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.s7-cap i{color:rgba(255,255,255,.8)}
.s7-cap time{color:#FF5C70;font-weight:600}
/* Cover Notes: a quiet link to the About Cover Notes page, under its caption */
.s7-gets li:has(.s7-more){flex-direction:column;align-items:center}
.s7-more{margin-top:10px;font:500 clamp(13.5px,1.05cqw,15px)/1.3 var(--sans);color:var(--red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:opacity .3s ease}
.s7-more:hover{color:var(--red-d);text-decoration-thickness:2px}
.s7-more:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.s7-p3.has-focus:not([data-focus="card"]) .s7-more{opacity:.42}
@media (min-width:761px) and (max-height:760px){.s7-more{margin-top:6px}}
/* phones: the link sits in the empty space under the "Cover Notes" label, so the list keeps its height */
@media (max-width:760px){
  .s7-gets li:has(.s7-more){display:block;position:relative}
  .s7-more{position:absolute;left:0;top:31px;max-width:92px;margin:0;font-size:12.5px;line-height:1.3}
}
@media (max-width:760px) and (max-height:620px){.s7-more{top:27px}}
/* phones: the small text links get a 44px-high hit area from an invisible layer, so nothing moves */
@media (max-width:760px){
  .s7-login,.m7-quiet a{position:relative}
  .s7-login::after,.m7-quiet a::after,.s7-more::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;margin-top:-22px}
}
.s7-gets .s7-more span{margin:0;font:inherit;color:inherit;line-height:inherit}

/* PLANS BLOCK styles: page 4, "Choose your edition" (v8-PLANS-PROPER.md, 28 Oct 2026).
   A conventional pricing page: a centred heading, one Yearly / Monthly switch, three equal cards whose rows line up
   (subgrid), a quiet line underneath, and a Teams dialog. Phones show one card at a time under a tab control.
   Every class starts pl-. Tokens sit on .pl so the block reads nothing from the shell but --vh and --headh. */

.pl{
  --pl-paper:#FCFBF8; --pl-white:#fff; --pl-ink:#14161A; --pl-text:#3B3E45; --pl-grey:#6B6F78; --pl-line:#E8E4DC; --pl-line2:#D9D3C7; --pl-track:#EFECE6;
  --pl-red:#C8102E; --pl-red-d:#A50D26;
  --pl-disp:"Playfair Display",Georgia,serif; --pl-sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --pl-ease:cubic-bezier(.16,1,.3,1);
  --pl-gap:clamp(18px,2vw,24px);           /* between the cards */
  --pl-pad:clamp(22px,3.4vh,32px);         /* inside a card, top and bottom */
  --pl-padx:clamp(24px,2.4vw,32px);        /* inside a card, left and right */
  --pl-sp:clamp(14px,2.4vh,22px);          /* the larger gaps inside a card */
  --pl-inc:clamp(14px,1.9vh,15px);         /* the includes lists */
  background:var(--pl-paper);color:var(--pl-text);font:400 16px/1.5 var(--pl-sans);
  font-variant-numeric:lining-nums proportional-nums;-webkit-font-smoothing:antialiased
}
.pl *,.pl *::before,.pl *::after{box-sizing:border-box}
.pl :where(h2,h3,p,ul){margin:0}
.pl-in{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;
  padding:calc(var(--headh, 72px) + clamp(4px,1vh,12px)) clamp(20px,5vw,80px) clamp(14px,2.4vh,26px)}

/* ---------- top: heading, switch, regional line ---------- */
.pl-top{display:flex;flex-direction:column;align-items:center;text-align:center}
.pl-h{font:500 clamp(32px,4.9vh,48px)/1.08 var(--pl-disp);color:var(--pl-ink);letter-spacing:-.015em}

.pl-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-top:clamp(14px,2.4vh,24px);padding:4px;border-radius:999px;background:var(--pl-track);isolation:isolate}
.pl-switch::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--pl-white);
  box-shadow:0 1px 2px rgba(20,22,26,.08),0 2px 8px rgba(20,22,26,.06);transition:transform .32s var(--pl-ease)}
.pl-switch[data-term="month"]::before{transform:translateX(100%)}
.pl-switch button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:132px;height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;
  font:500 15px/1 var(--pl-sans);color:var(--pl-grey);cursor:pointer;transition:color .2s ease}
.pl-switch button[aria-pressed="true"]{color:var(--pl-ink)}
.pl-switch button:hover{color:var(--pl-ink)}
.pl-switch button:focus-visible{outline:2px solid var(--pl-red);outline-offset:2px}
.pl-save{font:600 12.5px/1 var(--pl-sans);color:var(--pl-red)}

.pl-region{position:relative;margin-top:10px;font:400 13.5px/1.3 var(--pl-sans);color:var(--pl-grey)}
.pl-region[hidden]{display:none}
.pl-region b{font-weight:600;color:var(--pl-ink)}
.pl-region .pl-sep{margin:0 .45em}
.pl-change{padding:0;border:0;background:none;font:inherit;color:var(--pl-ink);text-decoration:underline;text-decoration-color:var(--pl-line2);text-underline-offset:3px;cursor:pointer}
.pl-change:hover{text-decoration-color:var(--pl-ink)}
.pl-change:focus-visible{outline:2px solid var(--pl-red);outline-offset:2px}
.pl-pick{position:absolute;z-index:5;left:50%;top:calc(100% + 8px);transform:translateX(-50%);min-width:220px;padding:6px 0;text-align:left;background:var(--pl-white);border:1px solid var(--pl-line);border-radius:8px;box-shadow:0 12px 32px -12px rgba(20,22,26,.28)}
.pl-pick[hidden]{display:none}
.pl-pick button{display:block;width:100%;padding:9px 16px 9px 34px;border:0;background:none;text-align:left;font:400 14px/1.3 var(--pl-sans);color:var(--pl-ink);cursor:pointer;position:relative}
.pl-pick button:hover,.pl-pick button:focus-visible{background:var(--pl-paper);outline:0}
.pl-pick button[aria-checked="true"]::before{content:"";position:absolute;left:15px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--pl-red)}

/* ---------- the phone tabs (hidden on wider screens) ---------- */
.pl-tabs{display:none}

/* ---------- the three cards: equal width, equal height, rows shared through subgrid ---------- */
.pl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(7,auto);column-gap:var(--pl-gap);
  width:100%;max-width:1120px;margin-top:clamp(18px,3.4vh,36px)}
.pl-card{position:relative;display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;align-content:start;
  padding:var(--pl-pad) var(--pl-padx);background:var(--pl-white);border:1px solid var(--pl-line);border-radius:10px;
  transition:transform .25s var(--pl-ease),box-shadow .25s var(--pl-ease)}
.pl-card--rec{border-top:3px solid var(--pl-red);padding-top:calc(var(--pl-pad) - 2px);box-shadow:0 1px 2px rgba(20,22,26,.04),0 18px 44px -22px rgba(20,22,26,.26)}
@media (hover:hover){
  .pl-card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(20,22,26,.04),0 14px 32px -20px rgba(20,22,26,.22)}
  .pl-card--rec:hover{box-shadow:0 1px 2px rgba(20,22,26,.05),0 22px 48px -22px rgba(20,22,26,.32)}
}

.pl-tag{min-height:18px;font:600 13px/18px var(--pl-sans);color:var(--pl-red)}
.pl-name{margin-top:4px;font:500 28px/1.15 var(--pl-disp);color:var(--pl-ink);letter-spacing:-.01em}
.pl-line{margin-top:6px;font:400 15px/1.45 var(--pl-sans);color:var(--pl-text)}

.pl-price{display:flex;flex-direction:column;justify-content:flex-end;margin-top:var(--pl-sp)}
.pl-was{align-self:baseline;margin-right:10px;font:400 16px/1 var(--pl-sans);color:var(--pl-grey);text-decoration:line-through;text-decoration-thickness:1px}
.pl-was[hidden]{display:none}
.pl-demo{margin-top:6px;font:600 12.5px/1.3 var(--pl-sans);color:var(--pl-red)}
.pl-demo[hidden]{display:none}
.pl-amt{display:flex;align-items:baseline;white-space:nowrap;color:var(--pl-ink)}
.pl-cur{align-self:flex-start;margin:7px 3px 0 0;font:600 17px/1 var(--pl-sans);letter-spacing:0}
.pl-num{display:inline-block;font:600 clamp(42px,6.4vh,50px)/1 var(--pl-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pl-num.is-swap{animation:pl-swap .3s var(--pl-ease)}
@keyframes pl-swap{from{opacity:0;transform:translateY(5px)}}
.pl-per{margin-left:8px;font:400 15px/1 var(--pl-sans);color:var(--pl-grey)}
.pl-amt--word{font:500 15px/1.35 var(--pl-sans);color:var(--pl-ink)}
.pl-note{margin-top:8px;min-height:20px;font:400 13.5px/1.45 var(--pl-sans);color:var(--pl-grey)}
.pl-note.is-swap{animation:pl-swap .3s var(--pl-ease)}

.pl-btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;margin-top:var(--pl-sp);padding:0 18px;border:1.5px solid var(--pl-ink);border-radius:6px;background:transparent;
  font:600 15.5px/1 var(--pl-sans);color:var(--pl-ink);text-decoration:none;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.pl-btn:focus-visible{outline:2px solid var(--pl-red);outline-offset:3px}
.pl-btn--line:hover{background:var(--pl-ink);color:#fff}
.pl-btn--red{border-color:var(--pl-red);background:var(--pl-red);color:#fff}
.pl-btn--red:hover{border-color:var(--pl-red-d);background:var(--pl-red-d)}
.pl-btn--ink{border-color:var(--pl-ink);background:var(--pl-ink);color:#fff}
.pl-btn--ink:hover{background:#000;border-color:#000}

.pl-inc{list-style:none;margin-top:var(--pl-sp);padding:var(--pl-sp) 0 0;border-top:1px solid var(--pl-line)}
.pl-inc li{position:relative;padding-left:26px;font:400 var(--pl-inc)/1.45 var(--pl-sans);color:var(--pl-text)}
.pl-inc li + li{margin-top:clamp(5px,1vh,9px)}
.pl-inc li::before{content:"";position:absolute;left:1px;top:.32em;width:14px;height:8px;border-left:1.75px solid var(--pl-red);border-bottom:1.75px solid var(--pl-red);transform:rotate(-45deg) scale(.86);transform-origin:50% 50%}
/* the "and the rest" line: only on the shortest phones, where Full access's list is cut down */
.pl-inc li.pl-inc-more{display:none}
.pl-inc li.pl-inc-more::before{content:"+";top:0;width:auto;height:auto;border:0;transform:none;font:600 15px/1.35 var(--pl-sans);color:var(--pl-red)}

/* ---------- the quiet line ---------- */
.pl-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;margin-top:clamp(16px,2.8vh,30px);font:400 13.5px/1.5 var(--pl-sans);color:var(--pl-grey);text-align:center}
.pl-foot .pl-sep{margin:0 .7em;color:var(--pl-line2)}
.pl-foot a{color:var(--pl-ink);text-decoration:underline;text-decoration-color:var(--pl-line2);text-underline-offset:3px}
.pl-foot a:hover{text-decoration-color:var(--pl-ink)}
.pl-foot a:focus-visible{outline:2px solid var(--pl-red);outline-offset:2px}

/* ---------- Teams dialog ---------- */
.pl-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:12px;background:var(--pl-white,#fff);color:#3B3E45;
  box-shadow:0 30px 80px -20px rgba(14,15,18,.45);overflow:auto;overscroll-behavior:contain;font:400 16px/1.5 Inter,system-ui,sans-serif}
.pl-dialog::backdrop{background:rgba(14,15,18,.5)}
.pl-dialog[open]{animation:pl-dlg .28s cubic-bezier(.16,1,.3,1)}
@keyframes pl-dlg{from{opacity:0;transform:translateY(10px) scale(.985)}}
.pl-form{position:relative;padding:30px 32px 24px}
.pl-x{position:absolute;top:14px;right:14px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid #E8E4DC;border-radius:50%;background:#fff;color:#14161A;cursor:pointer}
.pl-x:hover{border-color:#14161A}
.pl-x:focus-visible{outline:2px solid #C8102E;outline-offset:2px}
.pl-dialog-h{margin:0;font:500 26px/1.15 "Playfair Display",Georgia,serif;color:#14161A;letter-spacing:-.01em}
.pl-dialog-s{margin:6px 0 0;font-size:14.5px;color:#6B6F78}
.pl-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:20px}
.pl-f{display:block;min-width:0}
.pl-f--wide{grid-column:1 / -1}
.pl-f span{display:block;margin-bottom:6px;font:500 13px/1.2 Inter,system-ui,sans-serif;color:#3B3E45}
.pl-f i{font-style:normal;font-weight:400;color:#6B6F78}
.pl-f input,.pl-f textarea{display:block;width:100%;height:44px;padding:0 12px;border:1px solid #D9D3C7;border-radius:6px;background:#fff;font:400 16px/1.3 Inter,system-ui,sans-serif;color:#14161A;outline:0;transition:border-color .15s ease,box-shadow .15s ease}
.pl-f textarea{height:auto;min-height:84px;padding:10px 12px;resize:vertical}
.pl-f input:focus,.pl-f textarea:focus{border-color:#14161A;box-shadow:0 0 0 3px rgba(20,22,26,.08)}
.pl-f input[type="number"]{-moz-appearance:textfield}
.pl-f input::-webkit-outer-spin-button,.pl-f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pl-send{margin-top:20px}
.pl-dialog .pl-btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;border:1.5px solid #14161A;border-radius:6px;background:#14161A;color:#fff;font:600 15.5px/1 Inter,system-ui,sans-serif;cursor:pointer}
.pl-dialog .pl-btn:hover{background:#000}
.pl-dialog-note{margin:12px 0 0;font-size:13px;color:#6B6F78;text-align:center}
.pl-dialog-note.is-said{color:#14161A}

/* ---------- narrow desktops (1024x768 and the like): the cards' text wraps more, so the cards take the short-screen
   spacing and the heading clears the header ---------- */
@media (min-width:761px) and (max-width:1100px) and (max-height:900px){
  .pl{--pl-pad:22px;--pl-sp:14px;--pl-inc:14px}
  .pl-name{font-size:26px}
  .pl-btn{height:46px}
}

/* ---------- short desktop screens (1280x720 and the like) ---------- */
@media (min-width:761px) and (max-height:760px){
  .pl{--pl-pad:22px;--pl-sp:14px;--pl-inc:14px}
  .pl-name{font-size:26px}
  .pl-btn{height:46px}
  .pl.is-regional{--pl-sp:11px}
  .pl.is-regional .pl-inc li + li{margin-top:4px}
}
/* laptops whose browser leaves under 660px (1366x768 and 1280x720 with toolbars, a taskbar or an info bar):
   the same page, tighter, so the quiet line under the cards always shows */
@media (min-width:761px) and (max-height:660px){
  .pl{--pl-pad:16px;--pl-sp:10px;--pl-inc:13.5px}
  .pl-in{padding-top:calc(var(--headh, 72px) - 6px);padding-bottom:10px}
  .pl-h{font-size:32px}
  .pl-switch{margin-top:10px}
  .pl-switch button{height:36px}
  .pl-cards{margin-top:14px}
  .pl-tag{min-height:16px;line-height:16px}
  .pl-name{margin-top:2px;font-size:24px}
  .pl-line{margin-top:2px;font-size:14px}
  .pl-num{font-size:40px}
  .pl-note{margin-top:4px}
  .pl-btn{height:42px}
  .pl-inc li{line-height:1.4}
  .pl-inc li + li{margin-top:3px}
  .pl-foot{margin-top:12px}
}
@media (min-width:761px) and (max-height:580px){
  .pl{--pl-pad:13px;--pl-sp:8px}
  .pl-h{font-size:28px}
  .pl-switch button{height:34px}
  .pl-cards{margin-top:10px}
  .pl-num{font-size:36px}
  .pl-inc li + li{margin-top:1px}
  .pl-foot{margin-top:8px}
}

/* =========================================================
   Phones: one card at a time, chosen by the tabs (or a swipe)
   ========================================================= */
@media (max-width:760px){
  .pl{--pl-pad:20px;--pl-padx:20px;--pl-sp:14px;--pl-inc:14px}
  .pl-in{justify-content:flex-start;padding:calc(var(--headh, 52px) + 8px) 20px 10px}
  .pl-h{font-size:clamp(24px,6.6vw,28px)}
  .pl-switch{margin-top:12px}
  .pl-switch button{min-width:118px;height:36px;font-size:14px;padding:0 14px}
  .pl-region{margin-top:8px;font-size:12.5px}

  .pl-tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin-top:14px;border-bottom:1px solid var(--pl-line)}
  .pl-tabs button{position:relative;height:40px;padding:0 4px;border:0;background:none;font:500 14px/1 var(--pl-sans);color:var(--pl-grey);cursor:pointer}
  .pl-tabs button[aria-selected="true"]{color:var(--pl-ink);font-weight:600}
  .pl-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:2px;border-radius:2px;background:var(--pl-red)}
  .pl-tabs button:focus-visible{outline:2px solid var(--pl-red);outline-offset:-2px}

  .pl-cards{display:block;margin-top:12px;touch-action:pan-y}
  .pl-card{display:flex;flex-direction:column;width:100%}
  .pl-card:not(.is-on){display:none}
  .pl-card.is-on{animation:pl-in .3s var(--pl-ease)}
  @keyframes pl-in{from{opacity:0;transform:translateX(var(--pl-from,0))}}
  .pl-card--rec{box-shadow:0 1px 2px rgba(20,22,26,.04),0 14px 30px -20px rgba(20,22,26,.24)}
  .pl-card .pl-tag:empty{display:none}
  .pl-tag{min-height:0;font-size:12.5px;line-height:16px;margin-bottom:2px}
  .pl-name{margin-top:0;font-size:24px}
  .pl-line{margin-top:3px;font-size:14px}
  .pl-num{font-size:44px}
  .pl-cur{margin-top:6px;font-size:16px}
  .pl-note{margin-top:6px;min-height:0;font-size:13px}
  .pl-demo{margin-top:4px;font-size:12px}
  .pl-btn{height:46px}
  .pl-inc li + li{margin-top:5px}

  .pl-foot{margin-top:auto;padding-top:10px;font-size:12px;line-height:1.55}
  .pl-foot .pl-sep{margin:0 .5em}
  .pl-foot{flex-direction:column;align-items:center}
  .pl-foot .pl-sep--mid{display:none}
  /* bigger hit areas (44px high) for the footer links, the switch and the tabs, without moving anything */
  .pl-foot a{position:relative}
  .pl-foot a::after,.pl-switch button::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;margin-top:-22px}
  .pl-switch button{position:relative}
  .pl-switch button::after{left:0;right:0}
  .pl-tabs button::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}

  .pl-form{padding:24px 20px 18px}
  .pl-dialog-h{font-size:23px;padding-right:40px}
  .pl-fields{grid-template-columns:1fr;gap:10px;margin-top:14px}
  .pl-f input{height:42px}
  .pl-f textarea{min-height:64px}
  .pl-send{margin-top:16px}
}
/* the shortest phones: the lists show their first three items; Full access shows two and says what else it has */
@media (max-width:760px) and (max-height:660px){
  .pl{--pl-pad:16px;--pl-sp:11px}
  .pl-inc li:nth-child(n+4){display:none}
  #pl-full .pl-inc li:nth-child(3){display:none}
  .pl-inc li.pl-inc-more{display:block;color:var(--pl-grey)}
  .pl-h{font-size:24px}
  .pl-tabs{margin-top:10px}
  .pl-tabs button{height:38px}
  .pl-cards{margin-top:10px}
  .pl-num{font-size:40px}
  .pl-fields{grid-template-columns:1fr 1fr}
  .pl-f--wide{grid-column:1 / -1}
  .pl.is-regional{--pl-sp:9px}
  .pl.is-regional .pl-line{display:none}
  .pl.is-regional .pl-tabs{margin-top:6px}
  .pl.is-regional .pl-cards{margin-top:8px}
}
@media (max-width:760px) and (max-height:620px){
  .pl-h{font-size:23px}
  .pl-switch{margin-top:10px}
  .pl-switch button{height:34px}
  .pl-foot{padding-top:8px;font-size:11.5px;line-height:1.5}
  /* Full access on Monthly has a two-line note; a little less air keeps the quiet line (and Log in) on screen */
  .pl{--pl-sp:9px}
  .pl-inc li + li{margin-top:3px}
  .pl.is-regional .pl-line{display:none}
  .pl.is-regional .pl-region{margin-top:6px}
}

/* phones without JavaScript: the tabs cannot switch, so all three cards stack (Full access first), every list shows
   in full and this one page scrolls */
@media (max-width:760px){
  html:not(.js) .pl{height:auto;min-height:var(--vh)}
  html:not(.js) .pl-in{height:auto}
  html:not(.js) .pl-tabs{display:none}
  html:not(.js) .pl-cards{display:flex;flex-direction:column;gap:12px}
  html:not(.js) .pl-card:not(.is-on){display:flex}
  html:not(.js) #pl-full{order:-1}
  html:not(.js) .pl-inc li:nth-child(n),html:not(.js) #pl-full .pl-inc li:nth-child(3){display:block}
  html:not(.js) .pl-inc li.pl-inc-more{display:none}
  html:not(.js) .pl-foot{margin-top:16px}
}

/* ---------- reduced motion: nothing moves, nothing hidden ---------- */
@media (prefers-reduced-motion:reduce){
  .pl-switch::before,.pl-card,.pl-btn{transition:none!important}
  .pl-num.is-swap,.pl-note.is-swap,.pl-card.is-on,.pl-dialog[open]{animation:none!important}
  .pl-card:hover{transform:none}
}
.pl-dialog .pl-f input:focus-visible,.pl-dialog .pl-f textarea:focus-visible{outline:0}

/* ---------- v9 (29 Oct 2026): Corporate account check, discount application ---------- */
.pl-rest{min-width:0}
.pl-check{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:var(--pl-sp);padding:12px 14px;border:0;border-radius:6px;background:var(--pl-track);
  font:500 14px/1.3 var(--pl-sans);color:var(--pl-ink);text-align:left;cursor:pointer;transition:background-color .18s ease}
.pl-check svg{flex:none;color:var(--pl-red);transition:transform .2s var(--pl-ease)}
.pl-check:hover{background:#E6E2DA}
.pl-check:hover svg{transform:translateX(2px)}
.pl-check:focus-visible{outline:2px solid var(--pl-red);outline-offset:2px}
.pl-link{padding:0;border:0;background:none;font:inherit;color:var(--pl-ink);text-decoration:underline;text-decoration-color:var(--pl-line2);text-underline-offset:3px;cursor:pointer}
.pl-link:hover{text-decoration-color:var(--pl-ink)}
.pl-link:focus-visible{outline:2px solid var(--pl-red);outline-offset:2px}

.pl-dialog--sm{width:min(460px,calc(100vw - 32px))}
.pl-dialog--lg{width:min(640px,calc(100vw - 32px))}
.pl-dialog .pl-dialog-s{max-width:44ch}
.pl-dialog-h{padding-right:44px}
.pl-f select{display:block;width:100%;height:44px;padding:0 36px 0 12px;border:1px solid #D9D3C7;border-radius:6px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2314161A' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 13px center;
  -webkit-appearance:none;appearance:none;font:400 16px/1.3 Inter,system-ui,sans-serif;color:#14161A;outline:0;transition:border-color .15s ease,box-shadow .15s ease}
.pl-f select:focus{border-color:#14161A;box-shadow:0 0 0 3px rgba(20,22,26,.08)}
.pl-f input::placeholder{color:#A4A29C}
.pl-f .is-bad,.pl-f .is-bad:focus{border-color:#C8102E;box-shadow:0 0 0 3px rgba(200,16,46,.1)}
.pl-dialog-note.is-said{color:#C8102E}

.pl-seg{display:inline-grid;grid-template-columns:1fr 1fr;margin:18px 0 0;padding:4px;border:0;border-radius:999px;background:#EFECE6}
.pl-seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pl-seg label{position:relative;cursor:pointer}
.pl-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pl-seg span{display:flex;align-items:center;justify-content:center;min-width:128px;height:36px;padding:0 16px;border-radius:999px;font:500 14.5px/1 Inter,system-ui,sans-serif;color:#6B6F78;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.pl-seg input:checked + span{background:#fff;color:#14161A;box-shadow:0 1px 2px rgba(20,22,26,.08),0 2px 8px rgba(20,22,26,.06)}
.pl-seg input:focus-visible + span{outline:2px solid #C8102E;outline-offset:2px}

.pl-dialog .pl-done:focus,.pl-dialog .pl-done:focus-visible{outline:none!important}
.pl-done[hidden],.pl-view[hidden]{display:none}
.pl-tick{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:16px;border-radius:50%;background:#F7E7EA;color:#C8102E}
.pl-done .pl-dialog-h{animation:pl-dlg .4s cubic-bezier(.16,1,.3,1)}
.pl-done-p{margin:10px 0 0;font-size:15px;line-height:1.55;color:#3B3E45}
.pl-done-p b{font-weight:600;color:#14161A;overflow-wrap:anywhere}
.pl-done-list{margin:16px 0 0;padding:0;list-style:none;border-top:1px solid #E8E4DC}
.pl-done-list li{padding:12px 0;border-bottom:1px solid #E8E4DC;font-size:14.5px;line-height:1.5;color:#3B3E45}
.pl-done-list b{font-weight:600;color:#14161A}
.pl-done .pl-send{margin-top:20px}

@media (max-width:760px){
  .pl-check{padding:11px 13px;font-size:13.5px}
  .pl-seg{display:grid;margin-top:14px}
  .pl-seg span{min-width:0;height:34px;font-size:14px}
  .pl-dialog--lg .pl-fields{grid-template-columns:1fr 1fr}
  .pl-dialog--lg .pl-dialog-s{font-size:13.5px}
}
@media (max-width:420px){
  .pl-dialog--lg .pl-fields{grid-template-columns:1fr}
}
@media (max-width:760px) and (max-height:660px){
  .pl-check{margin-top:10px;padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){
  .pl-done .pl-dialog-h,.pl-check svg{animation:none!important;transition:none!important}
}

/* WordPress: an editor's toolbar sits above the fixed header */
body.admin-bar .s7-head,body.admin-bar .s7-dots{margin-top:var(--wp-admin--admin-bar--height,32px)}