/* About page (2026-10-02). Structure and copy from the reference About page, in the V3 look: the homepage gradient
   and clouds in the hero, graded photos with grain, glass cards, the lime highlighter and line drawings. Loaded after
   v3.css and only by this page. */

/* film grain, the same monochrome noise the homepage photo tiles carry; sits on top of an .ab-grain block */
.ab-grain{position:relative;isolation:isolate}
.ab-grain::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:var(--gr,.55);mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px}
.ab-grain>.wrap{position:relative;z-index:1}
@keyframes abdrift{from{transform:scale(1)}to{transform:scale(1.07) translate(-1.2%,.8%)}}

/* the second line of a heading in mid green, as on the reference; lime on the dark band */
h1 .tone,h2 .tone,h3 .tone{display:block;color:#3F5C3B}
.ab-pq .tone{display:inline}

/* ---- 1. hero: their headline left, photo card right, on the homepage gradient ---- */
.ab-hero{min-height:0;padding-top:calc(64px + clamp(2.5rem,8vh,5rem));padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.ab-hero>.wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;width:100%}
.ab-htext{display:grid;gap:1.25rem;justify-items:start}
.ab-htext .crumb{margin:0;color:var(--ink2)}
.ab-htext h1{font-size:clamp(2.1rem,3.25vw,2.95rem);line-height:1.06;text-wrap:initial}
.ab-htext h1 .tone{white-space:nowrap}
.ab-htext .lede{color:var(--ink2);max-width:54ch;line-height:1.65}
.ab-htext .btn{margin-top:.3rem}
.js .ab-htext>*{animation:rise 1s var(--ease) both}
.js .ab-htext>*:nth-child(2){animation-delay:.08s}.js .ab-htext>*:nth-child(3){animation-delay:.16s}.js .ab-htext>*:nth-child(4){animation-delay:.24s}
.ab-hphoto{border-radius:28px;overflow:hidden;aspect-ratio:4/5;max-height:540px;width:100%;justify-self:end;background:#2F7F97;box-shadow:0 30px 70px rgba(5,32,42,.22)}
.ab-hphoto .ph{position:absolute;inset:-3%;z-index:-1;background:url(img/ab-hero.jpg) 50% 40%/cover no-repeat}
.ab-hphoto::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,32,42,0) 62%,rgba(5,32,42,.42) 100%)}
.js .ab-hphoto .ph{animation:abdrift 38s ease-in-out infinite alternate}
.ab-place{position:absolute;left:1rem;bottom:1rem;z-index:1;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem .55rem .75rem;border-radius:999px;
  font-size:.85rem;font-weight:600;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.ab-place .ic{width:16px;height:16px}

/* ---- 2. why we exist: heading, the starting point in glass, the belief on the lime hills ---- */
section.ab-story{background:transparent;padding-top:clamp(1rem,3vh,2rem)}
.ab-bento{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.92fr);gap:1rem;align-items:stretch}
.ab-stitle{align-self:center;display:grid;gap:1rem;padding-right:clamp(0rem,2vw,1.5rem)}
.ab-stitle h2{font-size:clamp(2rem,3.4vw,3rem)}
.ab-lbl{display:inline-flex;align-items:center;gap:.55rem;font-size:.85rem;font-weight:500;color:var(--muted)}
.ab-lbl .ico{width:34px;height:34px;border-radius:50%;background:#EEF5DF;color:#3F5C3B;display:grid;place-items:center}
.ab-lbl .ico .ic{width:17px;height:17px}
.ab-origin{display:flex;flex-direction:column;gap:.85rem;padding:1.7rem 1.7rem 1.6rem;border-radius:24px;min-height:380px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 18px 44px rgba(34,53,42,.09),inset 0 1px 0 #fff}
.ab-origin h3{font-size:clamp(1.35rem,1.9vw,1.6rem);line-height:1.12;margin-top:.4rem;max-width:16ch}
.ab-origin p{font-size:.95rem;line-height:1.6;color:var(--muted)}
.ab-origin .ab-foot{margin-top:auto;padding-top:.95rem;border-top:1px solid rgba(34,53,42,.1);font-size:.88rem;color:var(--ink2)}
.ab-belief{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;padding:1.7rem;border-radius:24px;overflow:hidden;min-height:380px;background:#B5D97E;--gr:.6;box-shadow:0 22px 50px rgba(63,92,59,.18)}
.ab-belief .pl{position:absolute;inset:-3%;z-index:-2;background:url(img/ab-belief.jpg) 50% 60%/cover no-repeat}
.ab-belief::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(246,250,232,.55) 0%,rgba(236,245,206,.25) 34%,rgba(214,233,160,.55) 68%,rgba(198,229,124,.86) 100%)}
.ab-belief>*{position:relative;z-index:1}
.ab-belief .ab-lbl{color:#3F5C3B}
.ab-bq{font-family:var(--display);font-weight:600;font-size:clamp(1.45rem,2.15vw,1.85rem);line-height:1.18;letter-spacing:-.03em;color:#3F5C3B;max-width:15ch}
.ab-bq b{display:block;font-weight:600;color:#0E3A1F;margin-top:.35rem}

/* ---- 3. two sides of growth: two photo cards with veils and grain ---- */
.ab-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:1080px;margin:0 auto}
.ab-panel{display:flex;flex-direction:column;gap:1rem;padding:clamp(1.6rem,2.6vw,2.3rem);border-radius:26px;overflow:hidden;--gr:.55}
.ab-panel .pl{position:absolute;inset:-3%;z-index:-2;background:50% 30%/cover no-repeat}
.ab-panel::before{content:"";position:absolute;inset:0;z-index:-1}
.ab-panel>*{position:relative;z-index:1}
.ab-ptop{display:inline-flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600}
.ab-ptop .ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.ab-ptop .ico .ic{width:19px;height:19px}
.ab-panel h3{font-size:clamp(1.65rem,2.5vw,2.15rem);line-height:1.05;letter-spacing:-.04em;margin:.6rem 0 .3rem}
.ab-items{list-style:none;margin:0;padding:0;display:grid}
.ab-items li{padding:.85rem 0;border-top:1px solid var(--rule)}
.ab-items b{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:.15rem}
.ab-items p{font-size:.9rem;line-height:1.55}
.ab-focus{margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule);display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem}
.ab-focus .ic{width:17px;height:17px;flex:none}
/* marketing: the lime hills, a pale lime veil that thickens under the list */
.ab-panel.mkt{background:#C6E57C;color:#0E3A1F;--rule:rgba(14,58,31,.14);box-shadow:0 22px 50px rgba(63,92,59,.16)}
.ab-panel.mkt .pl{background-image:url(img/ab-mkt.jpg);background-position:50% 40%}
.ab-panel.mkt::before{background:linear-gradient(180deg,rgba(240,247,214,.16) 0%,rgba(240,247,214,.56) 22%,rgba(242,248,224,.88) 40%,rgba(242,248,224,.94) 100%)}
.ab-panel.mkt .ico{background:#0E3A1F;color:#C6E57C}
.ab-panel.mkt h3{color:#0E3A1F}
.ab-panel.mkt h3 .tone{color:#3F5C3B}
.ab-panel.mkt .ab-items p{color:#4A5A45}
.ab-panel.mkt .ab-focus .ic{color:#3F5C3B}
/* AI and automation: the teal water under a deep teal scrim, white type */
.ab-panel.ai{background:#16485A;color:#fff;--rule:rgba(255,255,255,.16);box-shadow:0 22px 50px rgba(5,32,42,.24)}
.ab-panel.ai .pl{background-image:url(img/ab-ai.jpg)}
.ab-panel.ai::before{background:linear-gradient(180deg,rgba(5,32,42,.3) 0%,rgba(5,32,42,.6) 26%,rgba(5,32,42,.8) 50%,rgba(5,32,42,.88) 100%)}
.ab-panel.ai .ico{background:rgba(255,255,255,.14);color:#BFE9EE;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ab-panel.ai h3{color:#fff}
.ab-panel.ai h3 .tone{color:#A6D6D8}
.ab-panel.ai .ab-items p{color:rgba(255,255,255,.8)}
.ab-panel.ai .ab-focus .ic{color:#A6D6D8}

/* ---- 4. the connection: shuffled teal > yellow > lime band, statement left, chart right ---- */
section.ab-conn{background:linear-gradient(35deg,#C6E5E3 0%,#DCEFE8 24%,#F1F4D5 54%,#DCEEAA 80%,#C6E57C 100%);padding-block:clamp(4rem,10vh,6.5rem);--gr:.4}
.ab-conn>.wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.ab-ctext{display:grid;gap:1.4rem}
.ab-big{font-size:clamp(2.5rem,5.2vw,4.5rem);line-height:1;letter-spacing:-.05em;color:#0E3A1F}
.ab-big .tone{display:inline;color:#3F5C3B}
.ab-ctext .lede{color:var(--ink2);font-size:clamp(1.02rem,1.25vw,1.15rem)}
.ab-chart{padding:clamp(1.2rem,2.4vw,1.9rem);border-radius:26px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.88);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 18px 44px rgba(34,53,42,.09),inset 0 1px 0 #fff}
.ab-chart svg{display:block;width:100%;height:auto;overflow:visible}
.ab-chart .g{fill:none;stroke:rgba(34,53,42,.1);stroke-width:1;stroke-dasharray:3 6}
.ab-chart .area{fill:rgba(198,229,124,.38);stroke:none}
.ab-chart .up{fill:none;stroke:#1F4A31;stroke-width:3.2;stroke-linecap:round}
.ab-chart .dn{fill:none;stroke:#2A8AA3;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.012 .018}
.ab-chart .eu{fill:#C6E57C;stroke:#0E3A1F;stroke-width:2.4}
.ab-chart .ed{fill:#fff;stroke:#2A8AA3;stroke-width:2.2}
.ab-chart text{font:600 15px var(--sans);letter-spacing:-.01em}
.ab-chart .tu{fill:#0E3A1F}
.ab-chart .td{fill:#1E6577}
/* drawn when the card comes on screen: the rising line, then the falling one, then the end points and labels */
.js .ab-chart .up{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .2s}
.js .ab-chart .dn{opacity:0;transition:opacity 1.2s var(--ease) .7s}
.js .ab-chart .area{opacity:0;transition:opacity 1.2s var(--ease) 1.1s}
.js .ab-chart .eu,.js .ab-chart .ed,.js .ab-chart text{opacity:0;transition:opacity .6s var(--ease) 1.5s}
.js .ab-chart.in .up{stroke-dashoffset:0}
.js .ab-chart.in .dn,.js .ab-chart.in .area,.js .ab-chart.in .eu,.js .ab-chart.in .ed,.js .ab-chart.in text{opacity:1}

/* ---- 5. one journey: a card on the process gradient; four steps joined by a line that fills on screen ---- */
.ab-jcard{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(1.8rem,4vw,3.2rem);border-radius:28px;overflow:hidden;
  background:linear-gradient(212deg,#E2F0C2 0%,#EEF4D2 30%,#DDEFE6 64%,#C6E5E3 100%);--gr:.35}
.ab-jcard>*{position:relative;z-index:1}
.ab-jhead{display:grid;gap:1rem}
.ab-jhead h2{max-width:11ch}
.ab-jhead .lede{color:var(--ink2);max-width:34ch}
.ab-steps{list-style:none;margin:0;padding:0;display:grid;position:relative}
.ab-steps::before,.ab-steps::after{content:"";position:absolute;left:27px;top:2.2rem;bottom:2.2rem;width:2px;margin-left:-1px;border-radius:2px;background:rgba(34,53,42,.14)}
.ab-steps::after{background:#1F4A31;transform-origin:top}
.ab-steps li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:1.1rem;align-items:center;padding:1rem 0;position:relative;z-index:1}
.ab-steps li+li{border-top:1px solid rgba(34,53,42,.1)}
.ab-node{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#3F5C3B;border:1px solid rgba(34,53,42,.12);box-shadow:0 8px 20px rgba(34,53,42,.08)}
.ab-node .ic{width:22px;height:22px}
.ab-steps b{display:block;font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:-.02em;color:var(--ink)}
.ab-steps p{font-size:.92rem;line-height:1.5;color:var(--muted)}
.ab-tag{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;white-space:nowrap}
.ab-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.ab-steps .mk .ab-node{background:#C6E57C;color:#0E3A1F;border-color:transparent}
.ab-steps .ct .ab-node{background:#A6D6D8;color:#0B3644;border-color:transparent}
.ab-steps .au .ab-node{background:#1F4A31;color:#C6E57C;border-color:transparent}
.ab-steps .hu .ab-node{background:#F0DB6A;color:#4A3F08;border-color:transparent}
.ab-steps .mk .ab-tag{color:#4E7A2A}
.ab-steps .ct .ab-tag{color:#1E6577}
.ab-steps .au .ab-tag{color:#1F4A31}
.ab-steps .hu .ab-tag{color:#8A6F0C}
/* on screen, the line fills top to bottom and each stop lights up as it reaches it */
.js .ab-steps::after{transform:scaleY(0);transition:transform 1.8s var(--ease) .2s}
.js .ab-steps.in::after{transform:none}
.js .ab-steps .ab-node{background:#fff;color:#3F5C3B;border-color:rgba(34,53,42,.12);transition:background .5s var(--ease),color .5s,border-color .5s,transform .6s cubic-bezier(.3,1.5,.5,1)}
.js .ab-steps li>div,.js .ab-steps .ab-tag{opacity:.35;transition:opacity .6s var(--ease)}
.js .ab-steps.in li>div,.js .ab-steps.in .ab-tag{opacity:1}
.js .ab-steps.in .mk .ab-node{background:#C6E57C;color:#0E3A1F;border-color:transparent;transition-delay:.2s}
.js .ab-steps.in .ct .ab-node{background:#A6D6D8;color:#0B3644;border-color:transparent;transition-delay:.7s}
.js .ab-steps.in .au .ab-node{background:#1F4A31;color:#C6E57C;border-color:transparent;transition-delay:1.2s}
.js .ab-steps.in .hu .ab-node{background:#F0DB6A;color:#4A3F08;border-color:transparent;transition-delay:1.7s}
.js .ab-steps.in .mk>div,.js .ab-steps.in .mk .ab-tag{transition-delay:.2s}
.js .ab-steps.in .ct>div,.js .ab-steps.in .ct .ab-tag{transition-delay:.7s}
.js .ab-steps.in .au>div,.js .ab-steps.in .au .ab-tag{transition-delay:1.2s}
.js .ab-steps.in .hu>div,.js .ab-steps.in .hu .ab-tag{transition-delay:1.7s}

/* ---- 6. the non-negotiables: dark green motion photo, forest scrim, heavy grain, white glass cards ---- */
section.ab-bound{overflow:hidden;background:#173D29;padding-block:clamp(4.5rem,11vh,7rem);--gr:.75}
.ab-bph{position:absolute;inset:0;z-index:-2;background:url(img/ab-band.jpg) 50% 50%/cover no-repeat}
.ab-bound::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 40% at 50% 22%,rgba(9,30,17,.55) 0%,rgba(9,30,17,0) 100%),linear-gradient(180deg,rgba(9,30,17,.72) 0%,rgba(9,30,17,.5) 45%,rgba(9,30,17,.38) 75%,rgba(9,30,17,.55) 100%)}
.ab-bound .shead h2{color:#fff;text-shadow:0 2px 24px rgba(9,30,17,.35)}
.ab-bound .shead h2 .tone{color:#C6E57C}
.ab-bound .shead .lede{color:rgba(255,255,255,.88);max-width:62ch;text-shadow:0 1px 16px rgba(9,30,17,.4)}
.ab-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:1080px;margin:0 auto}
.ab-rules article{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:1.9rem 1.5rem 1.8rem;border-radius:22px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 20px 48px rgba(9,30,17,.22),inset 0 1px 0 #fff}
.ab-rules .ico{width:44px;height:44px;border-radius:50%;background:#173D29;color:#C6E57C;display:grid;place-items:center;margin-bottom:.3rem}
.ab-rules .ico .ic{width:20px;height:20px}
.ab-rules h3{font-size:1.22rem;line-height:1.2;max-width:16ch}
.ab-rules p{font-size:.93rem;line-height:1.55;color:var(--muted);max-width:34ch}

/* ---- 7. purpose: one centred statement ---- */
section.ab-purpose{padding-block:clamp(4rem,10vh,6.5rem)}
.ab-purpose .wrap{display:grid;justify-items:center;text-align:center;gap:clamp(1.6rem,4vh,2.3rem)}
.ab-pq{font-size:clamp(2rem,4vw,3.3rem);line-height:1.14;letter-spacing:-.045em;max-width:22ch}
.ab-purpose .btn{padding:.95rem 2.2rem}

/* ---- 8. questions: heading left (sticky on desktop), glass accordion right ---- */
section.ab-faq{--gr:.3}
.ab-fsplit{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.ab-fhead{position:sticky;top:calc(64px + 2rem);display:grid;gap:1rem}
.ab-fhead h2{max-width:12ch}
.ab-acc{border-radius:26px;padding:.4rem clamp(1.1rem,2.2vw,1.8rem);
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 18px 44px rgba(34,53,42,.09),inset 0 1px 0 #fff}
.ab-qa+.ab-qa{border-top:1px solid rgba(34,53,42,.09)}
.ab-qa h3{margin:0;font-size:inherit}
.ab-q{appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0;text-align:left;cursor:pointer;
  font:600 1.06rem/1.3 var(--display);letter-spacing:-.02em;color:var(--ink);-webkit-tap-highlight-color:transparent}
.ab-plus{width:32px;height:32px;padding:8px;border-radius:50%;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;color:#3F5C3B;background:#EEF5DF;transition:transform .45s var(--ease),background .3s,color .3s}
.ab-q:hover .ab-plus{background:#E2EFC8}
.ab-q[aria-expanded="true"] .ab-plus{transform:rotate(45deg);background:#1F4A31;color:#C6E57C}
/* the open answer eases to its height (grid rows 0fr to 1fr); closed answers leave the accessibility tree */
.ab-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s var(--ease),visibility 0s linear .5s}
.ab-qa.open .ab-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s var(--ease),visibility 0s}
html:not(.js) .ab-a{grid-template-rows:1fr;visibility:visible}
.ab-a>div{min-height:0;overflow:hidden}
.ab-a p{padding:0 3rem 1.2rem 0;font-size:.95rem;line-height:1.65;color:var(--muted)}
.ab-a a{color:#1F4A31;font-weight:600}

/* ---- tablets ---- */
@media (max-width:1080px){
  .ab-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-stitle{grid-column:1/-1;padding-right:0}
  .ab-stitle h2{max-width:none}
  .ab-steps li{grid-template-columns:56px minmax(0,1fr)}
  .ab-tag{grid-column:2;margin-top:-.4rem}
}
@media (max-width:960px){
  .ab-jcard{grid-template-columns:1fr}
  .ab-jhead h2{max-width:none}
  .ab-rules{grid-template-columns:1fr;max-width:560px}
  .ab-rules article{display:grid;grid-template-columns:auto minmax(0,1fr);text-align:left;align-items:start;column-gap:1rem;row-gap:.35rem;padding:1.4rem 1.4rem 1.5rem}
  .ab-rules .ico{grid-row:1/3;margin:0}
  .ab-rules h3{max-width:none}
  .ab-rules p{max-width:none}
}
/* ---- phones ---- */
@media (max-width:860px){
  .ab-hero>.wrap{grid-template-columns:1fr}
  .ab-htext h1{text-wrap:balance}
  .ab-htext h1 .tone{white-space:normal}
  .ab-hphoto{aspect-ratio:4/3;justify-self:stretch}
  .ab-hphoto .ph{background-position:50% 30%}
  .ab-bento{grid-template-columns:1fr}
  .ab-origin,.ab-belief{min-height:0}
  .ab-belief{min-height:300px}
  .ab-duo{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--pad));padding:0 var(--pad) .6rem;scrollbar-width:none}
  .ab-duo::-webkit-scrollbar{display:none}
  .ab-panel{flex:0 0 86%;scroll-snap-align:center;padding:1.5rem 1.35rem}
  .ab-conn>.wrap{grid-template-columns:1fr}
  .ab-fsplit{grid-template-columns:1fr;gap:1.5rem}
  .ab-fhead{position:static}
  .ab-fhead h2{max-width:none}
  .ab-a p{padding-right:.5rem}
  .ab-steps li{gap:.9rem}
}
@media (max-width:520px){
  .ab-steps::before,.ab-steps::after{left:23px}
  .ab-steps li{grid-template-columns:48px minmax(0,1fr)}
  .ab-node{width:48px;height:48px}
  .ab-node .ic{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  .js .ab-htext>*,.js .ab-hphoto .ph{animation:none!important}
  .js .ab-chart .up{stroke-dashoffset:0;transition:none}
  .js .ab-chart .dn,.js .ab-chart .area,.js .ab-chart .eu,.js .ab-chart .ed,.js .ab-chart text{opacity:1;transition:none}
  .js .ab-steps::after{transform:none;transition:none}
  .js .ab-steps li>div,.js .ab-steps .ab-tag{opacity:1;transition:none}
  .ab-a,.ab-qa.open .ab-a,.ab-plus{transition:none}
}