:root{
  color-scheme:light;
  --paper:#faf9f5; --paper-2:#f0eee6; --ink:#141413; --ink-2:#3d3c38;
  --muted:#67655e; --faint:#67655e; --rule:#e0ddd2; --hair:#cdc9bc;
  --or:#d46540; --or-deep:#a04b2c;
  --gut:clamp(20px,4.5vw,40px);
  --cb-h:92px;
  --fs:"Instrument Sans",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --fr:"Newsreader",Georgia,"Songti SC",serif;
  --fm:"JetBrains Mono",ui-monospace,monospace;
  --measure:880px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#12120f; --paper-2:#1a1a16; --ink:#f0eee6; --ink-2:#cbc8bd;
  --muted:#98958b; --faint:#85827a; --rule:#3a382f; --hair:#4a473e;
  --or:#e08663; --or-deep:#f0a183;
}}

/* CJK faces are loaded only on the pages that need them; the stack keeps the Latin
   face first so numerals, currency and product names stay in the brand faces. */
:root[lang="zh-Hant"]{
  --fs:"Instrument Sans","Noto Sans TC","PingFang TC","Microsoft JhengHei","Hiragino Sans CNS",sans-serif;
  --fr:"Newsreader","Noto Serif TC","Songti TC","PingFang TC",Georgia,serif;
}
:root[lang="zh-Hans"]{
  --fs:"Instrument Sans","Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --fr:"Newsreader","Noto Serif SC","Songti SC","PingFang SC",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.65 var(--fs);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
  overflow-wrap:break-word;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

h1,h2,h3,h4,.lbl,nav,th,button{font-family:var(--fs)}
h1,h2,h3,h4{font-weight:530;letter-spacing:-.017em;line-height:1.12;color:var(--ink)}
h1{margin:0 0 clamp(18px,2.1vw,26px);text-wrap:balance}
h2{text-wrap:balance}
h2{margin:0 0 18px}
h3{margin:0 0 9px}
h4{margin:0 0 7px}
h1{font-family:var(--fr);font-weight:400;font-size:clamp(2.25rem,4vw,3.5rem);line-height:1.1;letter-spacing:-.025em;max-width:23ch}
.hero h1{font-size:clamp(2.4rem,4.6vw,4.1rem);line-height:1.06;max-width:19ch}
/* The slogan under a category-word h1. It stays inside the h1 with its accent word, and
   never drops below 24px, which is the smallest size the accent colour is cleared for. */
.h1-s{display:block;margin-top:.38em;font-size:max(24px,.56em);line-height:1.2;
  letter-spacing:-.015em;color:var(--ink-2)}
h2{font-size:clamp(25px,2.9vw,34px);letter-spacing:-.022em;line-height:1.14}
h3{font-size:21px;letter-spacing:-.012em;line-height:1.24}
h4{font-size:16.5px;letter-spacing:-.005em;line-height:1.3}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:600}
em{font-style:italic}
.ac{font-style:normal;color:var(--or)}

a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:.19em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--or-deep)}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:1px}

ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin:0 0 .38em}
li:last-child{margin-bottom:0}

/* ---- layout ------------------------------------------------------------ */
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.measure{max-width:var(--measure)}
.skip{position:absolute;left:-9999px;top:0;z-index:9;background:var(--paper);color:var(--ink);
  padding:12px 18px;border:1px solid var(--ink);font-family:var(--fs);font-size:15.5px}
.skip:focus{left:12px;top:12px}

.bleed{border:0;border-top:1px solid var(--rule);margin:0}
.sec{padding:clamp(52px,7vw,92px) 0}
.sec-tight{padding:clamp(38px,5vw,60px) 0}

.lbl{display:block;font-size:14px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px}
.dek{font-size:18.5px;line-height:1.5;color:var(--ink-2);margin:0 0 1.05em}
.sm{font-size:15.5px;line-height:1.5}
.micro{font-family:var(--fs);font-size:13px;line-height:1.5;color:var(--muted);max-width:var(--measure)}
.src{font-family:var(--fs);font-size:13px;line-height:1.5;color:var(--muted);margin:14px 0 0;max-width:var(--measure)}
.lic{font-family:var(--fs);font-size:14px;line-height:1.55;color:var(--ink-2);
  margin:20px 0 0;padding-left:14px;border-left:2px solid var(--hair);max-width:var(--measure)}

