/* Swiftly Web-Kit · kit.css
   Reusable components extracted from the finished homepage (webseite-r12).
   Needs tokens.css first. Class names are prefixed sw-. No raw colours or times here.
   Structure: sections of the homepage first, then the parts added for subpages (bottom). */

/* shared pieces */
.sw-tri{display:inline-block;width:10px;height:11px;fill:currentColor;flex:none}
.sw-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--sw-space-4);height:56px;padding:0 20px 0 22px;border-radius:var(--sw-radius-m);border:0;font:700 var(--sw-fs-body)/1 var(--sw-font);letter-spacing:-.012em;white-space:nowrap;text-decoration:none;cursor:pointer;position:relative;background:var(--sw-accent);color:var(--sw-ink);transition:background-color var(--sw-dur-200),transform var(--sw-dur-140) var(--sw-ease-out)}
.sw-btn .sw-tri{transition:transform var(--sw-dur-300) var(--sw-ease-out)}
.sw-btn:hover{background:color-mix(in srgb,var(--sw-accent) 76%,var(--sw-white))}
.sw-btn:hover .sw-tri{transform:translateX(3px)}
.sw-btn:active,.sw-btn.is-pressed{transform:scale(.97);background:color-mix(in srgb,var(--sw-accent) 82%,var(--sw-black))}
.sw-btn:focus-visible,.sw-btn.is-focus{outline:2px solid var(--sw-text);outline-offset:3px}
.sw-btn[disabled]{opacity:.36;cursor:not-allowed;transform:none}
.sw-btn.is-loading{cursor:progress}
.sw-btn.is-loading .sw-tri{opacity:0}
.sw-btn.is-loading::after{content:"";position:absolute;right:18px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:sw-spin var(--sw-dur-800) linear infinite}
.sw-btn--sm{height:40px;padding:0 14px;font-size:var(--sw-fs-ui);border-radius:var(--sw-radius-btn-sm);gap:var(--sw-space-2)}
.sw-btn--sm.is-loading{padding-right:38px}
.sw-btn--sm.is-loading::after{right:12px}
.sw-btn--secondary{background:transparent;color:var(--sw-text);box-shadow:inset 0 0 0 1.5px var(--sw-line-strong)}
.sw-btn--secondary:hover{background:rgba(var(--sw-white-rgb),.06)}
@keyframes sw-spin{to{transform:rotate(360deg)}}
/* chips: a real 2px border on an inline-block box, so all four sides render the same */
.sw-chip{display:inline-block;height:30px;padding:0 10px;border:var(--sw-chip-border) solid currentColor;border-radius:var(--sw-radius-s);font:700 12.5px/26px var(--sw-font);letter-spacing:.01em;white-space:nowrap}
.sw-chips{display:flex;flex-wrap:wrap;gap:8px}
/* iPhone: real screenshot under Apple's bezel */
.sw-iphone{position:relative;aspect-ratio:1200/2449}
.sw-iphone .sw-iphone__screen{position:absolute;left:5.102%;top:2.233%;width:89.796%;height:95.533%;object-fit:cover;border-radius:12% / 5.6%;display:block}
.sw-bezel{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.sw-fitline{display:inline-block;white-space:nowrap}
.sw-ls0{letter-spacing:0}
.sw-fitline i{font-style:normal;color:var(--sw-accent)}
@media (prefers-reduced-motion:reduce){.sw-btn,.sw-btn .sw-tri{transition:none}}

.sw-icon{width:30px;height:30px;fill:currentColor;display:block;flex:none}
/* chips: sturdy, opaque 2px borders */
.sw-chip{border-width:2px}
/* real screenshot crops: --sw-crop-y = where the crop starts (fraction of the shot height) */
.sw-crop{overflow:hidden;background:var(--sw-bg)}
.sw-crop img{display:block;width:100%;margin-top:calc(var(--sw-crop-y) * -2.17391 * 100%)}
/* Apple TV bezel */
/* the Mac badge "Continue here", rebuilt from MacShared.swift OfferingRow */
.sw-offer{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:var(--sw-radius-pill);background:linear-gradient(rgba(var(--sw-accent-rgb),.18),rgba(var(--sw-accent-rgb),.18)),var(--sw-bg);color:var(--sw-accent);font-family:var(--sw-font);text-align:left}
.sw-offer svg{width:20px;height:20px;fill:currentColor;flex:none}
.sw-offer b{display:block;font:500 var(--sw-fs-small)/1.15 var(--sw-font)}
.sw-offer small{display:block;font:400 var(--sw-fs-xs)/1.2 var(--sw-font);color:var(--sw-text-3);margin-top:1px}

/* ===== P · page, nav, hero ===== */
.sw-page{width:100%;background:var(--sw-bg);color:var(--sw-text);container:swp / inline-size;overflow:hidden}
.sw-w{--sw-n:var(--sw-cols);--sw-pad:max(var(--sw-pad-desktop),calc((100cqw - var(--sw-max)) / 2 + var(--sw-pad-desktop)));--sw-col:calc((min(100cqw,var(--sw-max)) - 2 * var(--sw-pad-desktop)) / var(--sw-cols))}
.sw-g{display:grid;grid-template-columns:repeat(var(--sw-n),var(--sw-col));padding:0 var(--sw-pad);position:relative;z-index:1}
/* lines: drawn per area so each area can set its own strength and fade */
.sw-lines{position:relative}
.sw-lines::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(90deg,var(--sw-line-color,var(--sw-line)) 0 1px,transparent 1px var(--sw-col)) var(--sw-pad) 0/calc(var(--sw-col)*var(--sw-n) + 1px) 100% no-repeat;
  -webkit-mask:var(--sw-line-mask,none);mask:var(--sw-line-mask,none)}
/* nav: solid, no lines */
.sw-nav{background:var(--sw-nav-bg);position:relative;z-index:3}
.sw-nav .sw-g{height:var(--sw-nav-h);align-items:center}
.sw-nav .sw-g>*{grid-row:1}
.sw-nav__logo{grid-column:1;width:var(--sw-col);height:calc(var(--sw-col) * 1024 / 3005);color:var(--sw-text);display:block}
.sw-nav__links{grid-column:4/9;display:grid;grid-template-columns:subgrid}
.sw-nav__links a{justify-self:center;font:600 var(--sw-fs-body-sm)/1 var(--sw-font);color:var(--sw-text-2);text-decoration:none;padding:10px 4px;border-radius:8px}
.sw-nav__links a:hover{color:var(--sw-text)}
.sw-nav__donate{grid-column:11;justify-self:center}
.sw-nav__discord{grid-column:10;justify-self:center;display:inline-flex;align-items:center;gap:8px;font:600 var(--sw-fs-body-sm)/1 var(--sw-font);color:var(--sw-text-2);text-decoration:none;padding:10px 4px}
.sw-nav__discord:hover{color:var(--sw-text)}
.sw-nav__discord svg{width:20px;height:20px;fill:currentColor}
.sw-nav__download{grid-column:12;justify-self:stretch;visibility:hidden;transform:translateY(-6px);opacity:0;transition:opacity var(--sw-dur-250),transform var(--sw-dur-350) var(--sw-ease-out),visibility 0s var(--sw-dur-350)}
.sw-nav.is-dl .sw-nav__download{visibility:visible;transform:none;opacity:1;transition:opacity var(--sw-dur-250),transform var(--sw-dur-350) var(--sw-ease-out)}
.sw-nav__menu{display:none;width:44px;height:44px;border:0;border-radius:var(--sw-radius-btn-sm);background:transparent;color:var(--sw-text);align-items:center;justify-content:center;padding:0}
.sw-nav__menu .sw-icon{width:26px;height:26px}
/* hero */
.sw-hero{--sw-line-mask:var(--sw-fade-hero)}
.sw-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(var(--sw-line-edge),var(--sw-line-edge)) var(--sw-pad) 0/1px 100% no-repeat,linear-gradient(var(--sw-line-edge),var(--sw-line-edge)) calc(var(--sw-pad) + var(--sw-col)*var(--sw-n)) 0/1px 100% no-repeat;
  -webkit-mask:var(--sw-fade-hero-edge);mask:var(--sw-fade-hero-edge)}
