/* quanticdata.io/web-unlocker/ (4 Nov 2026) and /web-unlocker/status/ (11 Nov 2026): the Web Unlocker pages in
   the integrations layout (/integrations/integrations.css: flat surfaces, hairlines, two dark islands, teal only
   on the CTA, no gradients, no violet). Written for web-unlocker-build.mjs; scoped to main.ig.wu. */

/* ── hero: copy left, the 403 → 200 card right, the measured facts under both ─────────── */
main.ig.wu .wu-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
main.ig.wu .wu-flip{margin:0;padding:22px 22px 18px;border:1px solid rgba(232,236,245,.14);border-radius:20px;background:rgba(255,255,255,.05)}
main.ig.wu .wu-flip-row{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0}
main.ig.wu .wu-flip-row+.wu-flip-row{border-top:1px solid rgba(232,236,245,.12)}
main.ig.wu .wu-flip-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:34px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
main.ig.wu .wu-flip-before{color:var(--ig-on-dark-2)}
main.ig.wu .wu-flip-before .wu-flip-code{opacity:.55;text-decoration:line-through;text-decoration-thickness:2px}
main.ig.wu .wu-flip-after{color:#fff}
main.ig.wu .wu-flip-row p{margin:0;font-size:15.5px;line-height:1.5}
main.ig.wu .wu-flip-row b{display:block;font-family:var(--font-head);font-weight:600;font-size:16px;margin-bottom:2px}
html.qd-fresh main.ig.wu .wu-flip figcaption{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(232,236,245,.12);font-size:14px;line-height:1.55;color:var(--ig-on-dark-2)}
main.ig.wu .wu-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:44px 0 0;padding:32px 0 0;border-top:1px solid rgba(232,236,245,.14)}
main.ig.wu .wu-stats div{margin:0}
main.ig.wu .wu-stats dt{font-family:var(--font-head);font-weight:600;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
main.ig.wu .wu-stats dd{margin:10px 0 0;font-size:15px;line-height:1.4;color:var(--ig-on-dark-2)}
/* the offer (price, pay per success, free trial): printed only when data/unlocker-offer.json says so */
main.ig.wu .wu-offer{list-style:none;margin:26px 0 0;padding:0;max-width:62ch;border-top:1px solid rgba(232,236,245,.14)}
main.ig.wu .wu-offer li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4px 20px;align-items:baseline;margin:0;padding:11px 0;border-bottom:1px solid rgba(232,236,245,.14)}
html.qd-fresh main.ig.wu .wu-offer b{font-family:var(--font-head);font-weight:600;font-size:17px;line-height:1.35;color:#fff}
html.qd-fresh main.ig.wu .wu-offer span{font-size:15px;line-height:1.5;color:var(--ig-on-dark-2)}

/* ── "On this page" under the hero: plain links, teal stays on the CTA ─────────────── */
main.ig.wu .wu-toc{display:flex;flex-wrap:wrap;gap:6px 0;padding-top:18px;padding-bottom:4px;font-size:14.5px;line-height:1.5;color:var(--ig-muted)}
main.ig.wu .wu-toc a{color:var(--ig-text);text-decoration:none;padding:4px 0}
main.ig.wu .wu-toc a:hover{text-decoration:underline;text-underline-offset:3px}
main.ig.wu .wu-toc a+a::before{content:"·";margin:0 10px;color:var(--ig-muted)}

/* ── proof table ────────────────────────────────────────────────────────────────────── */
main.ig.wu .ig-table td.wu-num,main.ig.wu .ig-table th.wu-num{text-align:right}
main.ig.wu .ig-table tr.wu-total :is(th,td){font-weight:600;color:var(--ig-ink);border-top:2px solid var(--ig-line-2)}
/* "How we measure": heading left, the method right, under the table */
main.ig.wu .wu-method{margin-top:44px}
html.qd-fresh main.ig.wu .wu-method h3{margin:0;max-width:16ch;font-family:var(--font-head);font-weight:600;font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.02em;color:var(--ig-ink)}
html.qd-fresh main.ig.wu .ig-row-body>ul+p.ig-note{margin-top:18px;margin-bottom:0}

/* ── how it works: three numbered steps and the figure ───────────────────────────────── */
main.ig.wu .wu-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
main.ig.wu .wu-steps li{margin:0;padding-top:18px;border-top:1px solid var(--ig-ink)}
main.ig.wu .wu-steps li>span{font-family:var(--font-head);font-weight:600;font-size:34px;letter-spacing:-.02em;color:var(--ig-ink)}
html.qd-fresh main.ig.wu .wu-steps h3{margin:10px 0 0;font-family:var(--font-head);font-weight:600;font-size:18.5px;line-height:1.3;color:var(--ig-ink)}
html.qd-fresh main.ig.wu .wu-steps p{margin:8px 0 0;font-size:15.5px;line-height:1.62;color:var(--ig-text)}
main.ig.wu .wu-steps code,main.ig.wu .wu-feats code,main.ig.wu .ig-row-body code,main.ig.wu .ig-faq code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;padding:1px 5px;border-radius:6px;background:rgba(14,18,32,.06);color:var(--ig-ink)}
main.ig.wu .wu-figure{margin:44px 0 0}
main.ig.wu .wu-figure img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--ig-line)}
html.qd-fresh main.ig.wu .wu-figure figcaption{margin:12px 4px 0;font-size:14.5px;line-height:1.55;color:var(--ig-muted)}

/* ── the three ways in, each with its code tabs ──────────────────────────────────────── */
main.ig.wu .wu-ways{margin:12px 0 0}
main.ig.wu .wu-way{padding:36px 0 40px;border-top:1px solid var(--ig-line)}
main.ig.wu .wu-way:first-child{border-top:0;padding-top:28px}
html.qd-fresh main.ig.wu .wu-way h3{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--font-head);font-weight:600;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:var(--ig-ink)}
main.ig.wu .wu-way h3 span{font:600 12.5px/1.2 var(--font-body);letter-spacing:.02em;text-transform:uppercase;color:var(--ig-muted);border:1px solid var(--ig-line-2);border-radius:999px;padding:4px 9px}
html.qd-fresh main.ig.wu .wu-way>p{margin:10px 0 0;max-width:72ch;font-size:17px;line-height:1.65;color:var(--ig-text)}
main.ig.wu .wu-endpoint{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:1.5;color:var(--ig-ink);overflow-wrap:anywhere}
main.ig.wu .wu-endpoint code{display:inline-block;padding:6px 10px;border-radius:8px;background:var(--ig-light);border:1px solid var(--ig-line)}
main.ig.wu .wu-endpoint span{color:var(--ig-muted);font-family:var(--font-body);font-size:14.5px}
main.ig.wu .wu-code{margin:16px 0 0;max-width:880px}
main.ig.wu .wu-code .code-tabs{gap:4px;padding:9px;flex-wrap:wrap}
main.ig.wu .wu-code .code-tabs .tab{border:0;background:none;cursor:pointer;border-radius:8px;padding:7px 11px;font:600 13px/1.2 var(--font-body);min-height:32px}
main.ig.wu .wu-code .code-tabs .tab:focus-visible{outline:2px solid #a7f3d0;outline-offset:1px}
main.ig.wu .wu-code .code-body{margin:0;padding:18px 20px;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;overflow-x:auto;tab-size:4}
main.ig.wu .wu-code .code-body.hidden{display:none}

/* ── beyond one fetch: actions, batches, cache, clients (same white band as the three ways in) ── */
main.ig.wu .wu-feats-band{padding-top:0}
main.ig.wu .wu-feats-band>.ig-wrap::before{content:"";display:block;border-top:1px solid var(--ig-line);margin-bottom:72px}
main.ig.wu .wu-feats{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
main.ig.wu .wu-feats li{margin:0;padding:24px 0 26px;border-top:1px solid var(--ig-line)}
html.qd-fresh main.ig.wu .wu-feats h3{margin:0;font-family:var(--font-head);font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.01em;color:var(--ig-ink)}
html.qd-fresh main.ig.wu .wu-feats p{margin:8px 0 0;max-width:60ch;font-size:16px;line-height:1.65;color:var(--ig-text)}
main.ig.wu .wu-feats code{overflow-wrap:anywhere}
main.ig.wu .wu-feats a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ig-line-2);font-weight:600;white-space:nowrap}
main.ig.wu .wu-feats a:hover{text-decoration-color:currentColor}