/* ---- header ------------------------------------------------------------ */
.hd{border-bottom:1px solid var(--rule);position:relative;z-index:50;background:var(--paper)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:74px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.lock{display:inline-flex;align-items:center;gap:9px;text-decoration:none;padding:6px 0;min-height:38px}
.lock img{display:block;width:26px;height:26px}
.wm{font-family:var(--fs);font-size:1rem;font-weight:560;letter-spacing:-.012em;color:var(--ink);white-space:normal}
.nv{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.nv li{margin:0}
.nv a{font-family:var(--fs);font-size:15.5px;color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:2px 0;border-bottom:1px solid transparent}
.nv a:hover{color:var(--ink);border-bottom-color:var(--hair)}
.nv a[aria-current=page]{color:var(--ink);border-bottom-color:var(--or)}

/* ---- hero -------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(30px,5vw,68px);align-items:center;padding:clamp(48px,8vw,110px) 0 clamp(48px,7vw,96px)}
.hero-t p{max-width:34em}
.hero-a{border:1px solid var(--rule);background:var(--paper-2);padding:clamp(20px,2.3vw,30px);border-radius:6px}
.hero-a .lbl{margin-bottom:14px}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:34px}
  .hero-a{padding:26px}
}
/* On a phone the booking buttons follow the heading and the paragraph comes after
   them. With the paragraph first, a first visit put the primary button under the
   cookie bar (at 390x844 in English its top was 773, the bar's 737), and at 360x640
   it sat a whole screen down. Now it is wholly above the bar in all four languages in
   the windows phone browsers give a page with their toolbars showing (393x659 on an
   iPhone 15 to 412x839 on a Pixel 7, and 360x740 on a Galaxy S8), and on the
   whole-screen sizes from 360x640 up. On the shortest windows, an iPhone SE or 8 in Safari (375x553) or a 360x640
   Android in Chrome (360x560), the English and Filipino heroes are too tall for that
   with a 100px bar under them, and at 320px wide the English button's two-line label
   runs its lower edge under the bar. There the floating button comes back above the
   bar, or, where most of the button still shows, its middle can be tapped; shots.py
   holds both rules at their sizes. Only the paragraph moves, and it holds no link
   (verify.py), so the keyboard order is the same as before. A screen reader, which
   reads in markup order, meets the paragraph before the buttons: the order the desktop
   layout shows, and the price of drawing the phone layout the other way round. The
   18px under the h1 plus 4px here is the 22px gap the buttons had. */
@media(max-width:600px){
  .hero{padding-top:28px}
  .hero-t{display:flex;flex-direction:column}
  .hero-t .btns{margin-top:4px}
  .hero-t .dek{order:1;margin:22px 0 0}
}

/* ---- figure tables ----------------------------------------------------- */
.tbl{max-width:var(--measure);font-family:var(--fs);font-size:16.5px}
.tr{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--rule)}
.tbl-head .lb,.tbl-head .ph{font-size:14px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.tbl-head{padding-bottom:11px;border-bottom-color:var(--hair)}
.lb{color:var(--ink)}
.tr-sum{border-bottom:1px solid var(--ink);font-weight:600}
.tr-final{border-bottom:3px double var(--ink);font-weight:600}
.tr-sum .lb,.tr-final .lb{font-weight:600}
.tr-final .p,.tr-sum .p{font-weight:500}
.tr-note .lb,.tr-note .p{color:var(--muted)}
.ph{text-align:right}
.p{font-family:var(--fm);font-size:15.5px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.p .q{color:var(--muted);padding-right:.42em}
.p .dash{color:var(--faint)}

@supports (grid-template-columns: subgrid){
  @media(min-width:721px){
    .tbl[role=table]{display:grid;
      grid-template-columns:minmax(0,1fr) max-content max-content max-content max-content}
    .tbl [role=row]{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
      column-gap:0;align-items:baseline}
    .tbl .tr .p{display:contents}
    .tbl .tr .p.pt{display:block;grid-column:2/-1;text-align:right}
    .tbl .tr .p>.q{text-align:right;padding-right:.42em}
    .tbl .tr .p>.lo{text-align:right}
    .tbl .tr .p>.dash{text-align:center;padding:0 .38em;color:var(--faint)}
    .tbl .tr .p>.hi{text-align:left;white-space:nowrap;padding-left:.06em}
    .tbl .tr .ph{grid-column:2/-1}
    .tbl .tr .lb{padding-right:28px}
  }
}
@media(max-width:720px){
  .tr{flex-direction:column;align-items:flex-start;gap:4px}
  .tbl-head{flex-direction:row;align-items:baseline}
  .p{font-size:16.5px}
}

/* ---- plain rule lists -------------------------------------------------- */
.rl{list-style:none;padding:0;margin:0;max-width:var(--measure);font-family:var(--fs);font-size:16.5px}
.rl>li{padding:15px 0;border-bottom:1px solid var(--rule);margin:0;line-height:1.45}
.rl strong{display:block;font-weight:600;margin-bottom:3px}
.rl strong a{display:inline-flex;align-items:center;min-height:28px}
.rl .rl-x{color:var(--ink-2);font-size:15.5px}

/* ---- services / stages ------------------------------------------------- */
.svc{max-width:var(--measure);border-top:1px solid var(--hair)}
.svc>section{padding:30px 0;border-bottom:1px solid var(--rule)}
.svc h3{margin-bottom:9px}
.svc .tag{font-family:var(--fm);font-size:13px;color:var(--or-deep);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:12px}
.svc .ex{font-family:var(--fs);font-size:15.5px;color:var(--ink-2);margin:12px 0 0}
.svc .ex b{font-weight:600;color:var(--ink)}

.stage{max-width:var(--measure);border-top:1px solid var(--hair)}
.stage>section{padding-bottom:46px}
.stage h2{position:sticky;top:0;z-index:2;background:var(--paper);
  padding:22px 0 14px;border-bottom:1px solid var(--rule);margin-bottom:24px;scroll-margin-top:0}
.stage .no{font-family:var(--fm);font-size:13px;color:var(--or-deep);letter-spacing:.06em;
  display:block;margin-bottom:6px;font-weight:400}

/* ---- FAQ --------------------------------------------------------------- */
.faq{max-width:var(--measure);border-top:1px solid var(--hair)}
.faq>div{padding:26px 0;border-bottom:1px solid var(--rule)}
.faq h3{font-size:18.5px;margin-bottom:10px}
.faq p{font-size:16.5px}

/* ---- callouts / CTA ---------------------------------------------------- */
.cta{max-width:var(--measure);background:var(--paper-2);border:1px solid var(--rule);
  padding:clamp(26px,3.4vw,40px)}
.cta h2{margin-bottom:12px}
.cta-note{margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:13px 26px;font-family:var(--fs);font-size:16.5px;font-weight:560;
  background:var(--ink);color:var(--paper);text-decoration:none;border:1px solid var(--ink);border-radius:7px;transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}
.btn:hover{background:var(--ink-2);border-color:var(--ink-2);transform:translateY(-2px);box-shadow:0 5px 16px #14141318}
.btn-2{background:transparent;color:var(--ink);border-color:transparent;box-shadow:none;padding-left:12px;padding-right:12px}
.btn-2:hover{background:var(--paper-2);border-color:transparent;color:var(--ink);box-shadow:none}
.btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
.btns .micro{margin:0}
/* The filled booking button at the right end of the header. Below 721px there is no
   room for it beside the menu and language controls, so it is hidden there and the
   copy at the foot of the menu (.mn-bk) is shown instead: one of the two, never both.
   These follow .btn on purpose: same specificity, so the later rule wins. */
.hd-bk{min-height:40px;padding:8px 16px;font-size:14.5px;white-space:nowrap}
.mn-bk{display:none}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);max-width:var(--measure)}
.grid2 a{display:inline-flex;align-items:center;min-height:28px}
.grid2-t{margin-top:38px}
@media(max-width:720px){.grid2{grid-template-columns:1fr;gap:30px}}
.prose{max-width:var(--measure)}
.prose h3{margin:34px 0 10px}
.prose h2+p{margin-top:0}
/* A paragraph after a list or a figure table inside prose (the English-only pages),
   and the link paragraph after the home page's short answers. */
.prose .cov+p,.prose .rl+p,.prose .tbl+p{margin-top:18px}
.faq+p{margin-top:26px}

/* ---- footer ------------------------------------------------------------ */
.ft{border-top:1px solid var(--rule);background:var(--paper-2);padding:clamp(40px,5vw,60px) 0 clamp(34px,4vw,46px);margin-top:0}
.ft-top{display:flex;flex-wrap:wrap;gap:26px 48px;justify-content:space-between;align-items:flex-start;
  padding-bottom:30px;border-bottom:1px solid var(--rule)}
.ft-nav{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none}
.ft-nav li{margin:0}
.ft-nav a{font-family:var(--fs);font-size:15.5px;color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:26px}
.ft-nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.19em}
.ft-c{font-family:var(--fs);font-size:15.5px;color:var(--ink-2);margin:0}
.ft-c a{color:var(--ink-2)}
.dis{font-family:var(--fs);font-size:13px;line-height:1.62;color:var(--muted);
  max-width:78ch;margin:26px 0 0}

/* ---- compact landing lists --------------------------------------------- */
.menu{max-width:var(--measure);border-top:1px solid var(--hair)}
.menu>a{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:18px;
  align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;min-height:24px}
.menu>a:hover .menu-t{text-decoration:underline;text-underline-offset:.19em}
.menu-t{font-family:var(--fs);font-size:21px;letter-spacing:-.012em;color:var(--ink)}
.menu-d{font-family:var(--fs);font-size:15.5px;line-height:1.5;color:var(--ink-2);
  grid-column:1/-1;margin:6px 0 0;max-width:54ch}
.menu-p{font-family:var(--fm);font-size:15.5px;font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap}
@media(max-width:600px){.menu>a{grid-template-columns:1fr;gap:4px}}

/* ---- coverage lists (services) ----------------------------------------- */
.cov{list-style:none;padding:0;margin:16px 0 0;font-family:var(--fs);font-size:15.5px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.cov li{margin:0;padding-left:16px;position:relative;color:var(--ink-2);line-height:1.45}
.cov li::before{content:"";position:absolute;left:0;top:.64em;width:7px;height:1px;
  background:var(--hair)}
@media(max-width:600px){.cov{grid-template-columns:1fr}}

/* ---- line chart -------------------------------------------------------- */

/* ---- reasons list ------------------------------------------------------ */

/* ---- language switcher, form, courtesy translations -------------------- */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.hd-r{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap}

/* A quiet control. Someone reading in their own language should not have to look
   at four alternatives they do not want. */
.lg{position:relative}
.lg summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  list-style:none;padding:5px 9px;min-height:44px;border:1px solid transparent;
  font-family:var(--fs);font-size:14px;color:var(--muted)}
.lg summary::-webkit-details-marker{display:none}
.lg summary::marker{content:""}
.lg summary:hover,.lg[open] summary{color:var(--ink-2);border-color:var(--hair)}
.lg-i{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4}
.lg-c{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.lg[open] .lg-c{transform:rotate(180deg)}
.lg-n{white-space:nowrap}
.lg ul{position:absolute;right:0;top:calc(100% + 5px);z-index:30;min-width:172px;
  margin:0;padding:5px 0;list-style:none;background:var(--paper);
  border:1px solid var(--hair);box-shadow:0 8px 26px rgba(0,0,0,.12)}
.lg li{margin:0}
.lg ul a{display:flex;align-items:center;min-height:44px;padding:7px 15px;
  font-family:var(--fs);font-size:14.5px;color:var(--ink-2);text-decoration:none}
.lg ul a:hover{background:var(--paper-2);color:var(--ink)}
.lg ul a[aria-current=true]{color:var(--ink);font-weight:560}

/* ---- enquiry form ----------------------------------------------------- */
.frm{max-width:520px;margin-top:24px}
.fld{margin-bottom:18px}
.fld label{display:block;font-family:var(--fs);font-size:14.5px;font-weight:560;
  color:var(--ink-2);margin-bottom:7px}
.req{color:var(--or-deep);margin-left:3px}
.fld input,.fld textarea{display:block;width:100%;
  font:400 16px/1.5 var(--fs);color:var(--ink);background:var(--paper);
  border:1px solid var(--hair);padding:11px 12px;min-height:46px;border-radius:0}
.fld textarea{min-height:124px;resize:vertical}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--or);
  outline-offset:1px;border-color:var(--ink-2)}
