/* Load after legacy skins. Layout follows the approved V3 reference. */
body.design-v3{
  margin:0;background:var(--canvas);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);
  line-break:strict;overflow-wrap:break-word;word-break:normal;-webkit-font-smoothing:antialiased;
  background-image:repeating-linear-gradient(90deg,var(--page-stripe) 0 2px,transparent 2px 46px),linear-gradient(var(--page-top),var(--canvas) 40%,var(--page-bottom));
}
body.design-v3 *,body.design-v3 *::before,body.design-v3 *::after{box-sizing:border-box}
body.design-v3 :is(p,li,dd,td,.lead,.lede,.note){text-wrap:pretty;line-break:strict;word-break:normal;overflow-wrap:break-word}
body.design-v3 :is(h1,h2,h3,h4){font-family:var(--serif);font-weight:700;letter-spacing:0;text-wrap:balance}
body.design-v3 h1{font-size:clamp(2rem,5vw,4rem);line-height:1.18;max-inline-size:none}
body.design-v3 h2{font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.2;max-inline-size:none}
body.design-v3 h3{font-size:1.25rem;line-height:1.3}
body.design-v3 :is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid var(--rust);outline-offset:4px}
body.design-v3 :is(button,.button,.btn,.pill,summary,select){min-height:44px}
body.design-v3 :is(.v3-nb,.nowrap,.keep-together){white-space:nowrap;word-break:normal;overflow-wrap:normal}
body.design-v3 :is(.up,.positive){color:var(--up)}
body.design-v3 :is(.dn,.down,.negative){color:var(--down)}
body.design-v3 :is(.up,.dn){font-variant-numeric:tabular-nums;white-space:nowrap}
body.design-v3 :is(.wrap,.w){max-width:1120px;margin-inline:auto;padding-inline:var(--m)}
body.design-v3 section{padding-block:var(--section-y);border:0}
body.design-v3 :is(.card,.v2-plan-card,.plan,.ui){background:var(--card);color:var(--ink);border:0;border-radius:var(--r);box-shadow:var(--shadow);padding:24px;min-width:0}
body.design-v3 :is(.card,.v2-plan-card,.plan) :is(p,.small){color:var(--muted)}
body.design-v3 a.card{display:block;text-decoration:none}
body.design-v3 a.card:hover{box-shadow:0 0 0 2px var(--rust),var(--shadow)}
body.design-v3 :is(.grid,.plans){gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
/* Billing buttons share interval attributes with prices, but belong in the action row. */
body.design-v3 .plan-grid>.card>:is(a,button)[data-price-interval]{grid-row:13;grid-column:1}
body.design-v3 .plan-grid p[data-price-interval]{font-size:clamp(1.1rem,2vw,1.6rem);white-space:nowrap;overflow-wrap:normal;word-break:normal}
body.design-v3 .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
body.design-v3 :is(.button,.btn,.pill){display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:999px;border:1px solid transparent;font:600 1rem/1.4 var(--sans);text-decoration:none;cursor:pointer;white-space:normal;text-align:center;background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
body.design-v3 :is(.button,.btn,.pill).primary,body.design-v3 .pill.rust{background:var(--rust);color:var(--on-rust);box-shadow:0 10px 22px -10px #af520570}
body.design-v3 :is(.button,.btn,.pill).primary:hover,body.design-v3 .pill.rust:hover{background:var(--rust-press)}
body.design-v3 .pill.ink{background:var(--ink);color:var(--on-ink)}
body.design-v3 :is(.tag,.badge){display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;border-radius:999px;padding:4px 12px;font:600 .82rem/1.4 var(--sans);width:max-content;max-width:100%;height:auto;text-align:center;text-wrap:balance}
body.design-v3 .t-ok{background:var(--wash-moss);color:var(--moss-text)}
body.design-v3 :is(.note,.risk){background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:18px;color:var(--muted)}
body.design-v3 :is(input,select,textarea){background:var(--card);color:var(--ink);border-color:var(--control-line);border-radius:12px}
body.design-v3 :is(.billing-switch,.bill){border-radius:999px;background:var(--card);color:var(--ink)}
body.design-v3 :is(.v2-plan-card,.plan){display:flex;flex-direction:column;gap:10px;padding:28px}
body.design-v3 :is(.v2-plan-card,.plan) :is(h2,h3){margin-bottom:0}
body.design-v3 :is(.v2-plan-card.featured,.v2-plan-card.recommended,.v2-plan-recommended,.plan.hi){background:var(--card);box-shadow:0 0 0 2px var(--rust),var(--shadow)}
body.design-v3 :is(.v2-plan-card,.plan) .price{font:700 2.4rem/1.15 var(--serif);margin:12px 0;color:var(--ink);font-variant-numeric:tabular-nums}
body.design-v3 :is(.v2-plan-card,.plan) .price small{font:400 1rem/1.5 var(--sans);color:var(--muted)}
body.design-v3 :is(.v2-plan-card,.plan) :is(.button,.pill){margin-top:auto}
body.design-v3 .v2-plan-card li{font-size:1rem;line-height:1.6}
body.design-v3 :is(main,.faq-grp) details{border:0;border-bottom:1px solid var(--line);padding:18px 0;background:transparent}
body.design-v3 :is(main,.faq-grp) details summary{font:600 1.12rem/1.5 var(--serif);padding:6px 40px 6px 0;display:block;position:relative;list-style:none;text-wrap:balance}
body.design-v3 :is(main,.faq-grp) details summary::after{content:"+";color:var(--rust-text);position:absolute;right:0;top:6px}
body.design-v3 :is(main,.faq-grp) details[open]>summary::after{content:"−"}
body.design-v3 summary::-webkit-details-marker{display:none}
body.design-v3 footer{border-top:1px solid var(--line);margin-top:40px;padding-block:28px 48px;color:var(--muted);font-size:.9rem}
body.design-v3 footer a{color:inherit;text-decoration:none}
body.design-v3 footer a:hover{text-decoration:underline}
body.design-v3 .skip{z-index:100}

/* The whole capsule remains in normal flow and sticks while scrolling. */
body.design-v3 header.v3-header{position:sticky;top:14px;z-index:50;width:fit-content;max-width:calc(100% - 24px);margin:14px auto 0;padding:0;background:transparent;border:0;border-radius:999px}
body.design-v3 header.v3-header>.nav{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:4px;flex-wrap:nowrap;width:max-content;max-width:100%;min-height:58px;margin:0;padding:7px 8px;border-radius:999px;background:var(--nav-ink);color:var(--nav-text);box-shadow:0 18px 40px -16px #0008}
body.design-v3 header.v3-header .brand{display:inline-flex;align-items:center;justify-content:center;flex:none;gap:0;min-width:44px;min-height:44px;margin:0 6px 0 0;padding:0;color:var(--nav-text);border-radius:50%;text-decoration:none}
body.design-v3 header.v3-header .brand::before{content:none}
body.design-v3 header.v3-header .brand img{display:block;width:36px;height:36px;flex:none;border-radius:50%;background:#fff;object-fit:cover}
body.design-v3 header.v3-header :is(.nav-menu,.header-language,.v3-nav-group){border:0;padding:0;margin:0;min-width:0}
body.design-v3 header.v3-header .nav-menu{position:static}
body.design-v3 header.v3-header .nav-menu>summary{display:none}
body.design-v3 header.v3-header .nav-menu>nav{position:static;display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:2px;padding:0;margin:0;border:0;background:transparent;max-height:none;overflow:visible}
body.design-v3 header.v3-header :is(nav>a:not(.nav-account),.v3-nav-group>summary,.header-language>summary){display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 12px;color:var(--nav-text);font:500 .92rem/1.4 var(--sans);text-decoration:none;border:0;border-radius:999px;white-space:nowrap;list-style:none;cursor:pointer}
body.design-v3 header.v3-header :is(nav>a:not(.nav-account),.v3-nav-group>summary,.header-language>summary):hover,body.design-v3 header.v3-header .v3-nav-group[open]>summary{background:var(--nav-hover)}
body.design-v3 header.v3-header .v3-nav-group{position:relative}
body.design-v3 header.v3-header :is(.v3-nav-group,.header-language)>summary::after{content:"▾";display:inline;width:auto;height:auto;min-width:0;min-height:0;border:0;border-radius:0;background:none;font-size:.7rem;line-height:1;color:inherit}
body.design-v3 header.v3-header .v3-nav-panel{position:absolute;left:0;top:calc(100% + 10px);width:max-content;min-width:290px;max-width:min(620px,calc(100vw - 40px));padding:10px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 50px -18px #3c230a73}
body.design-v3 header.v3-header .v3-nav-panel a{display:block;min-height:44px;padding:10px 14px;border-radius:14px;color:var(--ink);font-size:.97rem;line-height:1.45;text-decoration:none;white-space:normal}
body.design-v3 header.v3-header .v3-nav-panel a:hover{background:var(--paper-2)}
body.design-v3 header.v3-header .v3-nav-panel :is(b,strong){display:block;font-weight:600}
body.design-v3 header.v3-header .v3-nav-panel :is(small,span){display:block;color:var(--muted);font-size:.85rem;line-height:1.4}
body.design-v3 header.v3-header .v3-nav-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:540px;max-width:100%}
body.design-v3 header.v3-header .v3-nav-columns>div+div{border-left:1px solid var(--line);padding-left:8px}
body.design-v3 header.v3-header .nav-account{display:inline-flex;flex:none;align-items:center;justify-content:center;min-height:44px;padding:9px 18px;margin-left:4px;background:#fffaf0;color:#2a2523;border:0;border-radius:999px;box-shadow:none;font:600 .92rem/1.4 var(--sans);text-decoration:none;white-space:nowrap}
body.design-v3 header.v3-header>.nav>.primary{min-height:44px;padding:9px 12px;background:transparent;color:var(--nav-text);border:0;box-shadow:none;font:500 .92rem/1.4 var(--sans)}
body.design-v3 header.v3-header>.nav>.primary:hover{background:var(--nav-hover)}
body.design-v3 header.v3-header .header-language{position:relative}
body.design-v3 header.v3-header .header-language>summary{font-size:.82rem}
body.design-v3 header.v3-header .header-language[open]>a{position:relative;display:flex;min-height:44px;padding:8px 12px;background:var(--card);color:var(--ink);font-size:.9rem;text-decoration:none;white-space:nowrap}
body.design-v3 header.v3-header .header-language[open]{align-self:flex-start;background:var(--nav-ink);border-radius:22px}
body.design-v3 header.v3-header [data-theme-toggle]{flex:none;min-height:44px;min-width:44px;padding:8px 10px;border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--nav-text);font:.82rem/1.4 var(--sans);white-space:nowrap}
body.design-v3 header.v3-header :focus-visible{outline-color:#f3ead9}
body.design-v3 header.v3-header .v3-nav-panel :focus-visible,body.design-v3 header.v3-header .header-language a:focus-visible{outline-color:var(--rust)}

@media(max-width:1100px){
  body.design-v3 header.v3-header{width:calc(100% - 24px);max-width:640px;top:10px;margin-top:10px}
  body.design-v3 header.v3-header>.nav{display:grid;grid-template-columns:minmax(44px,1fr) auto 4rem;width:100%;min-height:56px;gap:4px;padding:6px}
  body.design-v3 header.v3-header .brand{grid-column:1;grid-row:1;justify-self:start;align-self:center;margin:0;z-index:1}
  body.design-v3 header.v3-header>.nav>.nav-account,body.design-v3 header.v3-header>.nav>.primary{grid-column:2;grid-row:1;z-index:1;padding:9px 16px;margin:0;min-height:44px}
  body.design-v3 header.v3-header .nav-menu{grid-column:1/-1;grid-row:1}
  body.design-v3 header.v3-header .nav-menu>summary{display:flex;align-items:center;justify-content:center;width:4rem;min-height:44px;margin-left:auto;padding:8px;color:var(--nav-text);border-radius:999px;font:500 .9rem/1.4 var(--sans);list-style:none;white-space:nowrap}
  body.design-v3 header.v3-header .nav-menu>summary::after{content:none}
  body.design-v3 header.v3-header .nav-menu>nav{position:absolute;top:calc(100% + 10px);left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:4px;max-height:calc(100dvh - 94px);overflow-y:auto;padding:12px;background:var(--nav-ink);border:1px solid #ffffff26;border-radius:24px;box-shadow:0 18px 40px -16px #0008}
  body.design-v3 header.v3-header :is(nav>a:not(.nav-account),.v3-nav-group>summary,.header-language>summary){justify-content:space-between;padding:10px 14px;white-space:normal}
  body.design-v3 header.v3-header .v3-nav-panel{position:static;min-width:0;width:100%;max-width:none;margin-block:6px;padding:8px;border-radius:16px;box-shadow:none}
  body.design-v3 header.v3-header .v3-nav-columns{grid-template-columns:1fr;gap:0}
  body.design-v3 header.v3-header .v3-nav-columns>div+div{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:6px;margin-top:6px}
  body.design-v3 header.v3-header .header-language{align-self:stretch}
  body.design-v3 header.v3-header .header-language[open]{align-self:stretch}
  body.design-v3 header.v3-header .header-language[open]>a{border-radius:12px;margin:4px 0}
  body.design-v3 header.v3-header [data-theme-toggle]{justify-content:flex-start;padding-inline:14px}
  body.design-v3 header.v3-header nav>.nav-account{align-self:flex-start;margin:4px 0}
}
@media(max-width:860px){
  body.design-v3 :is(.grid,.grid.two,.plans,.plan-grid){grid-template-columns:1fr}
}
@media(max-width:640px){
  body.design-v3{font-size:1rem;--section-y:30px}
  body.design-v3 h1{font-size:clamp(1.8rem,8vw,2.5rem);line-height:1.22}
  body.design-v3 h2{font-size:1.5rem}
  body.design-v3 :is(.card,.v2-plan-card,.plan,.ui){padding:20px;border-radius:22px}
  body.design-v3 :is(.v2-plan-card,.plan) .price{font-size:2rem}
  body.design-v3 :is(.button,.btn,.pill){padding-inline:20px}
  body.design-v3 footer{margin-top:28px;padding-bottom:36px}
}

/* D: native details keeps the drawer usable without JavaScript. */
@media(max-width:1100px){
  html:has(body.design-v3 header.v3-header .nav-menu[data-v3-ready][open]){overflow:hidden}
  body.design-v3 header.v3-header .nav-menu:not([open])>nav{display:none}
  body.design-v3 header.v3-header .nav-menu>summary{gap:7px;width:5.5rem}
  body.design-v3 header.v3-header>.nav{grid-template-columns:minmax(44px,1fr) auto 5.5rem}
  body.design-v3 header.v3-header .v3-nav-columns{width:100%;min-width:0;max-width:100%}
  body.design-v3 header.v3-header .v3-nav-columns>div{min-width:0}
  body.design-v3 header.v3-header .v3-menu-icon{display:inline-block;width:16px;height:12px;flex:none;background:linear-gradient(currentColor,currentColor) top/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 2px no-repeat}
  body.design-v3 header.v3-header .nav-menu>summary:focus-visible{outline:3px solid var(--nav-text);outline-offset:2px}
  body.design-v3 header.v3-header .nav-menu>nav{overscroll-behavior:contain;scrollbar-gutter:stable}
}