.sw-hero .sw-g{padding-top:var(--sw-space-9);align-items:end}
.sw-hero__title{grid-column:1/8;grid-row:1;margin:0;font:900 var(--sw-fs-display)/1 var(--sw-font);letter-spacing:var(--sw-track-display)}
.sw-hero__line{display:block;line-height:.98}
.sw-rotor{display:grid;width:max-content;overflow:hidden;margin-top:.36em;padding-right:.14em;margin-right:-.14em}
.sw-rotor>span{grid-area:1/1;display:block;line-height:1.1;padding-bottom:.1em;white-space:nowrap;transform:translateY(-100%)}
.sw-rotor>span:first-child{transform:none}
.sw-rotor i{font-style:normal;color:var(--sw-accent)}
.sw-hero__note{grid-column:1/4;grid-row:2;margin:0;padding-top:var(--sw-space-3);border-top:1px solid var(--sw-line-strong);font:500 var(--sw-fs-small)/1.4 var(--sw-font);color:var(--sw-text-3)}
.sw-hero__note b{color:var(--sw-text-2)}
.sw-hero__side{grid-column:9/13;grid-row:1;margin-bottom:.32em}
.sw-lead{font:500 var(--sw-fs-lead)/1.4 var(--sw-font);letter-spacing:-.012em;color:var(--sw-text-2);margin:0}
.sw-lead b{color:var(--sw-text);font-weight:700}
.sw-hero__cta{display:grid;grid-template-columns:repeat(4,var(--sw-col));margin-top:var(--sw-space-6);align-items:center}
.sw-hero__cta .sw-btn{grid-column:1/3}
.sw-hero__meta{grid-column:3/5;font:600 var(--sw-fs-small)/1.4 var(--sw-font);color:var(--sw-text-3);padding-left:var(--sw-space-4)}
/* devices float freely: Mac window, iPhone in front */
.sw-hero__stage{grid-column:1/13;grid-row:3;position:relative;height:700px;margin-top:var(--sw-space-8)}
.sw-hero__stage::before{content:"";position:absolute;left:30%;right:0;top:-40px;height:600px;background:radial-gradient(closest-side,rgba(var(--sw-accent-rgb),.16),transparent);pointer-events:none}
.sw-hero__window{position:absolute;right:0;top:0;width:1010px;display:block;filter:var(--sw-shadow-window)}
.sw-hero__phone{position:absolute;left:96px;top:118px;width:290px;filter:drop-shadow(0 40px 50px rgba(var(--sw-black-rgb),.5))}
@keyframes sw-rotor-word{0%{transform:translateY(-100%)}9.333%,33.333%{transform:translateY(0)}42.667%{transform:translateY(100%)}42.668%,100%{transform:translateY(-100%)}}
@media (prefers-reduced-motion:no-preference){
  .sw-rotor>span{animation:sw-rotor-word var(--sw-dur-rotor) var(--sw-ease) infinite both}
  .sw-rotor>span:nth-child(1){animation-delay:calc(var(--sw-rot-t,0s) - var(--sw-dur-700))}
  .sw-rotor>span:nth-child(2){animation-delay:calc(var(--sw-rot-t,0s) - 5.7s)}
  .sw-rotor>span:nth-child(3){animation-delay:calc(var(--sw-rot-t,0s) - 3.2s)}
}
@media (prefers-reduced-motion:reduce){.sw-nav__download{transition:none}}
@container swp (max-width:600px){
  .sw-w{--sw-n:var(--sw-cols-mobile);--sw-pad:var(--sw-pad-mobile);--sw-col:calc((100cqw - 2 * var(--sw-pad-mobile)) / var(--sw-cols-mobile))}
  /* mobile: only the two content edges, no column lines */
  .sw-lines::before{background:linear-gradient(var(--sw-line-color,var(--sw-line)),var(--sw-line-color,var(--sw-line))) var(--sw-pad) 0/1px 100% no-repeat,linear-gradient(var(--sw-line-color,var(--sw-line)),var(--sw-line-color,var(--sw-line))) calc(100% - var(--sw-pad) + 1px) 0/1px 100% no-repeat}
  .sw-hero::after{display:none}
  .sw-nav .sw-g{height:var(--sw-nav-h-mobile)}
  .sw-nav__links{display:none}
  .sw-nav__logo{grid-column:1}
  .sw-nav__donate{grid-column:3;justify-self:end}
  .sw-nav__discord{grid-column:2;justify-self:end;padding:10px;margin-right:4px}
  .sw-nav__discord span{display:none}
  .sw-nav__discord svg{width:24px;height:24px}
  .sw-nav__download{grid-column:3;justify-self:end;width:max-content}
  .sw-nav.is-dl .sw-nav__donate{display:none}
  .sw-nav__menu{display:flex;grid-column:4;justify-self:end;margin-right:-10px}
  .sw-hero .sw-g{padding-top:var(--sw-space-7)}
  .sw-hero__title{grid-column:1/5}
  .sw-hero__note{grid-column:1/3}
  .sw-rotor{margin-top:.3em}
  .sw-hero__side{grid-column:1/5;grid-row:3;margin:var(--sw-space-6) 0 0}
  .sw-lead{font-size:var(--sw-fs-ui-lg)}
  .sw-hero__cta{grid-template-columns:repeat(4,var(--sw-col));margin-top:var(--sw-space-5)}
  .sw-hero__cta .sw-btn{grid-column:1/5}
  .sw-hero__meta{grid-column:1/5;padding:var(--sw-space-3) 0 0}
  .sw-hero__stage{grid-column:1/5;grid-row:4;height:330px;margin-top:var(--sw-space-7)}
  .sw-hero__stage::before{left:0;top:-20px;height:300px}
  .sw-hero__window{width:100%;top:0}
  .sw-hero__phone{left:8px;top:84px;width:118px}
}


