/* AYNI, D1 "Gallery" (rebuild 7 Oct 2026).
   Black and white. Red Hat Display 500 for headings, Red Hat Text for body and buttons, Geist Mono for small labels.
   Long reads (blog, resources) set headline and body in Newsreader. Whitespace separates sections; thin rules only inside lists. */

:root{
  --r:2px; --paper:#ffffff; --ink:#0a0a0a; --grey:#575757; --rule:#e2e2e2; --line:#8c8c8c; --tint:#f5f5f4;
  --m:clamp(16px,4.45vw,64px);
  --display:clamp(44px,8.6vw,140px);
  --big:clamp(32px,3.8vw,56px);
  --h3:clamp(22px,2.1vw,30px);
  --sans:"Red Hat Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --head:"Red Hat Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
a,button,summary,label,select{touch-action:manipulation}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--head);font-weight:500;letter-spacing:-.015em;text-wrap:balance}
p,li,dd,dt,summary,figcaption{text-wrap:pretty}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:12px 16px;z-index:40}
.skip:focus{left:16px}
main:focus{outline:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.full{grid-column:1/-1}

/* labels, buttons, links */
.label{font:500 18px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#3a3a3a}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:var(--r);font:500 16px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;text-align:center;transition:background-color .15s,color .15s}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.sm{min-height:44px;padding:0 18px;font-size:16px;white-space:nowrap}
.btn.wide{width:100%}
.link{display:inline-flex;align-items:center;min-height:44px;font:500 16px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:7px}
.link:hover{text-decoration-thickness:2px}
.row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}

/* header */
.site-head{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid transparent;margin-bottom:0;transition:margin-bottom .25s ease,border-color .25s ease}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;min-height:96px;gap:24px;position:relative;transition:min-height .25s ease}
/* sticky state (8 Oct, item 24): compact bar with the logo and the main call to action only. The margin makes up the
   lost height, so the page never jumps when the header shrinks. */
.site-head.stuck{border-bottom-color:var(--rule);margin-bottom:28px}
.site-head.stuck .wrap{min-height:68px}
.site-head.stuck .nav-main li:not(:last-child){display:none}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{width:124px;height:auto}
.nav-main ul{display:flex;gap:26px;align-items:center}
.nav-main a:not(.btn){display:inline-flex;align-items:center;min-height:44px;font-size:17px;text-decoration:none}
.nav-main a:not(.btn):hover,.nav-main a[aria-current]{text-decoration:underline;text-underline-offset:7px}
.menu{display:none}
.menu summary{list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 4px;cursor:pointer;font:500 16px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:20px;height:20px}
.menu .m-close{display:none}
.menu[open] .m-open{display:none}
.menu[open] .m-close{display:block}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--paper);padding:8px var(--m) 28px;border-bottom:1px solid var(--rule);z-index:10;max-height:calc(100vh - 68px);overflow-y:auto}
.menu-panel a:not(.btn){display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--rule);text-decoration:none;font-size:20px}
.menu-panel .btn{width:100%;margin-top:24px}

/* sections */
section{padding-top:clamp(96px,11vw,176px)}
h2{font-size:var(--big);line-height:1.04}
h3{font-size:var(--h3);line-height:1.12}
.sec-head{grid-column:1/10}
.sec-head .label{margin-bottom:22px}
.sec-head p{margin-top:22px;color:var(--grey);max-width:44ch}
.lead{font-size:20px;line-height:1.55}

/* hero */
.hero{padding-top:clamp(40px,7vw,112px)}
.hero h1{grid-column:1/-1;font-size:clamp(40px,6.8vw,108px);line-height:.98;letter-spacing:-.025em}
.hero h1 .kick{display:block;font:500 18px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#3a3a3a;margin-bottom:clamp(24px,2.6vw,40px)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .ln>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .ln>span{animation:rise 1s cubic-bezier(.2,.7,.1,1) both}
  .hero h1 .ln+.ln>span{animation-delay:.1s}
}
@keyframes rise{from{transform:translateY(102%)}to{transform:none}}
.hero-foot{grid-column:1/-1;display:grid;grid-template-columns:subgrid;margin-top:clamp(48px,6vw,96px);align-items:start;row-gap:56px}
.hero-intro{grid-column:1/6}
.hero-intro .answer{font-size:20px;line-height:1.55}
.hero-intro .answer{font-family:var(--head);font-size:clamp(22px,1.9vw,26px);line-height:1.3}
.hero-intro .answer>span{display:block}
.hero-intro .gets{margin-top:28px;border-top:1px solid var(--rule)}
.hero-intro .gets li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:19px;line-height:1.45;text-wrap:balance}
.hero-intro .gets-foot{margin-top:22px;font-size:19px;line-height:1.5;color:var(--grey);text-wrap:pretty}
.hero-art{grid-column:7/13;max-width:560px;justify-self:end;width:100%;min-width:0}
.hero-intro{min-width:0}