button.btn{cursor:pointer;appearance:none;-webkit-appearance:none;line-height:1.2}
.frm-n{margin-top:15px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lg-flat ul{display:flex;flex-wrap:wrap;gap:4px 20px;list-style:none;margin:0;padding:0;
  align-items:center}
.lg-flat li{margin:0}
.lg-flat a{font-family:var(--fs);font-size:14px;color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:26px;padding:2px 0;
  border-bottom:1px solid transparent}
.lg-flat a:hover{color:var(--ink);border-bottom-color:var(--hair)}
.lg-flat a[aria-current=true]{color:var(--ink);font-weight:560;border-bottom-color:var(--or)}
.ft-lang{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--rule)}
.ft-lang .lbl{margin:0}
@media(max-width:640px){.lg summary{padding:5px 6px}.lg-n{font-size:13.5px}}
.lic-t{display:block;margin-top:7px;color:var(--muted)}
.dis-t{margin-top:16px}
.dis-note{display:block;margin-bottom:5px;color:var(--faint)}
:root[lang="zh-Hant"] body,:root[lang="zh-Hans"] body{line-height:1.72;letter-spacing:0}
:root[lang="zh-Hant"] h1,:root[lang="zh-Hans"] h1{letter-spacing:-.01em;line-height:1.24}
:root[lang="zh-Hant"] h2,:root[lang="zh-Hans"] h2{letter-spacing:-.005em;line-height:1.34}
:root[lang="zh-Hant"] h3,:root[lang="zh-Hans"] h3{letter-spacing:0;line-height:1.4}
:root[lang="zh-Hant"] .dek,:root[lang="zh-Hans"] .dek{line-height:1.68}
:root[lang="zh-Hant"] .lbl,:root[lang="zh-Hans"] .lbl{letter-spacing:.09em}