/* ===== V2 · tiles ===== */
.sw-section{padding:var(--sw-space-9) 0;--sw-line-mask:var(--sw-fade-section)}
.sw-h2{margin:0;font:900 var(--sw-fs-h2)/1 var(--sw-font);letter-spacing:var(--sw-track-display)}
.sw-h2>span{display:block}
.sw-h2--display{font-size:var(--sw-fs-display)}
.sw-section__title{grid-column:1 / span var(--sw-title-span,5);grid-row:1}
.sw-section__intro{grid-column:9/13;grid-row:1;align-self:end;font:500 var(--sw-fs-body-lg)/1.45 var(--sw-font);color:var(--sw-text-2);margin:0 0 .3em}
.sw-tiles{grid-column:1/13;grid-row:2;display:grid;grid-template-columns:subgrid;margin-top:var(--sw-space-8);gap:0}
.sw-tile{grid-column:span 3;background:var(--sw-surface);box-shadow:inset 0 0 0 .5px rgba(var(--sw-white-rgb),.12);padding:var(--sw-space-6);min-height:240px;display:flex;flex-direction:column;gap:var(--sw-space-3)}
.sw-tile .sw-icon{color:var(--sw-accent);width:32px;height:32px}
.sw-tile h3{font:800 var(--sw-fs-h3)/1.1 var(--sw-font);letter-spacing:var(--sw-track-h3);margin:var(--sw-space-3) 0 0}
.sw-tile p{font:500 var(--sw-fs-body-sm)/1.45 var(--sw-font);color:var(--sw-text-3);margin:0}
.sw-tile .sw-chips{margin-top:var(--sw-space-2)}
.sw-tile .sw-chip{color:var(--sw-text-chip);border-color:var(--sw-chip-line)}
.sw-tile--accent{grid-column:span 6;background:var(--sw-accent);color:var(--sw-ink);box-shadow:none}
.sw-tile--accent .sw-icon{color:var(--sw-ink)}
.sw-tile--accent .sw-tile__big{font:900 var(--sw-fs-stat)/1 var(--sw-font);letter-spacing:var(--sw-track-display);margin:auto 0 0;color:var(--sw-ink)}
.sw-tile--accent p{color:var(--sw-ink-2);font-size:var(--sw-fs-body-lg)}
.sw-tile--accent .sw-chip{color:var(--sw-ink);border-color:var(--sw-ink)}
.sw-tile__badges{display:flex;gap:8px;margin-top:var(--sw-space-1)}
.sw-tile__badges span{font:900 var(--sw-fs-badge)/1 var(--sw-font);letter-spacing:-.04em}
.sw-tile__badges span+span{color:var(--sw-accent)}
@container swp (max-width:600px){
  .sw-section{padding:var(--sw-space-8) 0}
  .sw-section__title,.sw-tiles{grid-column:1/5}
  .sw-section__intro{grid-column:1/5;grid-row:2;margin-top:var(--sw-space-4);font-size:var(--sw-fs-body)}
  .sw-tiles{margin-top:var(--sw-space-6);row-gap:var(--sw-space-2)}
  .sw-tile{grid-column:1/5;padding:var(--sw-space-5);min-height:0;border-radius:0}
  .sw-tile--accent .sw-tile__big{font-size:56px;margin-top:var(--sw-space-4)}
  .sw-tile--accent p{font-size:var(--sw-fs-body)}
  .sw-tile h3{font-size:21px;margin-top:var(--sw-space-2)}
}

/* ===== shared section head (devices + features) ===== */
.sw-seerr{list-style:none;margin:0;padding:0;display:grid;gap:12px;font:500 var(--sw-fs-ui)/1 var(--sw-font);color:var(--sw-text-2)}
.sw-seerr li{display:flex;align-items:center;gap:10px}
.sw-seerr svg{width:20px;height:20px;fill:var(--sw-text-3)}
.sw-seerr li.on{color:var(--sw-text)}
.sw-seerr li.on svg{fill:var(--sw-accent)}

/* ===== devices: text + OS list left, one product shot right ===== */
.sw-lines--devices{--sw-line-mask:var(--sw-fade-devices)}
.sw-section__text{font:500 var(--sw-fs-body-lg)/1.45 var(--sw-font);color:var(--sw-text-2);margin:var(--sw-space-5) 0 0}
.sw-split__text{grid-column:1/6;grid-row:1}
.sw-split__visual{grid-column:6/13;grid-row:1;position:relative;align-self:center;height:520px}
/* OS list: official brand marks (Simple Icons, CC0), one colour, one size */
.sw-os{list-style:none;margin:var(--sw-space-7) 0 0;padding:0}
.sw-os a{display:grid;grid-template-columns:var(--sw-col) 1fr auto 34px;gap:0;align-items:center;height:54px;border-top:1px solid var(--sw-line-strong);color:var(--sw-text);text-decoration:none;font:700 var(--sw-fs-ui-lg)/1 var(--sw-font);transition:background-color var(--sw-dur-120)}
.sw-os li:last-child a{border-bottom:1px solid var(--sw-line-strong)}
.sw-os .sw-os__logo{width:20px;height:20px;fill:var(--sw-text-2);justify-self:start}
.sw-os .sw-os__store{font:600 var(--sw-fs-small)/1 var(--sw-font);color:var(--sw-text-3)}
.sw-os .sw-os__arrow{justify-self:end;width:18px;height:18px;fill:var(--sw-accent);transition:transform var(--sw-dur-300) var(--sw-ease-out)}
.sw-os a:hover .sw-os__arrow,.sw-os a:focus-visible .sw-os__arrow{transform:translateX(4px)}
.sw-os a:hover .sw-os__store{color:var(--sw-accent)}
.sw-os a:active{background:rgba(var(--sw-white-rgb),.04)}
.sw-os a:focus-visible{outline:2px solid var(--sw-text);outline-offset:2px}
/* the product shot: Mac behind, TV in the middle in front, iPhone in front of the TV's corner.
   All three stand on one shelf line; one soft shadow under the whole group. */
.sw-devices{position:absolute;left:var(--sw-space-6);top:0;width:780px;height:100%}
.sw-devices>*{position:absolute}
.sw-devices__floor{z-index:0;left:-30px;right:-50px;bottom:72px;height:90px;background:radial-gradient(closest-side,rgba(var(--sw-black-rgb),.75),transparent);filter:blur(6px)}
.sw-devices__glow{left:80px;right:40px;top:20px;bottom:120px;background:radial-gradient(closest-side,rgba(var(--sw-accent-rgb),.13),transparent)}
.sw-devices__mac{z-index:1;left:0;top:178px;width:370px;aspect-ratio:2400/1579}
.sw-devices__mac-screen{position:absolute;left:10.829%;top:13.858%;width:78.342%;height:74.803%;overflow:hidden;
  background:var(--sw-mac-wallpaper)}