/* page head (inner marketing pages) */
.page-head{padding-top:clamp(40px,6vw,96px)}
.page-head .label{grid-column:1/-1;margin-bottom:24px}
.page-head h1{grid-column:1/11;font-size:clamp(42px,6.4vw,104px);line-height:1;letter-spacing:-.025em}
.page-head .answer{grid-column:1/7;margin-top:40px;font-size:20px;line-height:1.55}
.page-head .row{grid-column:1/-1;margin-top:36px}

/* statement */
.statement p{grid-column:3/12;text-wrap:balance;font-family:var(--head);font-size:var(--big);line-height:1.18;letter-spacing:-.015em}
.statement p+p{margin-top:28px;color:var(--grey);font-family:var(--sans);font-size:clamp(20px,1.7vw,24px);line-height:1.55;letter-spacing:0;max-width:52ch;text-wrap:pretty}

/* numbered rows (outcomes, steps) */
.rows{grid-column:1/-1;margin-top:64px;border-top:1px solid var(--ink)}
.rows>li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:34px 0 38px;border-bottom:1px solid var(--rule);align-items:baseline}
.rows .n{grid-column:1/2;font:500 18px/1 var(--mono);color:#3a3a3a;font-variant-numeric:tabular-nums}
.rows h3{grid-column:2/7}
.rows .when{grid-column:7/9;font:500 18px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#3a3a3a}
.rows .d{grid-column:9/13;font-size:18px}
.rows.wide .d,.rows.steps .d{grid-column:7/13}
.rows .d ul{margin-top:10px}
.rows .d li{position:relative;padding-left:18px;margin-top:6px}
.rows .d li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--ink)}
.caveat{grid-column:1/8;margin-top:32px;color:var(--grey);font-size:18px}

/* before and after (home, 8 Oct; items 26, 27): one example at a time, centred. Each example is a small visual in
   the hero week bar's language that animates from before to after. Without JS both states show, one under the other. */