/* ---- KPI tiles and the illustrative notice ----------------------------- */


/* ---- floating enquiry panel ------------------------------------------- */
/* Austere on purpose: a squared control in the brand ink, not a coloured bubble. */
.fab{position:fixed;right:20px;bottom:20px;z-index:80;transition:opacity .2s ease,visibility .2s}
/* Stood down while the hero's own buttons are on screen, so it never covers them. The
   loader sets data-away; visibility also takes it out of the tab order and the
   accessibility tree, and the fade collapses to nothing under reduced motion. */
.fab[data-away]{opacity:0;visibility:hidden}
.fab-b{display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:13px 20px;min-height:48px;font-family:var(--fs);font-size:15.5px;font-weight:560;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  box-shadow:0 6px 20px rgba(0,0,0,.16)}
.fab-b::-webkit-details-marker{display:none}
.fab-b::marker{content:""}
.fab-b:hover{background:var(--ink-2);border-color:var(--ink-2)}
.fab-b:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.fab-i{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linejoin:round}
.fab-x{display:none}
.fab[open] .fab-t,.fab[open] .fab-i{display:none}
.fab[open] .fab-x{display:block;width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round}
.fab[open] .fab-b{padding:13px}
.fab-p{position:absolute;right:0;bottom:calc(100% + 10px);width:min(370px,calc(100vw - 40px));
  max-height:min(560px,calc(100vh - 140px));overflow-y:auto;
  padding:22px;background:var(--paper);border:1px solid var(--hair);
  box-shadow:0 14px 44px rgba(0,0,0,.20)}
.fab-h{margin:0;font-family:var(--fs);font-size:15.5px;font-weight:560;color:var(--ink)}
.fab-p .frm{margin-top:18px;max-width:none}
.fab-p .fld{margin-bottom:14px}
.fab-p .btns{margin-top:2px}
@media(max-width:600px){
  .fab{right:14px;bottom:14px}
  .fab-b{padding:12px 16px;font-size:15px}
  .fab-p{padding:18px}
}
/* the footer disclaimer must not sit under the control */
.ft{padding-bottom:96px}
/* ---- process timeline -------------------------------------------------- */
.tl{list-style:none;margin:26px 0 0;padding:0;max-width:var(--measure);
  border-left:1px solid var(--rule)}
.tl-i{display:flex;gap:18px;padding:0 0 26px 22px;margin-left:-1px;
  border-left:1px solid transparent;position:relative}
.tl-i::before{content:"";position:absolute;left:-4.5px;top:7px;width:8px;height:8px;
  background:var(--or);border-radius:50%}
.tl-i:last-child{padding-bottom:0}
.tl-d{flex:none;min-width:74px;font-family:var(--fm);font-size:13px;font-weight:500;
  letter-spacing:.02em;color:var(--or-deep);padding-top:2px}
.tl-c{display:block}
.tl-c strong{display:block;font-family:var(--fs);font-size:16px;font-weight:600;
  color:var(--ink);margin-bottom:4px}
.tl-x{display:block;font-family:var(--fs);font-size:14.5px;line-height:1.55;
  color:var(--ink-2)}
@media(max-width:560px){
  .tl-i{flex-direction:column;gap:5px}
  .tl-d{min-width:0}
}