.sw-devices__mac-screen img{position:absolute;left:7%;top:8%;width:86%;display:block;filter:drop-shadow(0 8px 14px rgba(var(--sw-black-rgb),.5))}
.sw-devices__tv{z-index:2;left:236px;top:130px;width:440px}
.sw-tv__panel{position:relative;padding:5px;border-radius:6px;background:var(--sw-tv-body);box-shadow:0 0 0 1px var(--sw-tv-edge),0 1px 0 1px var(--sw-tv-hi) inset,0 30px 50px rgba(var(--sw-black-rgb),.55)}
.sw-tv__screen{aspect-ratio:16/9;border-radius:2px;position:relative}
.sw-tv__screen img{position:absolute;left:0;width:100%;top:0}
.sw-tv__neck{position:relative;margin:0 auto;width:54px;height:30px;background:linear-gradient(var(--sw-tv-neck-a),var(--sw-tv-neck-b));clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.sw-tv__base{position:relative;margin:0 auto;width:176px;height:6px;border-radius:3px;background:linear-gradient(var(--sw-tv-base-a),var(--sw-tv-base-b))}
.sw-devices__phone{z-index:3;left:634px;top:172px;width:122px;filter:drop-shadow(0 24px 30px rgba(var(--sw-black-rgb),.55))}
.sw-os-mobile{display:none}

/* ===== F-A · "Up next": six big lines, one phone; the line you point at (or scroll past) plays on the phone ===== */
.sw-lines--features{--sw-line-mask:var(--sw-fade-features)}
.sw-feature-list{grid-column:1/8;grid-row:2;list-style:none;margin:var(--sw-space-8) 0 0;padding:0;counter-reset:fa}
.sw-feature{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:var(--sw-col) 1fr;grid-template-rows:auto 0fr;width:100%;padding:22px 0 24px;position:relative;
  border-top:1px solid var(--sw-line-strong);transition:grid-template-rows var(--sw-dur-450) var(--sw-ease)}
.sw-feature-list li:last-child .sw-feature{border-bottom:1px solid var(--sw-line-strong)}
.sw-feature::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--sw-accent);transform:scaleX(0);transform-origin:0 0;transition:transform var(--sw-dur-600) var(--sw-ease)}
.sw-feature__n{font:700 var(--sw-fs-body-sm)/38px var(--sw-font);color:var(--sw-text-3);font-variant-numeric:tabular-nums;transition:color var(--sw-dur-250)}
.sw-feature__title{font:800 var(--sw-fs-feature)/1.05 var(--sw-font);letter-spacing:var(--sw-track-h3);color:var(--sw-text-dim);transition:color var(--sw-dur-250)}
.sw-feature__text{grid-column:2;overflow:hidden;min-height:0;font:500 var(--sw-fs-ui-lg)/1.4 var(--sw-font);color:var(--sw-text-2)}
.sw-feature__text span{display:block;padding-top:var(--sw-space-3)}
.sw-feature__title small{font:inherit;color:inherit;opacity:.5}
.sw-feature:hover .sw-feature__title{color:var(--sw-text-2)}
.sw-feature:active .sw-feature__title{color:var(--sw-text)}
.sw-feature:focus-visible{outline:2px solid var(--sw-text);outline-offset:4px;border-radius:2px}
.sw-feature[aria-current="true"]{grid-template-rows:auto 1fr}
.sw-feature[aria-current="true"]::before{transform:scaleX(1)}
.sw-feature[aria-current="true"] .sw-feature__title{color:var(--sw-text)}
.sw-feature[aria-current="true"] .sw-feature__n{color:var(--sw-accent)}
.sw-feature-stage{grid-column:9/13;grid-row:2;position:relative;margin-top:var(--sw-space-8);height:640px}
.sw-feature-stage::before{content:"";position:absolute;left:-30%;right:-30%;top:-6%;bottom:-6%;background:radial-gradient(closest-side,rgba(var(--sw-accent-rgb),.14),transparent)}
.sw-feature-stage__phone{position:absolute;left:50%;top:0;width:308px;margin-left:-154px;filter:drop-shadow(0 40px 50px rgba(var(--sw-black-rgb),.55))}
.sw-feature-stage__phone .sw-iphone__screen{opacity:0;transform:scale(1.03);transition:opacity var(--sw-dur-450) var(--sw-ease),transform var(--sw-dur-600) var(--sw-ease)}
.sw-feature-stage__phone .sw-iphone__screen.on{opacity:1;transform:none}
.sw-feature-stage__extra{position:absolute;z-index:3;opacity:0;transform:translateY(10px);transition:opacity var(--sw-dur-350) var(--sw-ease),transform .5s var(--sw-ease);pointer-events:none}
.sw-feature-stage__extra.on{opacity:1;transform:none}
.sw-feature-stage__extra.sw-offer{left:-6px;bottom:96px;transform-origin:0 100%;scale:1.25;box-shadow:0 0 0 1px rgba(var(--sw-accent-rgb),.35),0 18px 30px rgba(var(--sw-black-rgb),.6)}
.sw-feature-stage__extra.sw-feature-stage__seerr{left:-24px;bottom:84px;padding:18px 20px;border-radius:var(--sw-radius-l);background:var(--sw-surface-2);box-shadow:0 0 0 1px rgba(var(--sw-white-rgb),.1),0 18px 30px rgba(var(--sw-black-rgb),.6)}


@media (prefers-reduced-motion:reduce){
  .sw-feature,.sw-feature::before,.sw-feature-stage__phone .sw-iphone__screen,.sw-feature-stage__extra,.sw-os a,.sw-os .sw-os__arrow{transition:none}
}

@container swp (max-width:600px){
  .sw-section{padding:var(--sw-space-8) 0}
  .sw-h2{font-size:44px}
  .sw-split__text{grid-column:1/5}
  .sw-split__text .sw-os{display:none}
  .sw-split__visual{grid-column:1/5;grid-row:2;height:236px;margin-top:var(--sw-space-6);align-self:start}
  .sw-devices{left:-14px;width:780px;transform:scale(.45);transform-origin:0 0;height:520px}
  .sw-os-mobile{display:block;grid-column:1/5;grid-row:3}
  .sw-os-mobile .sw-os{margin-top:var(--sw-space-5)}
  .sw-os a{grid-template-columns:44px 1fr auto 30px}
  .sw-section__title{grid-column:1/5}
  .sw-section__intro{grid-column:1/5;margin-top:var(--sw-space-4);font-size:var(--sw-fs-body)}
  .sw-feature-stage{grid-column:1/5;grid-row:3;height:420px;margin-top:var(--sw-space-6)}
  .sw-feature-stage__phone{width:200px;margin-left:-100px}
  .sw-feature-stage__extra.sw-offer{left:8px;bottom:60px;scale:1}
  .sw-feature-stage__extra.sw-feature-stage__seerr{left:0;bottom:50px;padding:14px 16px}
  .sw-feature-list{grid-column:1/5;grid-row:4;margin-top:var(--sw-space-6)}
  .sw-feature{grid-template-columns:44px 1fr;padding:16px 0 18px}
  .sw-feature__n{line-height:26px;font-size:var(--sw-fs-small)}
  .sw-feature__title{font-size:23px}
  .sw-feature__text{font-size:var(--sw-fs-body-sm)}
}
/* ===== S · "Make Swiftly yours": pick a look, the stage takes its colours (real look values) ===== */
.sw-lines--looks{--sw-line-mask:var(--sw-fade-looks)}
.sw-look-stage{grid-column:1/8;grid-row:2;position:relative;margin-top:var(--sw-space-8);height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sw-space-6)}
.sw-look-stage__glow{position:absolute;left:-10%;right:-10%;top:-12%;bottom:-12%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sw-look) 34%,transparent),transparent);transition:background var(--sw-dur-700) var(--sw-ease)}
.sw-look-stage__icon{position:relative;width:184px;height:184px}
.sw-look-stage__icon img{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--sw-radius-app-icon);opacity:0;transform:scale(.94);transition:opacity var(--sw-dur-450) var(--sw-ease),transform var(--sw-dur-600) var(--sw-ease);
  box-shadow:0 30px 60px rgba(var(--sw-black-rgb),.5)}