.bx-sec .sec-head{grid-column:1/-1;text-align:center;justify-self:center;max-width:820px}
.bx-sec .sec-head p{margin-left:auto;margin-right:auto}
.bx{grid-column:1/-1;width:100%;max-width:820px;margin:56px auto 0}
.bx-list{display:grid;gap:56px}
.bx-name{text-align:center}
.bx-card{display:grid;gap:16px;margin-top:24px}
.bx-face{border:1px solid var(--ink);border-radius:var(--r);padding:clamp(24px,4vw,44px);min-width:0}
.bx-tag{font:500 18px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#3a3a3a}
.bx-line{margin-top:24px;font-size:clamp(19px,1.6vw,22px);line-height:1.5}
.bx-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.bx-tab{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:18px;min-height:132px;padding:18px 18px 20px;text-align:left;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);font:400 17px/1.3 var(--sans);cursor:pointer;transition:background-color .2s,color .2s}
.bx-tab svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:miter;stroke-linecap:square}
.bx-tab:hover{background:var(--tint)}
.bx-tab[aria-selected=true]{background:var(--ink);color:var(--paper)}
.bx-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
.bx-tab[aria-selected=true]:focus-visible{outline-color:var(--paper)}
.bx.on .bx-list{display:block;margin-top:40px}
.bx.on .bx-name{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bx.on .bx-face{text-align:center}
.bx.on .bx-line{max-width:44ch;margin-left:auto;margin-right:auto;min-height:3em}
.bx-ctrl{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:24px}
.bx-go{margin-top:40px;text-align:center}
.bx-go .btn{white-space:normal;padding-top:12px;padding-bottom:12px;max-width:100%}

/* the visuals */
.viz{margin-top:20px;text-align:left}
.viz .sw>span,.wk .sw>span{grid-area:1/1;transition:opacity .35s ease}
[data-s=before] .sw>.a,[data-s=after] .sw>.b{opacity:0}
.vr+.vr{margin-top:18px}
.vl{font-size:18px;line-height:1.35;margin-bottom:8px}
.vt{position:relative;display:flex;height:44px;border:1px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.vt>i{font-style:normal;display:block;height:100%;width:calc(var(--b)*1%);transition:width .75s cubic-bezier(.4,0,.2,1)}
[data-s=after] .vt>i{width:calc(var(--a)*1%)}
.vt .ink{background:var(--ink)}
.vt .hatch,.vt .blk{background:var(--tint);background-image:repeating-linear-gradient(135deg,transparent 0 10px,#d9d9d6 10px 12px)}
.vt-split .blk{display:flex;align-items:center;overflow:hidden;border-left:1px solid var(--ink)}
.vt-split .blk span{padding:0 14px;font-size:18px;white-space:nowrap;transition:opacity .3s}
[data-s=after] .vt-split .blk{border-left-width:0}
[data-s=after] .vt-split .blk span{opacity:0}
.vin{position:absolute;inset:0;display:flex;align-items:center;padding:0 14px;font-size:18px;color:var(--grey);pointer-events:none}
/* five places come together into one */
.vm{position:relative;height:calc(var(--n)*54px - 10px);transition:height .75s cubic-bezier(.4,0,.2,1)}
.vm>span,.vm>b{position:absolute;height:44px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--ink);border-radius:var(--r);font:400 18px/1 var(--sans);white-space:nowrap;overflow:hidden;transition:top .75s cubic-bezier(.4,0,.2,1),left .75s cubic-bezier(.4,0,.2,1),width .75s cubic-bezier(.4,0,.2,1),background-color .5s,color .3s}
.vm>span{top:calc(var(--i)*54px);left:calc(var(--x)*1%);width:calc(var(--w)*1%);background:var(--tint)}
.vm>b{top:0;left:0;width:100%;font-weight:500;background:var(--ink);color:var(--paper);opacity:0;transition:opacity .4s ease .45s}
[data-s=after] .vm{height:44px}
[data-s=after] .vm>span{top:0;left:0;width:100%;background:var(--ink);color:transparent}
[data-s=after] .vm>b{opacity:1}
/* search results: your organization moves up */
.vk{position:relative;height:262px}
.vk>span{position:absolute;left:0;right:0;top:calc(var(--pb)*54px);height:44px;display:flex;align-items:center;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--tint);font-size:18px;color:var(--grey);transition:top .75s cubic-bezier(.4,0,.2,1)}
.vk>.you{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:500}
[data-s=after] .vk>span{top:calc(var(--pa)*54px)}
/* steps to give: many become few */
.vs{display:flex;height:44px}
.vs>i{flex:1 1 0;min-width:0;border:1px solid var(--ink);border-radius:var(--r);background:var(--tint);margin-left:8px;transition:flex-grow .75s cubic-bezier(.4,0,.2,1),margin .75s cubic-bezier(.4,0,.2,1),opacity .4s,border-width .75s}
.vs>i:first-child{margin-left:0}
[data-s=after] .vs>i{background:var(--ink)}
[data-s=after] .vs>i.x{flex-grow:0;margin-left:0;opacity:0;border-width:0}
/* scenes (item 40): forms, phone, reports, ads */
.vf{max-width:340px;margin:0 auto;border:1px solid var(--ink);border-radius:var(--r);padding:16px 18px 18px}
.vf-h{display:grid;font:500 16px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#3a3a3a}
.vf-f{display:block;height:30px;margin-top:10px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:height .6s cubic-bezier(.4,0,.2,1),margin .6s cubic-bezier(.4,0,.2,1),opacity .4s,border-width .6s}
.vf-f.x{background:var(--tint)}
[data-s=after] .vf-f.x{height:0;margin-top:0;opacity:0;border-width:0}
.vf-ok{display:flex;align-items:center;gap:10px;height:0;margin-top:0;overflow:hidden;font-size:17px;opacity:0;transition:height .4s ease .45s,margin .4s ease .45s,opacity .4s ease .6s}
.vf-ok svg{width:24px;height:24px;flex:none}
.vf-ok rect{fill:var(--ink)}.vf-ok path{fill:none;stroke:var(--paper);stroke-width:2.2}
.vf-go{display:block;height:34px;margin-top:14px;background:var(--ink);border-radius:var(--r)}
[data-s=after] .vf-ok{height:26px;margin-top:14px;opacity:1}
.vph{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.ph{position:relative;width:128px;height:220px;border:2px solid var(--ink);border-radius:var(--r);padding:26px 12px 18px;flex:none}
.ph::before{content:"";position:absolute;top:10px;left:50%;width:28px;height:2px;margin-left:-14px;background:var(--ink)}
.ph-load{display:block;height:8px;border:1px solid var(--ink);border-radius:var(--r);overflow:hidden}
.ph-load>i{display:block;height:100%;width:16%;background:var(--ink);transition:width .35s cubic-bezier(.2,.8,.2,1)}
[data-s=after] .ph-load>i{width:100%}
.ph-c{display:block;margin-top:14px;height:16px;background:var(--tint);border-radius:var(--r);transition:background-color .4s ease .3s}
.ph-c.w{width:60%}.ph-c.t{height:44px}
[data-s=after] .ph-c{background:#c9c9c6}
[data-s=after] .ph-c.t{background:var(--ink)}
.vph .vl{display:grid;margin:0;font-size:18px}
.vp{position:relative;height:240px}
.vp>span,.vp>b{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid var(--ink);border-radius:var(--r);font:400 16px/1.1 var(--sans);white-space:nowrap;overflow:hidden;transition:top .75s cubic-bezier(.4,0,.2,1),left .75s cubic-bezier(.4,0,.2,1),width .75s cubic-bezier(.4,0,.2,1),height .75s cubic-bezier(.4,0,.2,1),background-color .5s,color .5s}
.vp>span{top:calc(var(--y)*1px);left:calc(var(--x)*1%);width:30%;height:64px;background:var(--tint)}
.vp>b{top:0;left:22%;width:56%;height:240px;align-items:flex-start;padding-top:14px;font-weight:500;border-width:2px;opacity:0;transition:opacity .5s ease .4s}
[data-s=after] .vp>span{top:calc(48px + var(--i)*38px);left:26%;width:48%;height:30px;background:var(--ink);color:var(--paper)}
[data-s=after] .vp>b{opacity:1}
.vk>.ad{background:var(--paper);border-color:var(--ink);color:var(--ink);font-weight:500;opacity:0;transition:top .75s cubic-bezier(.4,0,.2,1),opacity .5s ease .35s}
.vk>.ad em{font-style:normal;margin-left:auto;padding:2px 8px;border:1px solid var(--ink);border-radius:var(--r);font:500 16px/1.2 var(--mono)}
[data-s=after] .vk>.ad{opacity:1}
.vk.n4{height:208px}[data-s=after] .vk.n4{height:262px}
.vk{transition:height .75s cubic-bezier(.4,0,.2,1)}
@media (max-width:560px){
  .bx{margin-top:40px}
  .bx-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bx-tab{min-height:116px;padding:14px 14px 16px;gap:14px;font-size:16px}
  .bx-tab:last-child:nth-child(odd){grid-column:1/-1;min-height:88px}
  .bx-ctrl>.btn{width:100%}
  .bx-go .btn{width:100%}
}

/* sample dashboard */
.dash{border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);overflow:hidden}
.dash-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;padding:14px 18px;border-bottom:1px solid var(--rule)}
.dash-top b{font:500 18px/1.2 var(--head)}
.dash .label{font:500 16px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--grey);white-space:nowrap}
.dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.dash-kpis div{padding:16px 18px;min-width:0}
.dash-kpis div+div{border-left:1px solid var(--rule)}
.dash-kpis small{display:block;font:400 16px/1.3 var(--sans);color:var(--grey);margin-bottom:8px}
.dash-kpis strong{display:block;font:500 clamp(22px,2vw,30px)/1 var(--head);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dash-kpis span{display:block;font-size:16px;color:var(--grey);margin-top:6px}
.dash-body{display:grid;grid-template-columns:1.6fr 1fr}
.dash-chart{padding:16px 18px 18px;border-right:1px solid var(--rule)}
.dash-chart svg{width:100%;height:auto;margin-top:10px}
.dash-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:16px;color:var(--grey)}
.dash-src{padding:16px 18px 18px}
.dash-src ul{margin-top:10px}
.dash-src li{display:grid;grid-template-columns:72px 1fr 44px;gap:10px;align-items:center;font-size:16px;padding:6px 0}
.dash-src li i{display:block;height:6px;background:var(--ink);border-radius:var(--r)}
.dash-src li span:last-child{font-family:var(--mono);font-size:16px;text-align:right;color:var(--grey)}
.dash-cap{margin-top:12px;font:400 16px/1.5 var(--sans);color:var(--grey)}

/* hero: a week before and after */
.week{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.sw{display:inline-grid}
.wk-h{font:500 clamp(22px,1.7vw,24px)/1.2 var(--head);letter-spacing:-.01em}
.wk-bar{display:flex;margin-top:14px;min-height:64px;border:1px solid var(--ink);border-radius:var(--r);overflow:hidden}
.wk-bar>span{display:flex;align-items:center;padding:0 18px;font:500 18px/1.25 var(--sans);min-width:0;white-space:nowrap;overflow:hidden;transition:flex-grow .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1)}
.wk-chores{flex:45 1 0;background:var(--tint);color:var(--ink);background-image:repeating-linear-gradient(135deg,transparent 0 10px,#e4e4e2 10px 12px)}
.wk-chores+.wk-good{border-left:1px solid var(--ink)}
.wk-good{flex:55 1 0;background:var(--ink);color:var(--paper)}
[data-s=after] .wk-chores{flex-grow:8;padding:0}
[data-s=after] .wk-good{flex-grow:92}
.wk-note{margin-top:14px;color:var(--grey);font-size:18px;line-height:1.5;max-width:46ch}
.wk-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.wk .wk-h .sw,.wk .wk-note .sw{display:grid}
.tw-btn{margin-left:auto;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:500 16px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.tw-btn:hover .tw-t{text-decoration:underline;text-underline-offset:5px}
.tw-sw{position:relative;width:52px;height:30px;border:1.5px solid var(--ink);border-radius:var(--r);flex:none;background:var(--paper);transition:background-color .3s}
.tw-sw>span{position:absolute;top:4px;left:4px;width:19px;height:19px;border-radius:var(--r);background:var(--ink);transition:transform .3s cubic-bezier(.4,0,.2,1),background-color .3s}
.tw-btn[aria-checked=true] .tw-sw{background:var(--ink)}
.tw.on:not(.done) .tw-sw{box-shadow:0 0 0 4px rgba(10,10,10,.08)}
@media (prefers-reduced-motion:no-preference){.tw.on:not(.done) .tw-sw{animation:tw-glow 2.8s ease-in-out infinite}}
@keyframes tw-glow{0%,100%{box-shadow:0 0 0 0 rgba(10,10,10,.06),0 0 0 0 rgba(10,10,10,0)}50%{box-shadow:0 0 0 5px rgba(10,10,10,.1),0 0 18px 6px rgba(10,10,10,.14)}}
.tw-btn[aria-checked=true] .tw-sw>span{transform:translateX(22px);background:var(--paper)}
.tw-more{margin-top:-12px}
.soft{display:inline-flex;align-items:center;min-height:44px;font-size:18px;text-decoration:underline;text-underline-offset:6px}
.soft::after{content:"\2193";margin-left:8px;text-decoration:none}
.soft:hover{text-decoration-thickness:2px}
.tw.on .tw-more{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .5s ease .5s,transform .5s ease .5s,visibility 0s linear 1s}
.tw.on.done .tw-more{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .5s,transform .5s ease .5s,visibility 0s linear .5s}
.week figcaption{font-size:16px;line-height:1.5;color:var(--grey);border-top:1px solid var(--rule);padding-top:16px}

/* checklist that ticks as it scrolls past the middle of the screen: the box fills black, then a white check draws in
   (item 28). Each heading is a <details> toggle with its detail underneath (item 29). */
.rows .n{display:flex;align-items:center;gap:12px}
.tick{width:28px;height:28px;flex:none}
.tick rect{fill:var(--ink);stroke:var(--ink);stroke-width:1.5}
.tick path{fill:none;stroke:var(--paper);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:0}
.checklist.js-tick li:not(.done) .tick rect{fill:var(--paper);stroke:var(--line)}
.checklist.js-tick li:not(.done) .tick path{stroke-dashoffset:20}
.checklist.js-tick .tick rect{transition:fill .15s ease-out,stroke .15s ease-out}
.checklist.js-tick .tick path{transition:stroke-dashoffset .25s cubic-bezier(.3,.7,.2,1) .15s}
.checklist{max-width:820px}
.checklist>li{display:block;padding:0}
.ck summary{list-style:none;display:flex;align-items:center;gap:16px;min-height:76px;padding:14px 0;cursor:pointer}
.ck summary::-webkit-details-marker{display:none}
.ck summary::marker{content:""}
.ck summary .n{flex:none;display:flex;align-items:center;gap:12px}
.ck summary h3{flex:1 1 auto;min-width:0;font-size:var(--h3);line-height:1.2}
.ck summary i{position:relative;width:20px;height:20px;flex:none;margin-left:8px}
.ck summary i::before,.ck summary i::after{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;background:var(--ink)}
.ck summary i::after{transform:rotate(90deg);transition:transform .2s}
.ck[open] summary i::after{transform:rotate(0)}
.ck summary:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.ck .d{padding:0 44px 24px 44px;color:var(--grey);font-size:18px;max-width:60ch}

/* faq accordion */
.faq-list{grid-column:1/-1;max-width:820px;margin-top:56px;border-top:1px solid var(--ink)}
.faq{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:20px 0;cursor:pointer;font:500 clamp(20px,1.6vw,24px)/1.3 var(--head);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.faq summary i{position:relative;width:20px;height:20px;flex:none}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;background:var(--ink)}
.faq summary i::after{transform:rotate(90deg);transition:transform .2s}
.faq[open] summary i::after{transform:none}
.faq .a{padding:0 44px 30px 0;max-width:68ch;color:var(--grey);font-size:18px;line-height:1.6}
.faq .a p+p{margin-top:10px}

/* accents removed 8 Oct (Brian: band "out of place", corners "fun but alien"); classes kept harmless. */
.band-wrap{display:block}
.band{height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18' viewBox='0 0 32 18'%3E%3Cg fill='none' stroke='%23d4d4d2' stroke-width='1'%3E%3Cpath d='M0 .5H32M0 17.5H32'/%3E%3Cpath d='M14 3.5h4v2h2v2h2v3h-2v2h-2v2h-4v-2h-2v-2h-2v-3h2v-2h2z'/%3E%3Cpath d='M0 9h3M29 9h3M6 6v6M26 6v6'/%3E%3C/g%3E%3C/svg%3E") repeat-x left center;margin-top:clamp(96px,11vw,176px)}
.band-wrap+section{padding-top:clamp(72px,8vw,128px)}
.corner{position:relative;isolation:isolate}
@media (max-width:560px){.corner::before{display:none}}

/* price */
.price{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:64px;border-top:1px solid var(--ink);padding-top:40px;align-items:start}
.price .pick{grid-column:1/6;min-width:0}
.bands{border:0;min-width:0}
.bands legend{margin-bottom:14px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{position:relative;display:block}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);font:400 17px/1.25 var(--sans);text-align:center;cursor:pointer}
.seg label:hover span{border-color:var(--ink)}
.seg input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.seg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.price .amount{margin-top:28px;font:500 clamp(36px,3.6vw,48px)/1 var(--head);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price .amount small{display:block;font:500 18px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#3a3a3a;margin-top:14px}
.band-list>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:18px}
.band-list>div:first-child{padding-top:0}
.band-list dd{font:500 22px/1.2 var(--head);font-variant-numeric:tabular-nums}
.band-note{margin-top:14px;color:var(--grey);font-size:18px}
.price .terms{grid-column:7/13}
.price .terms li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:18px}
.price .terms li:first-child{padding-top:0}
.price .row{margin-top:32px}

/* proof */
.logos{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:24px;align-items:center;margin-top:64px;padding:32px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.logos img{width:100%;max-width:140px;height:auto;margin:0 auto}
.logos img[alt="NSF"]{max-width:76px}
.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:64px}
.stats strong{display:block;font:500 clamp(44px,4.6vw,68px)/1 var(--head);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:14px;font-size:18px;color:var(--grey)}

/* close */
.close h2{grid-column:1/-1;font-size:var(--big);line-height:1.04;letter-spacing:-.02em;max-width:18ch}
.close .row{grid-column:1/-1;margin-top:48px}
.close .row p{color:var(--grey);font-size:18px}

/* prose for marketing pages and legal */
.copy{grid-column:1/8}
.copy p+p{margin-top:1em}
.copy a{text-decoration:underline}
.legal-body{grid-column:1/9;max-width:72ch}
.legal-body h2{font-size:26px;line-height:1.2;margin:48px 0 14px}
.legal-body p,.legal-body ul{margin-top:14px}
.legal-body ul{list-style:disc;padding-left:22px}
.legal-body li{margin-top:6px}

/* forms */
.form-wrap{grid-column:1/8}
.form-side{grid-column:9/13}
form.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;margin-top:8px}
.field{display:grid;gap:8px;min-width:0}
.field.span{grid-column:1/-1}
.field label,.field .lab{font-size:18px;font-weight:500}
.field .hint{font-size:16px;color:var(--grey);font-weight:400}
input[type=text],input[type=email],input[type=url],select,textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);font:400 18px/1.4 var(--sans)}
textarea{min-height:136px;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a0a0a' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.check{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:18px;line-height:1.5;min-height:44px;cursor:pointer}
.check input{width:24px;height:24px;flex:none;margin-top:0;accent-color:var(--ink)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.checks .check{grid-column:auto;align-items:center}
fieldset{border:0;grid-column:1/-1;min-width:0}
legend{font-size:18px;font-weight:500;margin-bottom:8px}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.f-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:6px}
.f-foot p{font-size:16px;color:var(--grey);max-width:44ch}
.offer-note{grid-column:1/-1;border-left:2px solid var(--ink);padding:4px 0 4px 16px;font-size:18px}
.notice{display:none;border-top:2px solid var(--ink);padding-top:28px;margin-bottom:8px}
.notice h2,.notice h3{font-size:clamp(28px,3vw,40px);line-height:1.1}
.notice p{margin-top:14px;max-width:56ch}
.notice .row{margin-top:24px}
.notice:target{display:block}
.notice:target~form,.notice:target~.offer-note{display:none}
.side-steps{border-top:1px solid var(--ink)}
.side-steps li{padding:20px 0;border-bottom:1px solid var(--rule)}
.side-steps .n{display:block;font:500 18px/1 var(--mono);color:#3a3a3a;margin-bottom:10px}
.side-steps b{font:500 19px/1.3 var(--head);display:block}
.side-steps p{font-size:18px;color:var(--grey);margin-top:6px}

/* footer */
main{padding-bottom:clamp(96px,11vw,168px)}
.site-foot{border-top:1px solid var(--rule);padding:64px 0 40px;font-size:18px}
.site-foot .grid{align-items:start;row-gap:0}
.site-foot .f-top{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px;padding-bottom:40px;border-bottom:1px solid var(--rule)}
.site-foot .f-top img{display:block;width:124px;height:28px}
.site-foot .f-top p{color:var(--grey);max-width:56ch}
.site-foot .f-top i{font-style:italic}
.site-foot .f-col{grid-column:span 4;padding-top:36px}
.site-foot .f-col h2{font:500 18px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#3a3a3a;margin-bottom:10px}
.site-foot .f-col a{display:flex;align-items:center;min-height:44px;text-decoration:none}
.site-foot .f-col a:hover{text-decoration:underline;text-underline-offset:5px}
.site-foot .f-copy{grid-column:1/-1;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);color:var(--grey)}

/* long reads: blog, resources */
.longread .art-head{padding-top:clamp(40px,6vw,96px)}
.crumb{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:28px}
.crumb a{display:inline-flex;align-items:center;text-decoration:none;min-height:44px}
.crumb a:hover{text-decoration:underline}
.art-head h1{grid-column:2/11;font-family:var(--serif);font-size:clamp(40px,5.4vw,80px);line-height:1.04;letter-spacing:-.015em;font-weight:500}
.art-head .dek{grid-column:2/9;margin-top:28px;font:400 clamp(20px,1.7vw,24px)/1.45 var(--serif);color:var(--grey)}
.art-head .byline{grid-column:2/-1;margin-top:28px;display:flex;flex-wrap:wrap;gap:6px 18px}
.art-head .byline a{color:var(--ink)}
.art-head .crumb{grid-column:2/-1}
.art-body{padding-top:clamp(56px,6vw,96px)}
.toc{grid-column:1/4;align-self:start;position:sticky;top:24px}
.toc h2,.toc summary{font:500 18px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#3a3a3a}
.toc summary{display:flex;align-items:center;min-height:44px;cursor:pointer}
.toc ol{margin-top:14px;border-top:1px solid var(--rule)}
.toc li a{display:flex;align-items:center;min-height:44px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.35;text-decoration:none;color:var(--grey)}
.toc li a:hover{color:var(--ink)}
.toc .share{margin-top:24px}
.toc details{display:none}
.art-main{grid-column:4/11;min-width:0}
.takeaways{border-top:1px solid var(--ink);padding-top:22px;margin-bottom:56px}
.takeaways h2{font:500 18px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#3a3a3a}
.takeaways ul{margin-top:14px}
.takeaways li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid var(--rule);font:400 19px/1.45 var(--serif)}
.takeaways li::before{content:"";position:absolute;left:0;top:1.15em;width:12px;height:1px;background:var(--ink)}
.prose{font:400 20px/1.68 var(--serif);max-width:68ch}
.prose>*+*{margin-top:1em}
.prose h2{font:500 clamp(28px,2.6vw,36px)/1.15 var(--serif);letter-spacing:-.01em;margin-top:1.9em;scroll-margin-top:24px}
.prose h3{font:500 24px/1.25 var(--serif);margin-top:1.6em;scroll-margin-top:24px}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose ul{list-style:disc;padding-left:1.2em}
.prose ol{list-style:decimal;padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--grey)}
.prose a{text-decoration:underline}
.prose strong{font-weight:500}
.prose blockquote{margin:1.6em 0;padding-left:24px;border-left:1px solid var(--ink);font-style:italic;font-size:24px;line-height:1.45}
.art-foot{margin-top:40px}
.art-faq{margin-top:88px;scroll-margin-top:24px}
.art-faq h2{font:500 clamp(28px,2.6vw,36px)/1.15 var(--serif);margin-bottom:24px}
.qa{border-top:1px solid var(--rule)}
.qa:last-child{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:16px 0;cursor:pointer;font:500 21px/1.35 var(--serif)}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;width:14px;height:14px;flex:none}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--ink)}
.qa summary i::after{transform:rotate(90deg);transition:transform .2s}
.qa[open] summary i::after{transform:none}
.qa p{padding:0 0 24px;font:400 19px/1.6 var(--serif);max-width:62ch}
.btn-share{font:500 16px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:none;border:0;border-bottom:1px solid var(--ink);padding:14px 0 6px;min-height:44px;cursor:pointer;color:var(--ink)}
.more{padding-top:clamp(88px,9vw,144px)}
.more h2,.sub-band h2{font-size:clamp(28px,2.8vw,40px)}
.related{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}
.related a{display:block;border-top:1px solid var(--ink);padding-top:20px;text-decoration:none}
.related h3{font:500 24px/1.2 var(--serif);margin-top:12px}
.related p{margin-top:10px;font-size:18px;color:var(--grey)}
.related a:hover h3{text-decoration:underline;text-underline-offset:5px}
.sub-band .grid{border-top:1px solid var(--ink);padding-top:40px}
.sub-band .sub-txt{grid-column:1/6}
.sub-band .sub-txt p{margin-top:16px;color:var(--grey);max-width:40ch}
.sub-band .form-wrap{grid-column:7/13}
.sub-band form.f-grid{grid-template-columns:1fr 1fr}
.sub-band .notice{margin-top:0}

/* index lists */
.filters{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:48px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);font:400 17px/1 var(--sans);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.post-list{grid-column:1/-1;margin-top:40px;border-top:1px solid var(--ink)}
.post-list>li>a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:30px 0 34px;border-bottom:1px solid var(--rule);text-decoration:none;align-items:baseline}
.post-list .meta{grid-column:1/4;display:grid;gap:6px}
.post-list h2{grid-column:4/10;font:500 clamp(24px,2.2vw,32px)/1.18 var(--serif);letter-spacing:-.01em}
.post-list p{grid-column:10/13;font-size:18px;color:var(--grey)}
.post-list a:hover h2{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.index-head h1{font-family:var(--serif)}
.soon{grid-column:1/-1}

/* 404 */
.big404{font:400 16px/1.4 var(--mono)}

@media (max-width:1100px){
  .nav-main{display:none}
  .menu{display:block}
}
@media (max-width:1000px){
  .toc{position:static;grid-column:1/-1;margin-bottom:40px}
  .toc>h2,.toc>nav,.toc>.share{display:none}
  .toc details{display:block;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .toc details ol{border-top:0;margin-top:0}
  .toc details li:last-child a{border-bottom:0}
  .art-main{grid-column:1/-1}
  .art-head h1,.art-head .dek,.art-head .byline,.art-head .crumb{grid-column:1/-1}
}
@media (max-width:900px){
  .grid,.rows>li,.price,.post-list>li>a{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:16px}
  .site-head .wrap{min-height:76px}
  .site-head.stuck{margin-bottom:14px}
  .site-head.stuck .wrap{min-height:62px}
  .brand img{width:108px}
  .hero-foot{grid-template-columns:1fr}
  .hero-intro,.hero-art,.sec-head,.caveat,.copy,.form-wrap,.form-side,.legal-body,.page-head h1,.page-head .answer,.sub-band .sub-txt,.sub-band .form-wrap{grid-column:1/-1}
  .hero-intro .answer,.page-head .answer{font-size:18px}
  .hero-intro .answer{font-size:22px}
  .hero-intro .gets li,.hero-intro .gets-foot{font-size:18px}
  .hero-art{justify-self:stretch;max-width:none}
  .form-side{margin-top:64px}
  .statement p{grid-column:1/-1}
  .rows>li{grid-template-columns:auto 1fr;row-gap:8px;padding:26px 0 30px}
  .rows .n{grid-column:1;grid-row:1/span 3}
  .rows h3,.rows .when,.rows .d,.rows.wide .d,.rows.steps .d{grid-column:2}
  .checklist>li{padding:0}
  .ck .d{padding:0 0 20px 0}
  .ck summary{gap:12px}
  .price .pick,.price .terms{grid-column:1/-1}
  .price .terms{margin-top:36px}
  .logos{grid-template-columns:repeat(4,1fr);row-gap:12px}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .stats li:last-child{grid-column:1/-1}
  .wk-bar>span{padding:0 14px}
  .site-foot .f-col{grid-column:span 3}
  .site-foot .f-col.wide{grid-column:1/-1}
  .post-list>li>a{display:block;padding:24px 0 28px}
  .post-list h2{margin-top:12px}
  .post-list p{margin-top:10px}
  .post-list .meta{display:flex;flex-wrap:wrap;gap:4px 16px}
  .related{grid-template-columns:1fr;gap:32px}
  .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-kpis div:nth-child(3){border-left:0}
  .dash-kpis div:nth-child(n+3){border-top:1px solid var(--rule)}
  .dash-body{grid-template-columns:1fr}
  .dash-chart{border-right:0;border-bottom:1px solid var(--rule)}
  .sub-band .form-wrap{margin-top:28px}
}
@media (max-width:560px){
  form.f-grid,.sub-band form.f-grid{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .prose{font-size:19px}
  .prose blockquote{font-size:21px}
  .btn{padding:0 22px}
  .row .btn{width:100%}
}
/* motion pass (round 4, 9 Oct): calm, tap and scroll triggered; all of it off under reduced motion (rule below) */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--t-tap:.12s;--t-in:.45s}
.btn{transition:background-color .15s,color .15s,transform var(--t-tap) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.link{transition:text-underline-offset .2s var(--ease-out)}
.link:hover{text-underline-offset:4px}
.bx-tab:active,.faq summary:active,.ck summary:active{transform:translateY(1px)}
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(14px);transition:opacity var(--t-in) var(--ease-out),transform var(--t-in) var(--ease-out)}
  .rv.in{opacity:1;transform:none}
  .rv.in+.rv.in{transition-delay:.06s}
  .faq[open] .a,.ck[open] .d{animation:open-in .3s var(--ease-out) both}
  .price .amt.swap{animation:amt-in .3s var(--ease-out) both}
}
@keyframes open-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes amt-in{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
/* gift (round 4) */
.price .gift{grid-column:1/-1;margin-top:48px;padding-top:28px;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:baseline}
.price .gift p{grid-column:1/9;font-size:20px;line-height:1.5;max-width:60ch}
.price .gift b{font-weight:500}
legend .hint{font-size:16px;color:var(--grey);font-weight:400}
.price .gift .link{grid-column:9/13;justify-self:start}
@media (max-width:900px){.price .gift p,.price .gift .link{grid-column:1/-1}.price .gift .link{margin-top:12px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{.site-head,.site-foot,.toc,.sub-band,.more,.btn-share{display:none}}
.notice:focus{outline:none}