/* ---- before and after -------------------------------------------------- */


/* ---- service matrix ---------------------------------------------------- */
.mx-w{overflow-x:auto;margin-top:26px;max-width:var(--measure)}
.mx{border-collapse:collapse;width:100%;min-width:520px;font-family:var(--fs);
  position:relative}
.mx caption{text-align:left}
.mx th,.mx td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);
  vertical-align:middle}
.mx thead th{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink);
  border-bottom:1px solid var(--hair);white-space:nowrap}
.mx tbody th{font-size:14.5px;font-weight:400;color:var(--ink-2);line-height:1.45}
.mx td{text-align:center;width:1%;white-space:nowrap;position:relative}
.mx-y{color:var(--or-deep);font-size:16px}
.mx-n{color:var(--hair);font-size:16px}
/* Below 600px the table hid its second column in a sideways scroller, which made the
   separately quoted work look like work not offered. The same rows, as two lists. */
.mx-l{display:none;margin-top:26px;max-width:var(--measure)}
.mx-gh{font-size:16.5px;margin:0;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.mx-l .cov{margin:12px 0 0}
.mx-l .cov+.mx-gh{margin-top:28px}
@media(max-width:599px){.mx-w{display:none}.mx-l{display:block}}
/* ---- cookie consent bar ------------------------------------------------ */
/* Hidden until the loader decides one is needed, so someone with JavaScript off is
   never asked and never measured. */
.cb{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--paper);
  border-top:1px solid var(--hair);box-shadow:0 -6px 24px rgba(0,0,0,.10)}
.cb[hidden]{display:none}
.cb-in{max-width:1280px;margin:0 auto;padding:18px clamp(20px,4.5vw,40px);
  display:flex;align-items:center;gap:clamp(16px,3vw,34px);flex-wrap:wrap}
.cb-t{margin:0;flex:1 1 380px;font-family:var(--fs);font-size:14.5px;line-height:1.55;
  color:var(--ink-2)}
.cb-t a{color:var(--ink)}
/* a grid of equal columns, so the two buttons are also the same size */
.cb-b{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;flex:none}
.cb .btn{min-height:44px;padding:11px 22px;font-size:15.5px;
  background:var(--paper);color:var(--ink);border-color:var(--ink);box-shadow:none}
/* Accept and Decline carry the same weight: one button style for both, so declining
   is never the fainter choice. */
.cb .btn:hover{background:var(--paper-2);border-color:var(--ink);color:var(--ink);box-shadow:none}
.cb-y{order:1}
.cb-n{order:2}
/* the footer link that reopens the choice; it is a normal footer link until the
   loader takes it over, so a visitor without JavaScript still lands on the page
   that explains what would have been measured */
.cb-re{cursor:pointer}
/* the floating control steps up so the bar never sits on top of it. The bar's height
   depends on the language and the width, so the loader writes the real figure into
   --cb-h; 92px is only the starting value. */
.cb-on .fab{bottom:calc(var(--cb-h) + 20px)}
/* While the bar is up it covers the bottom of the screen, so a control the keyboard
   moves to there would be focused out of sight (WCAG 2.4.11). Keeping the bar's height
   clear of the area the browser scrolls a focused control into brings it up above. */
:root.cb-on{scroll-padding-bottom:calc(var(--cb-h) + 8px)}
@media(max-width:600px){
  /* Text beside the two buttons, the buttons stacked: 107px tall at 390px in English,
     where text above a full-width button row was 181px and covered the hero CTA. */
  .cb-in{padding:10px 14px;gap:10px;flex-wrap:nowrap}
  .cb-t{flex:1 1 auto;font-size:13px;line-height:1.36}
  .cb-b{grid-auto-flow:row;gap:6px}
  .cb .btn{min-height:40px;padding:6px 12px;font-size:14.5px}
  .cb-on .fab{bottom:calc(var(--cb-h) + 14px)}
}
/* ---- header menu ------------------------------------------------------- */
/* The header is always ONE row: the logo, then the navigation, then the language
   control and the booking button, in the order they come in the markup, so the
   keyboard meets them in the order the eye does. Where the navigation does not fit on
   that row, it is a menu behind a button instead. It used to take a second row of its
   own under the logo, which put it after the language control and the booking button
   on screen but before them in the tab order. The width each language's row fits from
   is ONE_ROW, below; the rules for the two modes are generated from it (css.py, after
   this string), and shots.py tabs through the header to hold the order.
   Below: the row mode, the default. The <details> wrapper does nothing here: the
   summary is hidden and the list is shown. */
.mn{display:contents}
.mn-b{display:none}
/* flex:none so the nav never shrinks below its own content. Without it the CJK
   locales wrapped one character per line at 1440px, which made every nav link a
   16px-wide target and broke SC 2.5.8. */