.sw-look-stage__icon img.on{opacity:1;transform:none}
.sw-look-stage__wordmark{position:relative;width:300px;height:calc(300px * 1024 / 3005);color:var(--sw-text)}
.sw-looks{grid-column:1/8;grid-row:3;margin-top:var(--sw-space-6)}
.sw-label{font:700 var(--sw-fs-small)/1 var(--sw-font);color:var(--sw-text-3);margin:0 0 var(--sw-space-4)}
.sw-looks__list{display:flex;gap:var(--sw-space-2);list-style:none;margin:0;padding:6px 6px 2px;overflow-x:auto;scrollbar-width:none}
.sw-looks__list::-webkit-scrollbar{display:none}
.sw-look{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:var(--sw-space-2);width:72px;cursor:pointer;flex:none}
.sw-look span:first-child{position:relative;width:60px;height:60px;border-radius:var(--sw-radius-l)}
.sw-look img{width:60px;height:60px;border-radius:var(--sw-radius-l);display:block}
.sw-look span:first-child::after{content:"";position:absolute;inset:-4px;border-radius:20px;box-shadow:inset 0 0 0 2px var(--sw-text);opacity:0;transition:opacity var(--sw-dur-250) var(--sw-ease)}
.sw-look[aria-checked="true"] span:first-child::after{opacity:1}
.sw-look b{font:400 var(--sw-fs-xs)/1.2 var(--sw-font);color:var(--sw-text-2);white-space:nowrap}
.sw-look[aria-checked="true"] b{font-weight:600;color:var(--sw-text)}
.sw-look small{font:600 10px/1 var(--sw-font);color:var(--sw-accent);letter-spacing:.02em;margin-top:-4px}
.sw-look:hover img{filter:brightness(1.12)}
.sw-look:active span:first-child{transform:scale(.94)}
.sw-look:focus-visible span:first-child{outline:2px solid var(--sw-accent);outline-offset:6px}
.sw-buy{grid-column:9/13;grid-row:2/4;align-self:center;margin-top:var(--sw-space-8)}
.sw-buy__price{margin:0;font:900 var(--sw-fs-h2)/1 var(--sw-font);letter-spacing:var(--sw-track-display)}
.sw-buy__price small{font:700 var(--sw-fs-lead)/1 var(--sw-font);letter-spacing:-.01em;color:var(--sw-text-2);margin-left:6px}
.sw-buy__once{margin:var(--sw-space-3) 0 0;font:600 var(--sw-fs-ui-lg)/1.3 var(--sw-font);color:var(--sw-text-2)}
.sw-buy .sw-btn{margin-top:var(--sw-space-6);width:calc(var(--sw-col)*2)}
.sw-perks{list-style:none;margin:var(--sw-space-7) 0 0;padding:0;display:grid;gap:var(--sw-space-4)}
.sw-perks li{display:flex;gap:var(--sw-space-3);align-items:center;font:600 var(--sw-fs-body)/1.3 var(--sw-font);color:var(--sw-text)}
.sw-perks svg{width:22px;height:22px;fill:var(--sw-accent);flex:none}
.sw-perks li.sw-perks__free{color:var(--sw-text-3);font-weight:500;font-size:var(--sw-fs-body-sm)}
.sw-perks li.sw-perks__free svg{fill:var(--sw-text-3)}
.sw-buy__more{margin-top:var(--sw-space-6)}
.sw-icon-row{display:flex;gap:10px}
.sw-icon-row img{width:44px;height:44px;border-radius:var(--sw-radius-app-icon);display:block;box-shadow:0 0 0 1px rgba(var(--sw-white-rgb),.08)}

/* ===== Q · FAQ: no accordion, every answer is short, so all of it is just there ===== */
.sw-lines--faq{--sw-line-mask:var(--sw-fade-faq)}
.sw-faq__title{grid-column:1/4;grid-row:1/4;align-self:start;margin:0;font:900 var(--sw-fs-h2)/1 var(--sw-font);letter-spacing:var(--sw-track-display)}
.sw-faq__item{margin:0 0 var(--sw-space-7);padding-top:var(--sw-space-4);border-top:1px solid var(--sw-line-strong)}
.sw-faq__item:nth-of-type(odd){grid-column:5/9;padding-right:var(--sw-space-6)}
.sw-faq__item:nth-of-type(even){grid-column:9/13}
.sw-faq__item h3{margin:0;font:800 22px/1.2 var(--sw-font);letter-spacing:-.025em}
.sw-faq__item p{margin:var(--sw-space-2) 0 0;font:500 var(--sw-fs-body)/1.45 var(--sw-font);color:var(--sw-text-3)}
.sw-faq__item p a{color:var(--sw-text-2);text-decoration:underline;text-decoration-color:var(--sw-line-strong);text-underline-offset:3px}
.sw-faq__item p a:hover{color:var(--sw-accent)}

/* ===== G · download: the turquoise closing band; three stores, the one for this device first ===== */
.sw-band{background:var(--sw-accent);color:var(--sw-ink);padding:var(--sw-space-9) 0;position:relative;isolation:isolate;overflow:hidden;
  --sw-line-color:var(--sw-ink-grid);--sw-line-mask:var(--sw-fade-band)}
.sw-band__shape{position:absolute;z-index:-1;right:-120px;top:50%;width:640px;height:688px;margin-top:-344px;fill:rgba(var(--sw-ink-rgb),.06)}
.sw-band__title{grid-column:1/8;margin:0;font:900 var(--sw-fs-display)/1 var(--sw-font);letter-spacing:var(--sw-track-display)}
.sw-band__title>span{display:block}
.sw-band__title i{color:var(--sw-ink)}
.sw-band__sub{grid-column:9/13;align-self:end;margin:0 0 .4em;font:700 var(--sw-fs-body-lg)/1.4 var(--sw-font);color:var(--sw-ink-2)}
.sw-stores{grid-column:1/13;grid-row:2;display:grid;grid-template-columns:subgrid;margin-top:var(--sw-space-8)}
.sw-store{grid-column:span 4;position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:var(--sw-space-3);min-height:250px;padding:var(--sw-space-6);
  background:var(--sw-bg);color:var(--sw-text);text-decoration:none;box-shadow:inset 0 0 0 .5px rgba(var(--sw-white-rgb),.1);transition:background-color var(--sw-dur-200),transform var(--sw-dur-140) var(--sw-ease-out)}