/* ── pricing: the rate of each tier, from the offer file ─────────────────────────────── */
main.ig.wu .wu-price{margin:4px 0 16px}
main.ig.wu .wu-price table{min-width:0}

/* ── /web-unlocker/status/: the state line and the meta line ─────────────────────────── */
main.ig.wu .wu-state{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:22px 0 0;padding:8px 14px;border:1px solid rgba(232,236,245,.28);border-radius:999px;font-size:15px;line-height:1.3}
main.ig.wu .wu-state[hidden]{display:none}
main.ig.wu .wu-state-dot{flex:none;width:9px;height:9px;box-sizing:border-box;border-radius:50%;background:#fff}
main.ig.wu .wu-state:not([data-state="operational"]) .wu-state-dot{background:transparent;border:1.5px solid var(--ig-on-dark-2)}
html.qd-fresh main.ig.wu .wu-state b{font-weight:600;color:#fff}
html.qd-fresh main.ig.wu .wu-state .wu-state-when{color:var(--ig-on-dark-2)}
main.ig.wu .wu-state .wu-state-when:empty{display:none}
html.qd-fresh main.ig.wu .wu-st-meta{margin:22px 0 0;font-size:14.5px;line-height:1.6;color:var(--ig-muted)}
main.ig.wu .wu-st-meta a{text-decoration:underline;text-underline-offset:3px}
main.ig.wu .wu-st-meta time{white-space:nowrap}
/* a number the status script refreshes never breaks between the figure and its unit */
main.ig.wu.wu-st [data-f]{white-space:nowrap}

/* ── the dashboard video ─────────────────────────────────────────────────────────────── */
main.ig.wu .wu-video{margin:36px 0 0}
main.ig.wu .wu-video video{display:block;width:100%;height:auto;border-radius:16px;background:#0B1020;border:1px solid var(--ig-line)}
html.qd-fresh main.ig.wu .wu-video figcaption{margin:12px 4px 0;font-size:14.5px;line-height:1.55;color:var(--ig-muted)}

/* ── related links under the closing CTA, byline and sources ─────────────────────────── */
main.ig.wu .wu-also{display:flex;flex-wrap:wrap;gap:8px 0;margin:28px 0 0;font-size:15px;line-height:1.5;color:var(--ig-muted)}
main.ig.wu .wu-also span{margin-right:12px;font-weight:600}
main.ig.wu .wu-also a{color:var(--ig-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ig-line-2)}
main.ig.wu .wu-also a+a::before{content:"·";margin:0 10px;color:var(--ig-muted);text-decoration:none}
main.ig.wu .wu-also a:hover{text-decoration-color:currentColor}
main.ig.wu .wu-sources{padding-top:56px;padding-bottom:72px}
html.qd-fresh main.ig.wu .wu-sources h2{margin:0;font-family:var(--font-head);font-weight:600;font-size:20px;line-height:1.3;color:var(--ig-ink)}
html.qd-fresh main.ig.wu .wu-sources .wu-byline{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--ig-muted)}
main.ig.wu .wu-sources .wu-byline a{text-decoration:underline;text-underline-offset:3px}
main.ig.wu .wu-sources .wu-byline time{white-space:nowrap}
main.ig.wu .wu-sources ul{margin:18px 0 0}

/* ── block pages (web-unlocker-blocks-build.mjs): lookup tables of four and five columns. The first column is a
   sentence, so it wraps; under the width of the table the region scrolls sideways, the type never shrinks ──── */
main.ig.wu .wu-dict table{min-width:920px}
html.qd-fresh main.ig.wu .wu-dict tbody th{white-space:normal;min-width:200px}
main.ig.wu .wu-dict td:nth-last-child(2){min-width:230px}
main.ig.wu .wu-dict td:last-child{min-width:130px}

/* ── tablet and phone ───────────────────────────────────────────────────────────────── */
@media (max-width:1023px){
  main.ig.wu .wu-hero-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  main.ig.wu .wu-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  main.ig.wu .wu-state{border-radius:14px}
  main.ig.wu .wu-offer li{grid-template-columns:minmax(0,1fr)}
  main.ig.wu .wu-feats{grid-template-columns:minmax(0,1fr)}
  main.ig.wu .wu-feats-band>.ig-wrap::before{margin-bottom:48px}
  main.ig.wu .wu-method{margin-top:32px}
  main.ig.wu .wu-stats{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:28px;padding-top:24px}
  main.ig.wu .wu-steps{grid-template-columns:minmax(0,1fr);gap:22px}
  main.ig.wu .wu-flip{padding:18px 16px 14px}
  main.ig.wu .wu-flip-row{grid-template-columns:64px minmax(0,1fr);gap:12px}
  main.ig.wu .wu-flip-code{font-size:28px}
  main.ig.wu .wu-way{padding:28px 0 32px}
  main.ig.wu .wu-code .code-body{padding:14px 14px;font-size:12.5px}
  main.ig.wu .wu-also a+a::before{margin:0 8px}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   The system guides (/web-unlocker/bypass-<system>/, web-unlocker-guides-build.mjs) and the block pages
   (/web-unlocker/block-pages/ and one page per phrase or code, web-unlocker-blocks-build.mjs). 11 Nov 2026,
   Aldo: «le page falle più serie, hero più seria e più leggibile il resto della pagina».

   Every rule below starts with main.ig.wu.wu-guide (the block pages carry wu-guide and wu-block): the hub
   (main.ig.wu) and the status page (main.ig.wu.wu-st) never match, and no rule above this line was changed.

   One white sheet. The dark island holds the title, then the lead and the one teal action beside the measured
   facts, and closes inside the first screen. Under it every section sits on one grid: the heading on the left
   (it stays in view while its section scrolls), the text on the right in a column of 65-75 characters, a hairline
   between sections. Tables are flat and ruled; the wide ones (comparison, dictionary) and the figure run across
   the sheet. One left edge: the text of the island, the headings, the wide tables, the figure, the closing island.
   Type: h1 48 (40 for a long title), h2 28, h3 20, opening line 18.5, text 17.5, tables 17 (16 from four columns),
   table header 15, eyebrow 14 on every width. Phone: h1 27-29, h2 24, text 17; tables become labelled records;
   the contents are a ruled list under the island, one link a line.
   No gradient fill, no violet, no glow; teal only on the action.

   Second pass, same day (the words did not change):
   - two right edges, not four: the text, the opening line, the ruled lists, the notes and the records end on
     --wg-measure; tables, code and the questions use the column;
   - the figure is a <picture>: the wide render from 1024px, a second render of the same scene stacked top to
     bottom under it (diagram-phone.webp, scene kit), never the wide one panned or shrunk;
   - code wraps inside its card at every width; table cells take proportional figures (the tabular ones of
     integrations.css widen every hyphen);
   - under 1200px the tables of four and five columns are records in the text column: at that width a real
     table had cells of five short lines; from 1200px the Status column is as wide as its chip;
   - on a short screen (880px or less) the island and the first section close up, so the first heading of the
     page is above the fold at 1280x800;
   - phone: one form of the action on every page (the button, then the link under it on the text edge), the
     title a step smaller on 360px, the facts and the link clear of the assistant button at any scroll.

   Third pass, 12 Nov 2026 (review of the second; the words did not change): nothing scrolls sideways, at any
   width.
   - the contents under 1024px are no strip any more: the links wrap under their label on a tablet and are a
     ruled list on a phone, and they scroll away with the page. Their words end before the column of the
     assistant button;
   - a line of code that is longer than its card goes on under itself, two characters in from where the line
     starts, and breaks after a slash or before a quoted value instead of inside a word (guides.js gives every
     written line its own box; without the script the sample wraps as before);
   - under 1024px the figure is the stacked render, in the middle of the column from 481px: on a tablet the
     labels of the wide render were 7 to 8.5px;
   - 375 and 360px phones, and any phone screen of 700px or less in height (375x667), set the title one step
     down: the longest title keeps to three lines and the big figure is on the first screen there too;
   - a name in the lead of the island ("aws-waf-token") stays whole: its chip broke in two after a hyphen.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
html.qd-fresh main.ig.wu.wu-guide{
  --wg-in:56px;                                   /* from the edge of an island, or of the sheet, to the text */
  --wg-l:280px;                                   /* heading column */
  --wg-gap:56px;                                  /* between the heading and the text */
  --wg-measure:37rem;                             /* 592px: 65-73 characters at 17.5px, the one right edge of the text */
  --wg-pad:64px;                                  /* above the first line of a section */
  --wg-nav:calc(var(--qn-nav,72px) + 1px);        /* the sticky site nav and its hairline */
  --wg-top:var(--wg-nav);                         /* what stays stuck at the top: the nav, plus the strip under 1024px */
  --wg-rule:rgba(14,18,32,.12);
  --wg-dark-rule:rgba(232,236,245,.16);
  --wg-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#fff;
}
/* a link to a section lands with its heading 24px under what is stuck at the top */
html.qd-fresh main.ig.wu.wu-guide [id]{scroll-margin-top:calc(var(--wg-top) + 24px)}
html.qd-fresh main.ig.wu.wu-guide :is(.ig-band[id],.ig-row+.ig-row[id]){scroll-margin-top:calc(var(--wg-top) + 24px - var(--wg-pad))}

/* ── hero: crumbs, title, then the lead and the action beside the measured facts ───────────────────────────── */
html.qd-fresh main.ig.wu.wu-guide .section.ig-hero-band{padding:16px 0 0}
html.qd-fresh main.ig.wu.wu-guide .ig-hero{padding:26px var(--wg-in) 44px}
html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-crumbs{font-size:14px;line-height:20px;color:var(--ig-on-dark-2)}
html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-eyebrow{margin:30px 0 0;font-size:14px;line-height:18px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ig-on-dark-2)}
html.qd-fresh main.ig.wu.wu-guide .ig-hero h1{margin:12px 0 0;max-width:21em;font-family:var(--font-head);font-weight:600;font-size:clamp(34px,3.35vw,48px);line-height:1.08;letter-spacing:-.03em;color:#fff;text-wrap:balance}
html.qd-fresh main.ig.wu.wu-guide .ig-hero h1.wu-h1-long{max-width:25em;font-size:clamp(30px,2.8vw,40px);line-height:1.12;letter-spacing:-.026em}
html.qd-fresh main.ig.wu.wu-guide .wu-hero-lower{margin:30px 0 0;padding:30px 0 0;border-top:1px solid var(--wg-dark-rule)}
html.qd-fresh main.ig.wu.wu-guide .wu-hero-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);column-gap:76px;align-items:start}
html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-lead{margin:0;max-width:592px;font-size:18px;line-height:1.6;color:#CDD3E1}
html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-lead code{font-family:var(--wg-mono);font-size:.875em;padding:1px 6px;border:0;border-radius:5px;background:rgba(232,236,245,.12);color:#fff;white-space:nowrap}
html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-cta-row{margin-top:26px;gap:8px 26px}
html.qd-fresh main.ig.wu.wu-guide .ig-hero .btn-cta{min-height:48px;padding:0 24px;font-weight:600}
/* the second action of the island is a link, not a second button */
html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-btn-ghost{min-height:48px;padding:0 2px;border:0;border-radius:4px;background:none;font-weight:600;font-size:16px;color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(232,236,245,.5)}
html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-btn-ghost:hover{background:none;text-decoration-color:#fff}
html.qd-fresh main.ig.wu.wu-guide .ig-hero :is(.btn-cta,.ig-btn-ghost):focus-visible{outline:2px solid #fff;outline-offset:3px}

/* the measured facts: the first one large with its caption under it, the others as ruled rows */
html.qd-fresh main.ig.wu.wu-guide .wu-stats{display:block;margin:0;padding:0;border:0}
html.qd-fresh main.ig.wu.wu-guide .wu-stats div{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:18px;align-items:baseline;margin:0;padding:14px 0;border-top:1px solid var(--wg-dark-rule)}
html.qd-fresh main.ig.wu.wu-guide .wu-stats div:first-child{display:block;padding:0 0 20px;border-top:0}
html.qd-fresh main.ig.wu.wu-guide .wu-stats div:last-child{padding-bottom:0}
html.qd-fresh main.ig.wu.wu-guide .wu-stats dt{font-family:var(--font-head);font-weight:600;font-size:26px;line-height:30px;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
html.qd-fresh main.ig.wu.wu-guide .wu-stats div:first-child dt{font-size:54px;line-height:1;letter-spacing:-.035em}
html.qd-fresh main.ig.wu.wu-guide .wu-stats dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--ig-on-dark-2)}
html.qd-fresh main.ig.wu.wu-guide .wu-stats div:first-child dd{margin:12px 0 0;font-size:16px;line-height:1.5}

/* ── on this page: one row under the island; the label is the nav's own aria-label ──────────────────────────── */
html.qd-fresh main.ig.wu.wu-guide .wu-toc{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin:0;padding:10px max(calc(20px + var(--wg-in)),calc(50% - 580px + var(--wg-in)));font-size:14.5px;line-height:1.3;color:var(--ig-text)}
html.qd-fresh main.ig.wu.wu-guide .wu-toc::before{content:attr(aria-label);margin-right:6px;font-weight:600;color:var(--ig-ink)}
html.qd-fresh main.ig.wu.wu-guide .wu-toc a{display:inline-flex;align-items:center;min-height:44px;padding:0;color:var(--ig-text);text-decoration:none}
html.qd-fresh main.ig.wu.wu-guide .wu-toc a:hover{color:var(--ig-ink);text-decoration:underline;text-underline-offset:4px}
html.qd-fresh main.ig.wu.wu-guide .wu-toc a:focus-visible{outline:2px solid var(--ig-ink);outline-offset:2px}
html.qd-fresh main.ig.wu.wu-guide .wu-toc a+a::before{content:none}
/* the button guides.js puts in front of the links is for phones only (see the rules at 720px and below) */
html.qd-fresh main.ig.wu.wu-guide .wu-toc-btn{display:none}

/* ── the sheet: every section in the same box, a hairline between two sections ──────────────────────────────── */
html.qd-fresh main.ig.wu.wu-guide .section.ig-band{padding:0;background:#fff}
html.qd-fresh main.ig.wu.wu-guide .ig-band>.ig-wrap{position:relative;max-width:1160px;margin:0 auto;padding:var(--wg-pad) var(--wg-in) 68px}
html.qd-fresh main.ig.wu.wu-guide .ig-band>.ig-wrap::before{content:"";position:absolute;left:var(--wg-in);right:var(--wg-in);top:0;height:1px;background:var(--wg-rule)}

/* headings: one size for a section, one for a subsection */
html.qd-fresh main.ig.wu.wu-guide .ig-row h2{margin:0;max-width:none;font-family:var(--font-head);font-weight:600;font-size:28px;line-height:1.18;letter-spacing:-.022em;color:var(--ig-ink);text-wrap:balance}
html.qd-fresh main.ig.wu.wu-guide .ig-row-body>h3{margin:48px 0 0;font-family:var(--font-head);font-weight:600;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:var(--ig-ink)}

/* a section: heading left, text right. Two sections in one band are separated like two bands */
html.qd-fresh main.ig.wu.wu-guide .ig-row{display:grid;grid-template-columns:var(--wg-l) minmax(0,1fr);gap:0 var(--wg-gap);align-items:start;padding:0;border-top:0}
html.qd-fresh main.ig.wu.wu-guide .ig-row+.ig-row{margin-top:68px;padding-top:var(--wg-pad);border-top:1px solid var(--wg-rule)}
html.qd-fresh main.ig.wu.wu-guide .ig-row-body{min-width:0}
html.qd-fresh main.ig.wu.wu-guide .ig-row-body>:first-child{margin-top:0}

/* text: the first paragraph of a section is its opening line, in ink; the rest at 17.5px. The text, the opening
   line, the ruled lists and the notes end on the same edge (--wg-measure) */
html.qd-fresh main.ig.wu.wu-guide .ig-row-body>p{margin:18px 0 0;max-width:var(--wg-measure);font-size:17.5px;line-height:1.7;color:var(--ig-text)}
html.qd-fresh main.ig.wu.wu-guide .ig-row-body>p:first-child{max-width:var(--wg-measure);font-size:18.5px;line-height:1.58;letter-spacing:-.003em;color:var(--ig-ink)}
html.qd-fresh main.ig.wu.wu-guide .ig-row-body>ul{margin-top:26px}
html.qd-fresh main.ig.wu.wu-guide .ig-dash{max-width:var(--wg-measure)}
html.qd-fresh main.ig.wu.wu-guide .ig-dash li{padding:15px 0 15px 30px;border-bottom:1px solid var(--wg-rule);font-size:17.5px;line-height:1.65;color:var(--ig-text)}
html.qd-fresh main.ig.wu.wu-guide .ig-dash li:first-child{border-top:1px solid var(--wg-rule)}
html.qd-fresh main.ig.wu.wu-guide .ig-dash li::before{top:29px;width:12px;background:var(--ig-muted)}
html.qd-fresh main.ig.wu.wu-guide .ig-dash strong{font-weight:600;color:var(--ig-ink)}
/* a note: a side remark, ruled on the left, never small */
html.qd-fresh main.ig.wu.wu-guide .ig-row-body>p.ig-note{margin:26px 0 0;max-width:var(--wg-measure);padding-left:16px;border-left:2px solid rgba(14,18,32,.2);font-size:17px;line-height:1.62;color:var(--ig-muted)}
html.qd-fresh main.ig.wu.wu-guide .ig-row-body a{color:var(--ig-ink)}

/* a name in a sentence: the face says "this is a name", no box around it */
html.qd-fresh main.ig.wu.wu-guide :is(.ig-row-body,.ig-table) code{display:inline-block;max-width:100%;font-family:var(--wg-mono);font-size:.875em;line-height:1.45;padding:0 5px;border:0;border-radius:5px;background:rgba(14,18,32,.06);color:var(--ig-ink);white-space:normal;overflow-wrap:anywhere;vertical-align:baseline}

/* ── tables: flat and ruled, the header at the contrast of the text ─────────────────────────────────────────── */
html.qd-fresh main.ig.wu.wu-guide .ig-table{margin:30px 0 0;overflow:visible;background:none;border:0;border-radius:0;border-top:1px solid var(--ig-ink);border-bottom:1px solid var(--wg-rule)}
html.qd-fresh main.ig.wu.wu-guide .ig-row-body>h3+.ig-table{margin-top:16px}
html.qd-fresh main.ig.wu.wu-guide .ig-table table{width:100%;min-width:0;border-collapse:collapse;font-size:17px;line-height:1.55}
html.qd-fresh main.ig.wu.wu-guide .ig-table :is(th,td){min-width:0;padding:15px 28px 16px 0;text-align:left;vertical-align:top;color:var(--ig-text);overflow-wrap:break-word}
/* the cells are sentences: proportional figures, or every hyphen takes the width of a digit ("BIG -IP") */
html.qd-fresh main.ig.wu.wu-guide .ig-table td{font-variant-numeric:normal}
html.qd-fresh main.ig.wu.wu-guide .ig-table :is(th,td):last-child{padding-right:0}
html.qd-fresh main.ig.wu.wu-guide .ig-table thead th{padding-top:12px;padding-bottom:12px;font-size:15px;line-height:1.4;font-weight:600;color:var(--ig-ink);border-bottom:1px solid var(--wg-rule);white-space:normal}
html.qd-fresh main.ig.wu.wu-guide .ig-table tbody th{width:27%;font-weight:600;color:var(--ig-ink);white-space:normal}
html.qd-fresh main.ig.wu.wu-guide .ig-table tbody tr+tr :is(th,td){border-top:1px solid var(--wg-rule)}
/* across the sheet, under the heading and its opening line: the comparison and the lookup tables */
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-wide{margin-top:36px}
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp tbody th{width:22%}
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp td{width:39%}
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp :is(th,td){padding-right:36px}
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp :is(th,td):last-child{padding-right:0}
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict table{min-width:0;font-size:16px;line-height:1.5}
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict :is(th,td){padding-right:24px}
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict :is(th,td):last-child{padding-right:0}
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict tbody th{width:auto}
/* the dictionary (What the page says, [what comes with it], System, What it means, Explained on): the browser
   shares the width by content, with a floor under the three columns that carry a sentence or a link */
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict-sys tbody th{min-width:176px}
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict-sys td:nth-last-child(2){min-width:250px}
html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict-sys td:last-child{min-width:150px}
/* any other table of five columns (the captchas) is laid out from 1200px, in the block for the wide desktop */
html.qd-fresh main.ig.wu.wu-guide .ig-table .ig-textlink{font-size:inherit;font-weight:600;color:var(--ig-ink)}

/* ── the call ───────────────────────────────────────────────────────────────────────────────────────────────── */
html.qd-fresh main.ig.wu.wu-guide .wu-code{margin:30px 0 0;max-width:none;box-shadow:none}
html.qd-fresh main.ig.wu.wu-guide .wu-code .code-tabs .tab{min-height:36px;padding:8px 13px;font-size:14px}
html.qd-fresh main.ig.wu.wu-guide .wu-code .qd-code-copy{min-height:32px;font-size:14px}
/* a line longer than the card goes on to the next line: the sample never scrolls sideways, on any screen */
html.qd-fresh main.ig.wu.wu-guide .wu-code .code-body{padding:20px 22px;font:14px/1.7 var(--wg-mono);white-space:pre-wrap;overflow-wrap:anywhere;overflow:visible;tab-size:2}
/* every written line in its own box (guides.js; --wu-ind is the number of spaces the line starts with): what does
   not fit goes on two characters further in than the line starts, so a wrapped line never reads as a new one */
html.qd-fresh main.ig.wu.wu-guide .wu-code .code-body .wu-ln{display:inline-block;box-sizing:border-box;width:100%;vertical-align:top;padding-left:calc((var(--wu-ind,0) + 2) * 1ch);text-indent:calc((var(--wu-ind,0) + 2) * -1ch)}
/* a short name with a hyphen ("Content-Type") stays whole: the browser would break it after the hyphen */
html.qd-fresh main.ig.wu.wu-guide .wu-code .code-body .wu-nb{white-space:nowrap}

/* ── the figure: across the sheet. Two renders of one scene in a <picture>: the wide one from 1024px, the stacked
   one under it (each <source> and the <img> carry their own width and height, so nothing shifts) ──────────── */
html.qd-fresh main.ig.wu.wu-guide .wu-figure{margin:48px 0 0}
html.qd-fresh main.ig.wu.wu-guide .wu-figure picture{display:block}
html.qd-fresh main.ig.wu.wu-guide .wu-figure img{display:block;box-sizing:border-box;width:100%;height:auto;border:1px solid var(--wg-rule);border-radius:16px}
/* the caption: one line of 65-75 characters under the wide figure, and the rest on the next */
html.qd-fresh main.ig.wu.wu-guide .wu-figure figcaption{margin:12px 0 0;max-width:31.5rem;font-size:15px;line-height:1.55;color:var(--ig-muted);text-wrap:pretty}

/* ── questions ──────────────────────────────────────────────────────────────────────────────────────────────── */
html.qd-fresh main.ig.wu.wu-guide .ig-faq details{border-color:var(--wg-rule)}
html.qd-fresh main.ig.wu.wu-guide .ig-faq summary{padding:20px 44px 20px 0}
html.qd-fresh main.ig.wu.wu-guide .ig-faq summary h3{font-size:18px;line-height:1.4}
html.qd-fresh main.ig.wu.wu-guide .ig-faq details p{max-width:var(--wg-measure);padding:0 0 24px;font-size:17.5px;line-height:1.7;color:var(--ig-text)}

/* ── closing island: the same edges as the first one, the offer left and the two actions right ──────────────── */
html.qd-fresh main.ig.wu.wu-guide .ig-final-wrap>.ig-wrap{padding-top:8px;padding-bottom:60px}
html.qd-fresh main.ig.wu.wu-guide .ig-final-wrap>.ig-wrap::before{content:none}
html.qd-fresh main.ig.wu.wu-guide .ig-final{margin:0 calc(-1 * var(--wg-in));padding:44px var(--wg-in) 46px}
html.qd-fresh main.ig.wu.wu-guide .ig-final h2{max-width:none;font-size:28px;line-height:1.18;letter-spacing:-.022em;text-wrap:balance}
html.qd-fresh main.ig.wu.wu-guide .ig-final p{margin:12px 0 0;max-width:32em;font-size:17px;line-height:1.62}
/* related pages: a label and its links */
html.qd-fresh main.ig.wu.wu-guide .wu-also{position:relative;display:flex;flex-wrap:wrap;gap:0 24px;margin:0;padding:14px 0;border-bottom:1px solid var(--wg-rule);font-size:16px;line-height:1.4;color:var(--ig-text)}
html.qd-fresh main.ig.wu.wu-guide .ig-final+.wu-also{margin-top:44px;border-top:1px solid var(--wg-rule)}
html.qd-fresh main.ig.wu.wu-guide .wu-also span{display:inline-flex;align-items:center;min-height:40px;margin:0;font-weight:600;color:var(--ig-ink)}
html.qd-fresh main.ig.wu.wu-guide .wu-also a{display:inline-flex;align-items:center;min-height:40px;color:var(--ig-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(14,18,32,.28)}
html.qd-fresh main.ig.wu.wu-guide .wu-also a:hover{color:var(--ig-ink);text-decoration-color:currentColor}
html.qd-fresh main.ig.wu.wu-guide .wu-also a+a::before{content:none}

/* ── references ─────────────────────────────────────────────────────────────────────────────────────────────── */
html.qd-fresh main.ig.wu.wu-guide .ig-band.wu-sources>.ig-wrap{padding-top:56px;padding-bottom:80px}
html.qd-fresh main.ig.wu.wu-guide .wu-sources>.ig-wrap::before{content:none}
html.qd-fresh main.ig.wu.wu-guide .wu-sources h2{margin:0;font-size:20px;line-height:1.3}
html.qd-fresh main.ig.wu.wu-guide .wu-sources .wu-byline{margin:2px 0 0;max-width:var(--wg-measure);font-size:15.5px;line-height:1.6;color:var(--ig-muted)}
html.qd-fresh main.ig.wu.wu-guide .wu-sources ul{margin:20px 0 0}
html.qd-fresh main.ig.wu.wu-guide .wu-sources .ig-dash li{padding-top:12px;padding-bottom:12px;font-size:17px}
html.qd-fresh main.ig.wu.wu-guide .wu-sources .ig-dash li::before{top:25px}
html.qd-fresh main.ig.wu.wu-guide .wu-sources .ig-dash a{color:var(--ig-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(14,18,32,.28)}

/* ── desktop: the heading stays in view while its section scrolls ───────────────────────────────────────────── */
@media (min-width:1024px){
  html.qd-fresh main.ig.wu.wu-guide .ig-row h2{position:sticky;top:calc(var(--wg-nav) + 28px)}
  html.qd-fresh main.ig.wu.wu-guide .ig-final{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:center}
  html.qd-fresh main.ig.wu.wu-guide .ig-final :is(h2,p){grid-column:1}
  html.qd-fresh main.ig.wu.wu-guide .ig-final .ig-cta-row{grid-column:2;grid-row:1 / span 2;flex-direction:column;align-items:stretch;gap:10px;margin:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-final .ig-cta-row>a{justify-content:center}
  html.qd-fresh main.ig.wu.wu-guide .wu-also{padding-left:calc(var(--wg-l) + var(--wg-gap))}
  html.qd-fresh main.ig.wu.wu-guide .wu-also span{position:absolute;left:0;top:14px}
  html.qd-fresh main.ig.wu.wu-guide .wu-sources>.ig-wrap{display:grid;grid-template-columns:var(--wg-l) minmax(0,1fr);column-gap:var(--wg-gap);align-items:start}
  html.qd-fresh main.ig.wu.wu-guide .wu-sources h2{grid-column:1;grid-row:1 / span 2}
  html.qd-fresh main.ig.wu.wu-guide .wu-sources :is(.wu-byline,ul){grid-column:2}
}
/* a short screen (a 13-inch laptop, 1280x800): the island and the first section close up, so the first heading
   of the page is above the fold */
@media (min-width:1024px) and (max-height:880px){
  html.qd-fresh main.ig.wu.wu-guide .section.ig-hero-band{padding-top:12px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero{padding-top:20px;padding-bottom:34px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-eyebrow{margin-top:20px}
  html.qd-fresh main.ig.wu.wu-guide .wu-hero-lower{margin-top:22px;padding-top:24px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-cta-row{margin-top:22px}
  html.qd-fresh main.ig.wu.wu-guide .wu-stats div{padding-top:11px;padding-bottom:11px}
  html.qd-fresh main.ig.wu.wu-guide .wu-stats div:first-child{padding:0 0 14px}
  html.qd-fresh main.ig.wu.wu-guide .wu-stats div:last-child{padding-bottom:0}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc{padding-top:2px;padding-bottom:2px}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc+.ig-band>.ig-wrap{padding-top:40px}
}
/* shorter still (1366x768, 1024x768): one step more, for the same reason */
@media (min-width:1024px) and (max-height:780px){
  html.qd-fresh main.ig.wu.wu-guide .ig-hero{padding-bottom:28px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-eyebrow{margin-top:16px}
  html.qd-fresh main.ig.wu.wu-guide .wu-hero-lower{margin-top:18px;padding-top:20px}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc+.ig-band>.ig-wrap{padding-top:32px}
}
/* a wide desktop: the dictionary by status code gives its first column the width of the chip */
@media (min-width:1200px){
  html.qd-fresh main.ig.wu.wu-guide #status .ig-table.wu-dict-sys :is(thead th:first-child,tbody th){width:1%;min-width:0;white-space:nowrap}

  /* the five columns of the captchas: three of them are sentences, and five columns left each one 30 characters
     a line. The name keeps the first column with the page that explains it under it; the three sentences share
     the rest, so a line is 35 characters or more and the longest cell is four lines */
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict:not(.wu-dict-sys) :is(table,thead,tbody){display:block}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict:not(.wu-dict-sys) tr{display:grid;grid-template-columns:176px minmax(0,13fr) minmax(0,11fr) minmax(0,14fr);grid-template-rows:auto 1fr;column-gap:28px}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict:not(.wu-dict-sys) :is(th,td){display:block;padding-right:0;border:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict:not(.wu-dict-sys) thead tr{border-bottom:1px solid var(--wg-rule)}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict:not(.wu-dict-sys) thead th:last-child{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict:not(.wu-dict-sys) tbody tr+tr{border-top:1px solid var(--wg-rule)}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict:not(.wu-dict-sys) tbody th{grid-column:1;grid-row:1;padding-bottom:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict:not(.wu-dict-sys) tbody td{grid-row:1 / span 2}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict:not(.wu-dict-sys) tbody td:last-child{grid-column:1;grid-row:2;padding-top:10px}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict:not(.wu-dict-sys) tbody td:last-child::before{content:attr(data-label);display:block;margin:0 0 1px;font-size:14px;line-height:1.4;font-weight:600;color:var(--ig-muted)}
}
/* a narrow desktop: the islands and the sheet keep a margin from the window, and the contents stay on one row */
@media (max-width:1199px){
  html.qd-fresh main.ig.wu.wu-guide .section.ig-hero-band{padding-left:20px;padding-right:20px}
  html.qd-fresh main.ig.wu.wu-guide .section.ig-band{padding-left:20px;padding-right:20px}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc{flex-wrap:nowrap;column-gap:clamp(8px,1.35vw,16px);font-size:14px;white-space:nowrap}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc::before{content:none}

  /* the tables of four and five columns become records: the row title, then each value under the name of its
     column; in the dictionary the system sits beside the page that explains it. In a sheet under 1048px a real
     table had cells of five lines of twenty characters. Nothing scrolls sideways */
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict{max-width:var(--wg-measure);border-bottom:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict :is(table,tbody,th,td){display:block;width:auto;min-width:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict tbody tr{display:block;padding:16px 0 18px;border-bottom:1px solid var(--wg-rule)}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict-sys tbody tr{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:20px}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict tbody :is(th,td){grid-column:1 / -1;min-width:0;padding:0;border:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict tbody th{font-size:17px;line-height:1.4}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict tbody td{order:1;margin-top:12px}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict-sys tbody td:nth-last-child(3){order:2;grid-column:1}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict-sys tbody td:last-child{order:2;grid-column:2}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict-sys tbody td:nth-last-child(2){order:3}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict-sys tbody td:is(:last-child,:nth-last-child(2)){min-width:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict td[data-label]::before{content:attr(data-label);display:block;margin:0 0 2px;font-size:14px;line-height:1.4;font-weight:600;color:var(--ig-muted)}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict .ig-textlink{display:inline-block;margin:-10px 0;padding:10px 0}
}
/* between the tablet and the wide desktop the records sit in the text column, under the opening line */
@media (min-width:1024px) and (max-width:1199px){
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict{margin-left:calc(var(--wg-l) + var(--wg-gap))}
}
/* where the column is less than 48px wider than the measure, the text takes the whole column: one edge, not two
   that nearly meet (the column is 536 to 639px there, 61 to 73 characters) */
@media (min-width:1024px) and (max-width:1127px),(min-width:721px) and (max-width:759px){
  html.qd-fresh main.ig.wu.wu-guide{--wg-measure:100%}
}

/* ── tablet and phone: one column; the contents wrap under their label and scroll away with the page ────────── */
@media (max-width:1023px){
  html.qd-fresh main.ig.wu.wu-guide{--wg-in:40px;--wg-pad:56px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero{padding:22px var(--wg-in) 36px}
  html.qd-fresh main.ig.wu.wu-guide .wu-hero-facts{grid-template-columns:minmax(0,1fr);row-gap:30px}
  html.qd-fresh main.ig.wu.wu-guide .wu-stats div:first-child{padding-top:24px;border-top:1px solid var(--wg-dark-rule)}

  /* the contents: the label, then the links, on as many rows as they need (two on a tablet). Nothing moves
     sideways and nothing is stuck. Each link is a target of 44px in both directions; the first word starts on
     the text edge and the last one ends 84px from the screen, before the column of the assistant button
     (fixed, bottom right, 56px at 20px from the edges) */
  html.qd-fresh main.ig.wu.wu-guide .wu-toc{flex-wrap:wrap;gap:0 24px;margin-top:14px;padding:0 84px 8px calc(20px + var(--wg-in));font-size:15px;white-space:normal}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc::before{content:attr(aria-label);display:inline-flex;align-items:center;min-height:44px;margin-right:0}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc a{flex:none;min-width:44px;min-height:44px;white-space:nowrap}

  html.qd-fresh main.ig.wu.wu-guide .ig-band>.ig-wrap{padding-bottom:60px}
  html.qd-fresh main.ig.wu.wu-guide .ig-row{grid-template-columns:minmax(0,1fr);gap:16px}
  html.qd-fresh main.ig.wu.wu-guide .ig-row+.ig-row{margin-top:60px}
  html.qd-fresh main.ig.wu.wu-guide .ig-row h2{max-width:24em}
  html.qd-fresh main.ig.wu.wu-guide .wu-sources ul{max-width:var(--wg-measure)}

  /* the figure is the stacked render (the <source> of the <picture>), 360px wide as drawn: the full column on a
     phone, never wider than 420px, and from 481px in the middle of the column with its caption under it. Its
     smallest label, drawn at 13px, is 11.3px on a 360px screen, 12.4px on a 390px one and 15px from 468px */
  html.qd-fresh main.ig.wu.wu-guide .wu-figure{max-width:420px;margin:40px auto 0}
  html.qd-fresh main.ig.wu.wu-guide .wu-figure img{border-radius:14px}

  /* fingers: every control 44px or more, in both directions */
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-crumbs{gap:0 6px;align-items:center}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-crumbs :is(a,span){display:inline-flex;align-items:center;min-height:44px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-crumbs a{min-width:44px}
  /* "Home" is 39px of words in a 44px target: the 5px it gains lie under the gap before the slash */
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-crumbs a:first-child{margin-right:-5px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-eyebrow{margin-top:10px}
  /* the facts end before the column of the assistant button (fixed, bottom right) */
  html.qd-fresh main.ig.wu.wu-guide .wu-stats dd{padding-right:28px}

  /* the comparison keeps its two answers side by side, each under the name of its column, with the row title
     above them: as three columns its cells were five lines of twenty-five characters */
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp{border-bottom:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp :is(table,tbody){display:block;width:auto}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;padding:16px 0 18px;border-bottom:1px solid var(--wg-rule)}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp tbody :is(th,td){display:block;width:auto;padding:0;border:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp tbody th{grid-column:1 / -1}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp tbody td{margin-top:10px;font-size:16px;line-height:1.55}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp td[data-label]::before{content:attr(data-label);display:block;margin:0 0 2px;font-size:14px;line-height:1.4;font-weight:600;color:var(--ig-muted)}
  html.qd-fresh main.ig.wu.wu-guide .wu-code .code-tabs .tab{min-height:44px;padding:0 14px;font-size:14.5px}
  html.qd-fresh main.ig.wu.wu-guide .wu-code .qd-code-copy{min-height:44px;min-width:60px;font-size:14px}
  html.qd-fresh main.ig.wu.wu-guide .wu-also :is(a,span){min-height:44px}
  html.qd-fresh main.ig.wu.wu-guide .wu-sources .ig-dash li{padding-top:3px;padding-bottom:3px}
  html.qd-fresh main.ig.wu.wu-guide .wu-sources .ig-dash li::before{top:25px}
  html.qd-fresh main.ig.wu.wu-guide .wu-sources .ig-dash a{display:inline-block;padding:10px 0}
}
@media (max-width:720px){
  html.qd-fresh main.ig.wu.wu-guide{--wg-in:16px;--wg-pad:44px}
  /* the island 8px from the screen, its text 24px from it: the same 24px as the text of the sheet */
  html.qd-fresh main.ig.wu.wu-guide .section.ig-hero-band{padding:8px 8px 0}
  html.qd-fresh main.ig.wu.wu-guide .section.ig-band{padding-left:8px;padding-right:8px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero{padding:8px var(--wg-in) 20px;border-radius:20px}
  /* the crumbs: the two links keep a target of 44px, six of them above and six below the 32px row; the name of
     the page is not a link, so when it goes to a second line that line is 20px, not 44 */
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-crumbs a{margin:-6px 0}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-crumbs span{min-height:0;line-height:20px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-eyebrow{margin-top:6px;letter-spacing:.05em}
  /* the title: 29px on a 390px phone, a step down on 375 and 360 so three lines stay three lines */
  html.qd-fresh main.ig.wu.wu-guide .ig-hero h1{margin-top:6px;font-size:clamp(26px,7.45vw,29px);line-height:1.14;letter-spacing:-.025em}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero h1.wu-h1-long{font-size:clamp(22px,6.15vw,24px);line-height:1.18;letter-spacing:-.02em;text-wrap:wrap}
  html.qd-fresh main.ig.wu.wu-guide .wu-hero-lower{margin-top:14px;padding-top:14px}
  html.qd-fresh main.ig.wu.wu-guide .wu-hero-facts{row-gap:12px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-lead{max-width:33em;font-size:17px;line-height:1.53}
  /* one form on every page: the action across the column, the second link under it, on the text edge. Ten of the
     nineteen second links are too long to stand beside a button, and on the edge none meets the assistant button */
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-cta-row{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0;margin-top:16px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-cta-row>.btn-cta{flex:none;width:100%;max-width:360px;justify-content:center}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-cta-row>.ig-btn-ghost{flex:none;justify-content:flex-start;min-height:44px;margin:4px 0 0;padding:0}
  html.qd-fresh main.ig.wu.wu-guide .wu-stats div{grid-template-columns:84px minmax(0,1fr);column-gap:14px;padding:11px 0}
  html.qd-fresh main.ig.wu.wu-guide .wu-stats div:first-child{padding:14px 0 13px}
  html.qd-fresh main.ig.wu.wu-guide .wu-stats dt{font-size:22px;line-height:26px}
  html.qd-fresh main.ig.wu.wu-guide .wu-stats div:first-child dt{font-size:42px}
  /* the facts stay clear of the assistant button (fixed, bottom right, 56px at 20px from the edges) wherever the
     page is scrolled: their words end 84px from the screen */
  html.qd-fresh main.ig.wu.wu-guide .wu-stats dd{padding-right:60px;font-size:15.5px;line-height:1.45}
  html.qd-fresh main.ig.wu.wu-guide .wu-stats div:first-child dd{margin-top:8px;font-size:16px}

  /* the contents on a phone: a ruled list, one link a line across the column (a target of 44px), under the
     label. The longest link ends before the column of the assistant button on a 360px screen */
  html.qd-fresh main.ig.wu.wu-guide .wu-toc{display:block;margin-top:22px;padding:0 24px;font-size:16px;line-height:1.3}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc::before{display:block;min-height:0;padding:0 0 10px;font-size:15px;line-height:20px}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc a{display:flex;min-height:45px;border-top:1px solid var(--wg-rule);white-space:normal}
  /* with guides.js the contents are one closed row: the label is a button as wide as the column (48px high)
     with a mark after its words, and a tap opens the list under it. The mark is two borders, not a glyph, and
     sits beside the words, away from the column of the assistant button. The rule under the row is the one
     the next section draws at its top. Without the script the list above stays open */
  html.qd-fresh main.ig.wu.wu-guide .wu-toc.is-js::before{content:none}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:0;padding:0;border:0;border-top:1px solid var(--wg-rule);border-radius:0;background:none;font:inherit;font-size:15px;font-weight:600;line-height:20px;color:var(--ig-ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc-btn::after{content:"";flex:none;width:8px;height:8px;margin-top:-5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc-btn:focus-visible{outline:2px solid var(--ig-ink);outline-offset:2px}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc.is-open .wu-toc-btn::after{margin-top:5px;transform:rotate(225deg)}
  html.qd-fresh main.ig.wu.wu-guide .wu-toc.is-js:not(.is-open) a{display:none}

  html.qd-fresh main.ig.wu.wu-guide .ig-band>.ig-wrap{padding-bottom:48px}
  html.qd-fresh main.ig.wu.wu-guide .ig-band.wu-sources>.ig-wrap{padding-top:40px;padding-bottom:60px}
  html.qd-fresh main.ig.wu.wu-guide .ig-row{gap:14px}
  html.qd-fresh main.ig.wu.wu-guide .ig-row+.ig-row{margin-top:48px}
  html.qd-fresh main.ig.wu.wu-guide .ig-row h2{font-size:24px;line-height:1.2}
  html.qd-fresh main.ig.wu.wu-guide .ig-row-body>h3{margin-top:40px;font-size:19px}
  html.qd-fresh main.ig.wu.wu-guide .ig-row-body>p{font-size:17px;line-height:1.65}
  html.qd-fresh main.ig.wu.wu-guide .ig-row-body>p:first-child{font-size:18px;line-height:1.55}
  html.qd-fresh main.ig.wu.wu-guide .ig-dash li{padding:14px 0 14px 24px;font-size:17px;line-height:1.62}
  html.qd-fresh main.ig.wu.wu-guide .ig-dash li::before{top:27px;width:10px}
  html.qd-fresh main.ig.wu.wu-guide .ig-row-body>p.ig-note{padding-left:14px}

  /* every table becomes a list of records: the row title, then each value (under the name of its column from
     three columns on). The header row stays for screen readers only */
  html.qd-fresh main.ig.wu.wu-guide .ig-table{margin-top:24px;border-bottom:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-wide{margin-top:24px}
  html.qd-fresh main.ig.wu.wu-guide .ig-table :is(table,tbody,tr,th,td){display:block;width:auto;min-width:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.qd-fresh main.ig.wu.wu-guide .ig-table tbody tr{padding:15px 0 17px;border-bottom:1px solid var(--wg-rule)}
  html.qd-fresh main.ig.wu.wu-guide .ig-table tbody :is(th,td){width:auto;padding:0;border:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table tbody tr+tr :is(th,td){border-top:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp tbody tr{display:block;padding:15px 0 17px}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-cmp tbody td{font-size:17px;line-height:1.58}
  html.qd-fresh main.ig.wu.wu-guide .ig-table tbody th{font-size:17px;line-height:1.4}
  html.qd-fresh main.ig.wu.wu-guide .ig-table tbody td{margin-top:5px;line-height:1.58}
  html.qd-fresh main.ig.wu.wu-guide .ig-table tbody td[data-label]{margin-top:12px}
  html.qd-fresh main.ig.wu.wu-guide .ig-table td[data-label]::before{content:attr(data-label);display:block;margin:0 0 2px;font-size:14px;line-height:1.4;font-weight:600;color:var(--ig-muted)}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict tbody tr{padding:15px 0 17px}
  html.qd-fresh main.ig.wu.wu-guide .ig-table.wu-dict-sys tbody tr{display:grid}

  html.qd-fresh main.ig.wu.wu-guide .wu-code{margin-top:24px}
  /* the three tabs and Copy on one row, down to a 360px screen */
  html.qd-fresh main.ig.wu.wu-guide .wu-code .code-tabs{gap:2px;padding:6px 8px}
  html.qd-fresh main.ig.wu.wu-guide .wu-code .code-tabs .tab{padding:0 11px}
  html.qd-fresh main.ig.wu.wu-guide .wu-code .qd-code-copy{min-width:56px;padding:0 10px}
  html.qd-fresh main.ig.wu.wu-guide .wu-code .code-body{padding:16px;font-size:14px;line-height:1.65}

  html.qd-fresh main.ig.wu.wu-guide .wu-figure{margin-top:32px}

  html.qd-fresh main.ig.wu.wu-guide .ig-faq summary{padding:18px 40px 18px 0}
  html.qd-fresh main.ig.wu.wu-guide .ig-faq summary h3{font-size:17.5px}
  html.qd-fresh main.ig.wu.wu-guide .ig-faq details p{font-size:17px;line-height:1.65}

  html.qd-fresh main.ig.wu.wu-guide .ig-final-wrap>.ig-wrap{padding-top:0}
  html.qd-fresh main.ig.wu.wu-guide .ig-final{padding:30px var(--wg-in) 30px;border-radius:20px}
  html.qd-fresh main.ig.wu.wu-guide .ig-final h2{font-size:24px}
  html.qd-fresh main.ig.wu.wu-guide .ig-final+.wu-also{margin-top:32px}
  html.qd-fresh main.ig.wu.wu-guide .wu-also{gap:0 20px;padding:10px 0}
  html.qd-fresh main.ig.wu.wu-guide .wu-also span{flex:1 1 100%;min-height:36px}
}
/* 375 and 360px: the title one step further down (27 and 26px), so the longest title that is not set small
   ("Cloudflare Turnstile: ...") keeps to three lines there, as on a 390px phone */
@media (max-width:380px){
  html.qd-fresh main.ig.wu.wu-guide .ig-hero h1{font-size:clamp(25px,7.2vw,27px)}
}
/* a short phone (375x667): the island gives up twenty pixels more and the title is set one step down (27px for
   29, 22px for 24: the longest title goes from four lines to three), so the big figure is on the first screen
   on every page there too. The lead stays at 17px */
@media (max-width:720px) and (max-height:700px){
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-eyebrow{margin-top:4px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero h1{margin-top:4px;font-size:clamp(25px,7.2vw,27px)}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero h1.wu-h1-long{font-size:clamp(21px,5.87vw,22px)}
  html.qd-fresh main.ig.wu.wu-guide .wu-hero-lower{margin-top:10px;padding-top:10px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-lead{line-height:1.5}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-cta-row{margin-top:14px}
  html.qd-fresh main.ig.wu.wu-guide .ig-hero .ig-cta-row>.ig-btn-ghost{margin-top:2px}
  html.qd-fresh main.ig.wu.wu-guide .wu-hero-facts{row-gap:10px}
  html.qd-fresh main.ig.wu.wu-guide .wu-stats div:first-child{padding-top:12px}
  html.qd-fresh main.ig.wu.wu-guide .wu-stats div:first-child dt{font-size:40px}
}