.mn>nav{display:block;flex:none}
.nv a{white-space:nowrap}
@media(max-width:1239px){
  :where(:root[lang=en-US]) .mn{display:block;position:relative}
  :where(:root[lang=en-US]) .mn-b{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
    padding:7px 11px;min-height:44px;border:1px solid var(--hair);
    font-family:var(--fs);font-size:14.5px;font-weight:560;color:var(--ink-2)}
  :where(:root[lang=en-US]) .mn-b::-webkit-details-marker{display:none}
  :where(:root[lang=en-US]) .mn-b::marker{content:""}
  :where(:root[lang=en-US]) .mn-b:hover,:where(:root[lang=en-US]) .mn[open] .mn-b{color:var(--ink)}
  :where(:root[lang=en-US]) .mn-b:focus-visible{outline:2px solid var(--or);outline-offset:2px}
  :where(:root[lang=en-US]) .mn-i{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round}
  :where(:root[lang=en-US]) .mn>nav{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:210px;
    background:var(--paper);border:1px solid var(--hair);
    box-shadow:0 8px 26px rgba(0,0,0,.12);padding:5px 0}
  :where(:root[lang=en-US]) .mn .nv{display:block}
  :where(:root[lang=en-US]) .mn .nv a{display:flex;align-items:center;min-height:44px;padding:8px 16px;
    border-bottom:0;font-size:15.5px}
  :where(:root[lang=en-US]) .mn .nv a[aria-current=page]{color:var(--ink);font-weight:560;
    box-shadow:inset 2px 0 0 var(--or)}
  :where(:root[lang=en-US]) .hd-in{gap:12px}
  :where(:root[lang=en-US]) .hd-r{gap:10px;flex-wrap:nowrap}
  :where(:root[lang=en-US])[data-open] .fab{opacity:0;visibility:hidden}
}
@media(min-width:1240px){
  :where(:root[lang=en-US]) .mn::details-content{content-visibility:visible;display:contents}
  :where(:root[lang=en-US]) .hd-r{display:contents}
  :where(:root[lang=en-US]) .lock{margin-right:auto}
}
@media(max-width:999px){
  :where(:root[lang=zh-Hant]) .mn{display:block;position:relative}
  :where(:root[lang=zh-Hant]) .mn-b{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
    padding:7px 11px;min-height:44px;border:1px solid var(--hair);
    font-family:var(--fs);font-size:14.5px;font-weight:560;color:var(--ink-2)}
  :where(:root[lang=zh-Hant]) .mn-b::-webkit-details-marker{display:none}
  :where(:root[lang=zh-Hant]) .mn-b::marker{content:""}
  :where(:root[lang=zh-Hant]) .mn-b:hover,:where(:root[lang=zh-Hant]) .mn[open] .mn-b{color:var(--ink)}
  :where(:root[lang=zh-Hant]) .mn-b:focus-visible{outline:2px solid var(--or);outline-offset:2px}
  :where(:root[lang=zh-Hant]) .mn-i{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round}
  :where(:root[lang=zh-Hant]) .mn>nav{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:210px;
    background:var(--paper);border:1px solid var(--hair);
    box-shadow:0 8px 26px rgba(0,0,0,.12);padding:5px 0}
  :where(:root[lang=zh-Hant]) .mn .nv{display:block}
  :where(:root[lang=zh-Hant]) .mn .nv a{display:flex;align-items:center;min-height:44px;padding:8px 16px;
    border-bottom:0;font-size:15.5px}
  :where(:root[lang=zh-Hant]) .mn .nv a[aria-current=page]{color:var(--ink);font-weight:560;
    box-shadow:inset 2px 0 0 var(--or)}
  :where(:root[lang=zh-Hant]) .hd-in{gap:12px}
  :where(:root[lang=zh-Hant]) .hd-r{gap:10px;flex-wrap:nowrap}
  :where(:root[lang=zh-Hant])[data-open] .fab{opacity:0;visibility:hidden}
}
@media(min-width:1000px){
  :where(:root[lang=zh-Hant]) .mn::details-content{content-visibility:visible;display:contents}
  :where(:root[lang=zh-Hant]) .hd-r{display:contents}
  :where(:root[lang=zh-Hant]) .lock{margin-right:auto}
}
@media(max-width:919px){
  :where(:root[lang=zh-Hans]) .mn{display:block;position:relative}
  :where(:root[lang=zh-Hans]) .mn-b{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
    padding:7px 11px;min-height:44px;border:1px solid var(--hair);
    font-family:var(--fs);font-size:14.5px;font-weight:560;color:var(--ink-2)}
  :where(:root[lang=zh-Hans]) .mn-b::-webkit-details-marker{display:none}
  :where(:root[lang=zh-Hans]) .mn-b::marker{content:""}
  :where(:root[lang=zh-Hans]) .mn-b:hover,:where(:root[lang=zh-Hans]) .mn[open] .mn-b{color:var(--ink)}
  :where(:root[lang=zh-Hans]) .mn-b:focus-visible{outline:2px solid var(--or);outline-offset:2px}
  :where(:root[lang=zh-Hans]) .mn-i{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round}
  :where(:root[lang=zh-Hans]) .mn>nav{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:210px;
    background:var(--paper);border:1px solid var(--hair);
    box-shadow:0 8px 26px rgba(0,0,0,.12);padding:5px 0}
  :where(:root[lang=zh-Hans]) .mn .nv{display:block}
  :where(:root[lang=zh-Hans]) .mn .nv a{display:flex;align-items:center;min-height:44px;padding:8px 16px;
    border-bottom:0;font-size:15.5px}
  :where(:root[lang=zh-Hans]) .mn .nv a[aria-current=page]{color:var(--ink);font-weight:560;
    box-shadow:inset 2px 0 0 var(--or)}
  :where(:root[lang=zh-Hans]) .hd-in{gap:12px}
  :where(:root[lang=zh-Hans]) .hd-r{gap:10px;flex-wrap:nowrap}
  :where(:root[lang=zh-Hans])[data-open] .fab{opacity:0;visibility:hidden}
}
@media(min-width:920px){
  :where(:root[lang=zh-Hans]) .mn::details-content{content-visibility:visible;display:contents}
  :where(:root[lang=zh-Hans]) .hd-r{display:contents}
  :where(:root[lang=zh-Hans]) .lock{margin-right:auto}
}
@media(max-width:1279px){
  :where(:root[lang=fil]) .mn{display:block;position:relative}
  :where(:root[lang=fil]) .mn-b{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
    padding:7px 11px;min-height:44px;border:1px solid var(--hair);
    font-family:var(--fs);font-size:14.5px;font-weight:560;color:var(--ink-2)}
  :where(:root[lang=fil]) .mn-b::-webkit-details-marker{display:none}
  :where(:root[lang=fil]) .mn-b::marker{content:""}
  :where(:root[lang=fil]) .mn-b:hover,:where(:root[lang=fil]) .mn[open] .mn-b{color:var(--ink)}
  :where(:root[lang=fil]) .mn-b:focus-visible{outline:2px solid var(--or);outline-offset:2px}
  :where(:root[lang=fil]) .mn-i{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round}
  :where(:root[lang=fil]) .mn>nav{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:210px;
    background:var(--paper);border:1px solid var(--hair);
    box-shadow:0 8px 26px rgba(0,0,0,.12);padding:5px 0}
  :where(:root[lang=fil]) .mn .nv{display:block}
  :where(:root[lang=fil]) .mn .nv a{display:flex;align-items:center;min-height:44px;padding:8px 16px;
    border-bottom:0;font-size:15.5px}
  :where(:root[lang=fil]) .mn .nv a[aria-current=page]{color:var(--ink);font-weight:560;
    box-shadow:inset 2px 0 0 var(--or)}
  :where(:root[lang=fil]) .hd-in{gap:12px}
  :where(:root[lang=fil]) .hd-r{gap:10px;flex-wrap:nowrap}
  :where(:root[lang=fil])[data-open] .fab{opacity:0;visibility:hidden}
}
@media(min-width:1280px){
  :where(:root[lang=fil]) .mn::details-content{content-visibility:visible;display:contents}
  :where(:root[lang=fil]) .hd-r{display:contents}
  :where(:root[lang=fil]) .lock{margin-right:auto}

  :where(:root[lang=fil]) .nv{column-gap:18px}
}
@media(max-width:720px){
  .hd-bk{display:none}
  .mn .mn-bk{display:flex;margin:8px 16px 11px}
}
/* An open menu or language list lifts the header above the floating button (80) and
   the cookie bar (95). On a short phone the foot of the menu, where the booking link
   is, otherwise sat under the bar on a first visit. Wherever the menu is in use the
   floating button stands down as well while one is open (in the menu rules), so it
   cannot sit on the menu's rows. The loader sets data-open on <html> from each header
   <details>' toggle event, so this does not depend on :has() support. */