.sw-store+.sw-store{box-shadow:inset 1px 0 0 rgba(var(--sw-white-rgb),.08)}
.sw-store>svg{width:34px;height:34px;fill:var(--sw-accent)}
.sw-store b{align-self:end;font:900 var(--sw-fs-store)/1 var(--sw-font);letter-spacing:-.045em}
.sw-store .sw-store__for{font:600 var(--sw-fs-body-sm)/1.35 var(--sw-font);color:var(--sw-text-2)}
.sw-store .sw-store__req{display:flex;justify-content:space-between;align-items:center;font:600 var(--sw-fs-small)/1.3 var(--sw-font);color:var(--sw-text-3);padding-top:var(--sw-space-4);border-top:1px solid var(--sw-line-strong)}
.sw-store .sw-store__req svg{width:20px;height:20px;fill:var(--sw-accent);transition:transform var(--sw-dur-300) var(--sw-ease-out);flex:none}
.sw-store .sw-store__tag{position:absolute;top:var(--sw-space-6);right:var(--sw-space-6);height:26px;padding:0 10px;border-radius:var(--sw-radius-pill);background:var(--sw-accent);color:var(--sw-ink);font:700 var(--sw-fs-xs)/26px var(--sw-font);display:none}
.sw-store.is-you .sw-store__tag{display:block}
.sw-store:hover{background:var(--sw-black)}
.sw-store:hover .sw-store__req svg,.sw-store:focus-visible .sw-store__req svg{transform:translateX(4px)}
.sw-store:active{transform:scale(.985)}
.sw-store:focus-visible{outline:3px solid var(--sw-ink);outline-offset:3px;z-index:2}
.sw-band__note{grid-column:1/13;grid-row:3;margin:var(--sw-space-5) 0 0;font:600 var(--sw-fs-ui)/1.4 var(--sw-font);color:var(--sw-ink-2)}
.sw-band__note a{color:var(--sw-ink);text-underline-offset:3px}

/* ===== footer: quiet big logo under the lines ===== */
.sw-footer{padding:var(--sw-space-9) 0 var(--sw-space-6);position:relative;isolation:isolate;overflow:hidden;--sw-line-mask:var(--sw-fade-footer)}
.sw-footer__about{grid-column:1/5}
.sw-footer__about svg{width:var(--sw-col);height:calc(var(--sw-col) * 1024 / 3005);color:var(--sw-text);display:block}
.sw-footer__about p{margin:var(--sw-space-4) 0 0;font:500 var(--sw-fs-body-sm)/1.5 var(--sw-font);color:var(--sw-text-3);max-width:22em}
.sw-footer__col{grid-column:span 2}
.sw-footer__col--first{grid-column:5/7}
.sw-footer__col h2{margin:0 0 var(--sw-space-3);font:700 var(--sw-fs-small)/1 var(--sw-font);color:var(--sw-text-3)}
.sw-footer__col a{display:flex;align-items:center;gap:8px;width:max-content;font:600 var(--sw-fs-body-sm)/1 var(--sw-font);color:var(--sw-text-2);text-decoration:none;padding:8px 0}
.sw-footer__col a svg{width:18px;height:18px;fill:currentColor}
.sw-footer__col a:hover{color:var(--sw-text)}
.sw-footer__col a:focus-visible{outline:2px solid var(--sw-text);outline-offset:2px;border-radius:4px}
.sw-footer__mark{grid-column:1/13;grid-row:2;display:block;width:100%;height:auto;aspect-ratio:3005/1024;margin:var(--sw-space-9) 0 0;position:relative;z-index:-1;
  color:var(--sw-mark);--sw-wordmark-accent:rgba(var(--sw-accent-rgb),.12);-webkit-mask:var(--sw-fade-mark);mask:var(--sw-fade-mark)}
.sw-footer .sw-g{z-index:auto}
.sw-footer__legal{grid-column:1/13;grid-row:3;display:flex;justify-content:space-between;gap:var(--sw-space-4);margin-top:calc(-1*var(--sw-space-8));padding-top:var(--sw-space-4);border-top:1px solid var(--sw-line);font:500 var(--sw-fs-small)/1.4 var(--sw-font);color:var(--sw-text-3)}

@media (prefers-reduced-motion:reduce){
  .sw-look-stage__glow,.sw-look-stage__icon img,.sw-look span:first-child::after,.sw-store,.sw-store .sw-store__req svg{transition:none}
}
@container swp (max-width:600px){
  .sw-section,.sw-section,.sw-band{padding:var(--sw-space-8) 0}
  .sw-look-stage{grid-column:1/5;grid-row:3;height:300px;margin-top:var(--sw-space-5);gap:var(--sw-space-5)}
  .sw-look-stage__icon{width:136px;height:136px}
  .sw-look-stage__wordmark{width:200px;height:calc(200px * 1024 / 3005)}
  .sw-looks{grid-column:1/5;grid-row:4;margin:var(--sw-space-4) calc(-1*var(--sw-pad)) 0 0}
  .sw-looks .sw-label{display:none}
  .sw-buy{grid-column:1/5;grid-row:5;margin-top:var(--sw-space-7)}
  .sw-buy__price{font-size:60px}
  .sw-buy .sw-btn{width:100%}
  .sw-faq__title{grid-column:1/5;grid-row:auto;font-size:48px;margin-bottom:var(--sw-space-6)}
  .sw-faq__item:nth-of-type(odd),.sw-faq__item:nth-of-type(even){grid-column:1/5;padding-right:0;margin-bottom:var(--sw-space-5)}
  .sw-band__shape{width:360px;height:387px;right:-150px;top:90px;margin:0}
  .sw-band__title{grid-column:1/5}
  .sw-band__sub{grid-column:1/5;margin-top:var(--sw-space-4);font-size:var(--sw-fs-body)}
  .sw-stores{grid-column:1/5;grid-row:3;margin-top:var(--sw-space-6);row-gap:var(--sw-space-2)}
  .sw-store{grid-column:1/5;min-height:0;padding:var(--sw-space-5)}
  .sw-store+.sw-store{box-shadow:none}
  .sw-store b{font-size:30px}
  .sw-store .sw-store__tag{top:var(--sw-space-5);right:var(--sw-space-5)}
  .sw-band__note{grid-column:1/5;grid-row:4}
  .sw-footer__about{grid-column:1/5}
  .sw-footer__col,.sw-footer__col--first{grid-column:span 2;margin-top:var(--sw-space-6)}
  .sw-footer__mark{grid-column:1/5;grid-row:4;margin-top:var(--sw-space-7)}
  .sw-footer__legal{grid-column:1/5;grid-row:5;margin-top:calc(-1*var(--sw-space-5));flex-direction:column;gap:var(--sw-space-1)}
}
/* ======================================================================
   ADDED FOR SUBPAGES (not on the homepage). Built only from tokens.css.
   ====================================================================== */