:root[data-open] .hd{z-index:100}
/* ---- on this page ------------------------------------------------------ */
.toc{max-width:1280px;margin:0 auto;padding:26px clamp(20px,4.5vw,40px)}
.toc .lbl{margin-bottom:12px}
.toc ul{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:0;padding:0}
.toc li{margin:0}
.toc a{font-family:var(--fs);font-size:14.5px;color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:26px;
  border-bottom:1px solid var(--hair)}
.toc a:hover{color:var(--ink);border-bottom-color:var(--or)}
h2[id]{scroll-margin-top:24px}
/* ---- three-column fact table ------------------------------------------- */
.t3-w{overflow-x:auto;margin-top:26px;max-width:var(--measure)}
.t3{border-collapse:collapse;width:100%;min-width:540px;font-family:var(--fs);
  position:relative}
.t3 th,.t3 td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule);
  vertical-align:top;font-size:14.5px;line-height:1.5}
.t3 thead th{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink);
  border-bottom:1px solid var(--hair);white-space:nowrap}
.t3 tbody th{font-weight:560;color:var(--ink);width:32%}
.t3 td{color:var(--ink-2)}
/* Below 600px the 540px table scrolled sideways on every phone. The same rows as a
   list instead: the first column is the item, the other two its labelled facts. */
.t3-l{display:none;margin-top:26px;max-width:var(--measure)}
.t3-d{margin:4px 0 0}
.t3-d dt{margin:10px 0 2px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:var(--muted)}
.t3-d dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
@media(max-width:599px){.t3-w{display:none}.t3-l{display:block}}

/* Finite motion: the content remains visible without scripting or animation. */
.hero-a .lic{margin-top:24px;font-size:.875rem}
.hero-t .dek{max-width:46ch;font-family:var(--fs);font-size:1.125rem;line-height:1.65}
.hero-t .ac{color:var(--or-deep)}
.menu>a{transition:padding .2s ease,background .2s ease}
.menu>a:hover{padding-left:14px;padding-right:14px;background:var(--paper-2)}
.menu>a:focus-visible{outline-offset:4px}
.cta{max-width:none;border-radius:6px;padding:clamp(28px,5vw,64px)}
.cta .dek{max-width:52ch}
@media(prefers-reduced-motion:no-preference){
 @keyframes arrive{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
 @keyframes connect{0%,100%{box-shadow:inset 0 -3px transparent}45%{box-shadow:inset 0 -3px var(--or-deep);transform:translateY(-3px)}}
 .hero-t{animation:arrive 1s ease-out both}
 .hero-a{animation:arrive 1.2s .12s ease-out both}
   }
@media(max-width:480px){
 .hd-in{align-items:flex-start}.hd-r{width:100%;justify-content:space-between}
 /* The two hero buttons stack, one full-width row each. Side by side they split
    414px in two, and the booking button's label broke over three to five lines. */
 .hero .btns{align-items:stretch}.hero .btns .btn{flex:1 1 100%}
 /* Here the menu button sits at the left of its own row, so a panel hung from the
    button's right edge opened 102px off the left of the screen. It hangs from the
    header instead, gutter to gutter, which holds at any width and in any language. */
 .mn{position:static}
 .mn>nav{left:var(--gut);right:var(--gut);min-width:0}
 }

@media(prefers-reduced-motion:no-preference){
 @keyframes rise{from{transform:translateY(26px);opacity:.2}to{transform:translateY(0);opacity:1}}
 [data-revealed]{animation:rise .75s ease-out both}
}

/* ---- the big number + magnitude bars (landing) ------------------------- */
.stat{font-family:var(--fs);font-weight:530;font-size:clamp(58px,9.4vw,116px);
  line-height:.9;letter-spacing:-.045em;color:var(--ink);margin:0 0 6px;
  font-variant-numeric:tabular-nums}
.stat-x{font-family:var(--fs);font-size:18.5px;line-height:1.45;color:var(--ink-2);
  max-width:26ch;margin:0}
.stat-w{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;max-width:var(--measure);margin-bottom:38px}
@media(max-width:720px){.stat-w{grid-template-columns:1fr;gap:14px;align-items:start}}

/* ---- distribution ------------------------------------------------------ */
.dist{max-width:var(--measure);margin-top:26px}
.dist-r{display:grid;grid-template-columns:1fr 104px;gap:5px 16px;align-items:center;
  padding:15px 0;border-top:1px solid var(--rule)}
.dist-r:first-child{border-top:0}
.dist-l{grid-column:1;margin:0;font-family:var(--fs);font-size:14.5px;color:var(--ink-2)}
.dist-v{grid-column:2;grid-row:1 / span 2;margin:0;text-align:right;
  font-family:var(--fm);font-size:19px;color:var(--ink-2)}
/* The track is an SVG and the fill its rectangle, sized by the rectangle's own width
   attribute (a share of the track's inner width), so no inline style is needed. */
.dist-t{grid-column:1;display:block;width:100%;height:8px;background:var(--paper-2);
  border:1px solid var(--rule)}
/* The fill is at least 3:1 against the track in both themes, so the lengths can be
   told apart, not only read from the figures beside them. */
.dist-f{fill:var(--faint)}
.dist-us .dist-l{color:var(--ink);font-weight:560}
.dist-us .dist-v{color:var(--or-deep);font-weight:500}
.dist-us .dist-f{fill:var(--or)}

.btn:not(.cb-y):not(.cb-n):not(.hd-bk):not(.mn-bk)::after{content:"↗";display:inline-block;margin-left:16px;transition:transform .25s ease;font-size:1.1em}
.btn:hover::after{transform:translate(3px,-3px)}
.hero-a{border:0;border-radius:0;background:transparent;border-left:1px solid var(--hair);padding-top:0;padding-bottom:0}
@media(max-width:900px){.hero-a{border-left:0;border-top:1px solid var(--hair);padding-top:26px}}

.workflow{margin:0 0 30px;padding:22px;background:var(--paper-2);border:1px solid var(--rule);border-radius:8px}
.workflow-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.workflow-top .lbl{margin:0;font-size:.75rem;letter-spacing:.08em}
.workflow-replay{font:500 .8125rem/1.4 var(--fs);color:var(--ink-2);background:none;border:0;border-bottom:1px solid var(--hair);padding:7px 0;min-height:32px;cursor:pointer}
.workflow-steps{list-style:none;margin:0;padding:0}
.workflow-step{display:grid;grid-template-columns:28px 1fr;gap:10px;margin:0;padding:13px 0;border-top:1px solid var(--hair)}
.workflow-step:last-child{padding-bottom:0}
.workflow-number{font:400 .8125rem/1.6 var(--fm);color:var(--or-deep)}
.workflow-step strong{font:500 1rem/1.4 var(--fs);display:block}
.workflow-step p{font:400 .8125rem/1.5 var(--fs);margin:6px 0 0;color:var(--ink-2)}
.workflow-docs{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.workflow-docs span{font:400 .75rem/1.4 var(--fs);padding:7px 8px;background:var(--paper);border:1px solid var(--hair);border-radius:3px}
.workflow-summary{font:400 .8125rem/1.7 var(--fs);margin:9px 0 0;padding:9px 12px;background:var(--paper);border-left:2px solid var(--or-deep)}
.workflow-summary span{display:block}
@media(prefers-reduced-motion:no-preference){
 @keyframes workflow-step{0%{opacity:.25;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
 @keyframes workflow-doc{0%{opacity:.3;transform:translateX(-10px) rotate(-4deg)}100%{opacity:1;transform:none}}
 .workflow[data-playing] .workflow-step{animation:workflow-step .85s ease both}
 .workflow[data-playing] .workflow-step:nth-child(2){animation-delay:1.35s}
 .workflow[data-playing] .workflow-step:nth-child(3){animation-delay:2.8s}
 .workflow[data-playing] .workflow-docs span{animation:workflow-doc .8s .25s ease both}
 .workflow[data-playing] .workflow-docs span:nth-child(2){animation-delay:.5s}
 .workflow[data-playing] .workflow-docs span:nth-child(3){animation-delay:.75s}
 .workflow[data-playing] .workflow-summary{animation:workflow-step 1s 3.6s ease both}
}