/* ---- page base ---- */
.sw-page,.sw-page *{box-sizing:border-box}
.sw-page{font-family:var(--sw-font);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11"}
.sw-mt-5{margin-top:var(--sw-space-5)}
.sw-mt-8{margin-top:var(--sw-space-8)}
.sw-nav--sticky{position:sticky;top:0}
.sw-nav__links a[aria-current="page"]{color:var(--sw-text)}
.sw-nav__links a:focus-visible,.sw-nav__discord:focus-visible{outline:2px solid var(--sw-focus);outline-offset:2px}

/* ---- buttons: secondary states, quiet ---- */
.sw-btn--secondary:active,.sw-btn--secondary.is-pressed{background:rgba(var(--sw-white-rgb),.12);transform:scale(.97)}
.sw-btn--secondary:focus-visible,.sw-btn--secondary.is-focus{outline:2px solid var(--sw-focus);outline-offset:3px}
.sw-btn--secondary[disabled]{background:transparent}
.sw-btn--quiet{background:transparent;color:var(--sw-text-2);padding:0 var(--sw-space-1);justify-content:flex-start}
.sw-btn--quiet .sw-tri{color:var(--sw-accent)}
.sw-btn--quiet:hover{background:transparent;color:var(--sw-text)}
.sw-btn--quiet:active,.sw-btn--quiet.is-pressed{background:transparent;color:var(--sw-text);transform:scale(.97)}
.sw-btn--quiet.sw-btn--sm{padding:0 var(--sw-space-1)}
.sw-btn--on-accent{background:var(--sw-ink);color:var(--sw-accent)}
.sw-btn--on-accent:hover{background:var(--sw-black)}

/* ---- chip on accent + small ---- */
.sw-chip--on-accent{color:var(--sw-ink);border-color:var(--sw-ink)}
.sw-chip--sm{height:24px;padding:0 var(--sw-space-2);font-size:var(--sw-fs-xs);line-height:20px}
.sw-chip--solid{background:var(--sw-accent);border-color:var(--sw-accent);color:var(--sw-ink)}

/* ---- breadcrumb / back link ---- */
.sw-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sw-space-2);margin:0;padding:0;list-style:none;font:600 var(--sw-fs-ui)/1 var(--sw-font);color:var(--sw-text-3)}
.sw-crumbs a{display:inline-flex;align-items:center;gap:var(--sw-space-2);color:var(--sw-text-2);text-decoration:none;padding:var(--sw-space-2) 0}
.sw-crumbs a:hover{color:var(--sw-text)}
.sw-crumbs a:focus-visible{outline:2px solid var(--sw-focus);outline-offset:2px;border-radius:4px}
.sw-crumbs li+li::before{content:"/";margin-right:var(--sw-space-2);color:var(--sw-line-strong)}
.sw-crumbs [aria-current="page"]{color:var(--sw-text-3)}
.sw-back{display:inline-flex;align-items:center;gap:var(--sw-space-2);font:600 var(--sw-fs-ui)/1 var(--sw-font);color:var(--sw-text-2);text-decoration:none;padding:var(--sw-space-2) 0}
.sw-back svg{width:18px;height:18px;fill:var(--sw-accent);transition:transform var(--sw-dur-300) var(--sw-ease-out)}
.sw-back:hover{color:var(--sw-text)}
.sw-back:hover svg,.sw-back:focus-visible svg{transform:translateX(-4px)}
.sw-back:focus-visible{outline:2px solid var(--sw-focus);outline-offset:2px;border-radius:4px}

/* ---- version badge + date line ---- */
.sw-version{display:inline-block;height:30px;padding:0 var(--sw-space-3);border:var(--sw-chip-border) solid var(--sw-accent);border-radius:var(--sw-radius-s);font:700 var(--sw-fs-ui)/26px var(--sw-font);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--sw-accent);white-space:nowrap}
.sw-version--solid{background:var(--sw-accent);color:var(--sw-ink)}
.sw-date{font:600 var(--sw-fs-small)/1.4 var(--sw-font);color:var(--sw-text-3);font-variant-numeric:tabular-nums}
.sw-dateline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sw-space-3)}
.sw-tag{font:700 var(--sw-fs-small)/1.4 var(--sw-font);color:var(--sw-accent);letter-spacing:.01em}

/* ---- subpage header: headline + sub-line, no devices ---- */
.sw-page-head{padding:var(--sw-space-7) 0 var(--sw-space-8);--sw-line-mask:var(--sw-fade-page)}
.sw-page-head__crumbs{grid-column:1/-1;grid-row:1;margin-bottom:var(--sw-space-8)}
.sw-page-head__title{grid-column:1/10;grid-row:2;margin:0;font:900 var(--sw-fs-page-title)/1 var(--sw-font);letter-spacing:var(--sw-track-display)}
.sw-page-head__title i{font-style:normal;color:var(--sw-accent)}
.sw-page-head__sub{grid-column:1/8;grid-row:3;margin:var(--sw-space-5) 0 0;font:500 var(--sw-fs-lead)/1.4 var(--sw-font);letter-spacing:var(--sw-track-lead);color:var(--sw-text-2)}
.sw-page-head__meta{grid-column:1/-1;grid-row:4;margin-top:var(--sw-space-5)}

/* ---- prose / article ---- */
.sw-prose{grid-column:3/11;max-width:var(--sw-measure);color:var(--sw-text-2);font:500 var(--sw-fs-body-lg)/var(--sw-lh-prose) var(--sw-font)}
.sw-prose>:first-child{margin-top:0}
.sw-prose h2{margin:var(--sw-space-8) 0 var(--sw-space-4);font:800 var(--sw-fs-prose-h2)/1.1 var(--sw-font);letter-spacing:var(--sw-track-h3);color:var(--sw-text)}
.sw-prose h3{margin:var(--sw-space-7) 0 var(--sw-space-3);font:800 var(--sw-fs-prose-h3)/1.2 var(--sw-font);letter-spacing:-.025em;color:var(--sw-text)}
.sw-prose p{margin:0 0 var(--sw-space-4)}
.sw-prose strong,.sw-prose b{color:var(--sw-text);font-weight:var(--sw-fw-bold)}
.sw-prose a{color:var(--sw-text);text-decoration:underline;text-decoration-color:var(--sw-line-strong);text-underline-offset:3px;transition:color var(--sw-dur-200),text-decoration-color var(--sw-dur-200)}
.sw-prose a:hover{color:var(--sw-accent);text-decoration-color:var(--sw-accent)}
.sw-prose a:focus-visible{outline:2px solid var(--sw-focus);outline-offset:2px;border-radius:2px}
.sw-prose ul,.sw-prose ol{margin:0 0 var(--sw-space-4);padding-left:var(--sw-space-5)}
.sw-prose li{margin:var(--sw-space-2) 0;padding-left:var(--sw-space-1)}
.sw-prose ul li::marker{color:var(--sw-accent)}
.sw-prose ol li::marker{color:var(--sw-text-3);font-weight:var(--sw-fw-bold);font-variant-numeric:tabular-nums}
.sw-prose blockquote{margin:var(--sw-space-6) 0;padding:0 0 0 var(--sw-space-5);box-shadow:inset 2px 0 0 var(--sw-accent);color:var(--sw-text);font-size:var(--sw-fs-lead);line-height:1.5}
.sw-prose blockquote p:last-child{margin-bottom:0}
.sw-prose code{padding:2px 6px;border-radius:var(--sw-radius-s);background:var(--sw-surface-2);color:var(--sw-text);font:500 .88em/1 var(--sw-font-mono)}
.sw-prose pre{margin:var(--sw-space-5) 0;padding:var(--sw-space-5);overflow:auto;background:var(--sw-surface);box-shadow:inset 0 0 0 .5px var(--sw-line-tile);font:500 var(--sw-fs-mono)/1.6 var(--sw-font-mono);color:var(--sw-text)}
.sw-prose pre code{padding:0;background:none;font:inherit}
.sw-prose hr{height:0;margin:var(--sw-space-7) 0;border:0;border-top:1px solid var(--sw-line-strong)}
.sw-prose table,.sw-prose th,.sw-prose td{color:inherit}
.sw-prose table{width:100%;margin:var(--sw-space-5) 0;border-collapse:collapse;font:500 var(--sw-fs-body-sm)/1.4 var(--sw-font)}
.sw-prose th{padding:var(--sw-space-3) var(--sw-space-4) var(--sw-space-3) 0;text-align:left;font:700 var(--sw-fs-small)/1.2 var(--sw-font);color:var(--sw-text-3)}
.sw-prose td{padding:var(--sw-space-3) var(--sw-space-4) var(--sw-space-3) 0;border-top:1px solid var(--sw-line-strong);vertical-align:top}
.sw-prose tr:last-child td{border-bottom:1px solid var(--sw-line-strong)}
.sw-prose figure{margin:var(--sw-space-6) 0}
.sw-prose figure img,.sw-prose>img{display:block;width:100%;height:auto}
.sw-prose figcaption{margin-top:var(--sw-space-3);font:500 var(--sw-fs-small)/1.4 var(--sw-font);color:var(--sw-text-3)}
.sw-prose--wide{grid-column:1/-1;max-width:none}

/* ---- callout / note box ---- */
.sw-callout{display:grid;grid-template-columns:auto 1fr;gap:var(--sw-space-4);align-items:start;margin:var(--sw-space-5) 0;padding:var(--sw-space-5);background:var(--sw-surface);box-shadow:inset 0 0 0 .5px var(--sw-line-tile),inset 3px 0 0 var(--sw-accent);color:var(--sw-text-2);font:500 var(--sw-fs-body)/1.5 var(--sw-font)}
.sw-callout>svg{width:24px;height:24px;fill:var(--sw-accent);margin-top:1px}
.sw-callout strong{display:block;margin-bottom:var(--sw-space-1);color:var(--sw-text);font-weight:var(--sw-fw-bold)}
.sw-callout p{margin:0}
.sw-callout--accent{background:var(--sw-accent);color:var(--sw-ink-2);box-shadow:none}
.sw-callout--accent>svg{fill:var(--sw-ink)}
.sw-callout--accent strong{color:var(--sw-ink)}

/* ---- post card (blog / release) ---- */
.sw-cards{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:var(--sw-space-2)}
.sw-card{grid-column:span 4;display:flex;flex-direction:column;background:var(--sw-surface);box-shadow:inset 0 0 0 .5px var(--sw-line-tile);color:var(--sw-text);text-decoration:none;transition:background-color var(--sw-dur-200),transform var(--sw-dur-140) var(--sw-ease-out)}
.sw-card__media{display:block;width:100%;aspect-ratio:var(--sw-ratio-media);object-fit:cover;background:var(--sw-bg)}
.sw-card__body{display:flex;flex-direction:column;gap:var(--sw-space-3);flex:1;padding:var(--sw-space-6)}
.sw-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sw-space-3)}
.sw-card h3{margin:0;font:800 var(--sw-fs-h3)/1.1 var(--sw-font);letter-spacing:var(--sw-track-h3)}
.sw-card p{margin:0;font:500 var(--sw-fs-body-sm)/1.45 var(--sw-font);color:var(--sw-text-3)}
.sw-card__more{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:var(--sw-space-4);border-top:1px solid var(--sw-line-strong);font:600 var(--sw-fs-small)/1.3 var(--sw-font);color:var(--sw-text-3)}
.sw-card__more svg{width:20px;height:20px;fill:var(--sw-accent);transition:transform var(--sw-dur-300) var(--sw-ease-out)}
.sw-card:hover{background:var(--sw-surface-2)}
.sw-card:hover .sw-card__more svg,.sw-card:focus-visible .sw-card__more svg{transform:translateX(4px)}
.sw-card:active{transform:scale(.985)}
.sw-card:focus-visible{outline:2px solid var(--sw-focus);outline-offset:3px;z-index:2}
.sw-card--wide{grid-column:span 8;flex-direction:row}
.sw-card--wide .sw-card__media{width:50%;height:auto;aspect-ratio:auto}

/* ---- "What's new" change list ---- */
.sw-release{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:var(--sw-space-7)}
.sw-release__head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sw-space-4);padding-top:var(--sw-space-4);border-top:1px solid var(--sw-line-strong)}
.sw-release__title{margin:0;font:900 var(--sw-fs-badge)/1 var(--sw-font);letter-spacing:-.04em}
.sw-changes{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:var(--sw-space-6)}
.sw-changes__group{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start}
.sw-changes__icon{grid-column:1;width:30px;height:30px;fill:var(--sw-accent);margin-top:2px}
.sw-changes__title{grid-column:2/-1;margin:0 0 var(--sw-space-3);font:800 var(--sw-fs-h3)/1.1 var(--sw-font);letter-spacing:var(--sw-track-h3)}
.sw-changes__list{grid-column:2/9;list-style:none;margin:0;padding:0}
.sw-changes__list li{padding:var(--sw-space-3) 0;border-top:1px solid var(--sw-line-strong);font:500 var(--sw-fs-ui-lg)/1.4 var(--sw-font);color:var(--sw-text-2)}
.sw-changes__list li:last-child{border-bottom:1px solid var(--sw-line-strong)}

/* ---- narrow ---- */
@container swp (max-width:600px){
  .sw-page-head{padding:var(--sw-space-6) 0 var(--sw-space-7)}
  .sw-page-head__crumbs{margin-bottom:var(--sw-space-6)}
  .sw-page-head__title{grid-column:1/-1;font-size:44px}
  .sw-page-head__sub{grid-column:1/-1;font-size:var(--sw-fs-ui-lg)}
  .sw-prose{grid-column:1/-1;font-size:var(--sw-fs-body)}
  .sw-prose h2{font-size:28px;margin-top:var(--sw-space-7)}
  .sw-prose blockquote{font-size:var(--sw-fs-body-lg)}
  .sw-card,.sw-card--wide{grid-column:1/-1}
  .sw-card--wide{flex-direction:column}
  .sw-card--wide .sw-card__media{width:100%;aspect-ratio:var(--sw-ratio-media)}
  .sw-card__body{padding:var(--sw-space-5)}
  .sw-changes__group{grid-template-columns:44px 1fr}
  .sw-changes__icon{grid-column:1}
  .sw-changes__title,.sw-changes__list{grid-column:2}
  .sw-release__title{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  .sw-card,.sw-card__more svg,.sw-back svg,.sw-prose a{transition:none}
}

/* rotating word driven by kit.js (any word count other than 3) */
.sw-rotor.is-js>span{animation:none}

/* forced hover look, for specimens and tests */
.sw-btn.is-hover{background:color-mix(in srgb,var(--sw-accent) 76%,var(--sw-white))}
.sw-btn.is-hover .sw-tri{transform:translateX(3px)}
.sw-btn--secondary.is-hover{background:rgba(var(--sw-white-rgb),.06)}
.sw-btn--quiet.is-hover{background:transparent;color:var(--sw-text)}
.sw-btn--quiet.is-loading{padding-right:34px}