:root{--c-paper:#effaf5;--c-card:#ffffff;--c-type:#0f2e24;--c-soft:#4f6f63;--c-main:#0f766e;--c-hi:#f59e0b;--c-edge:#d3eee3;--c-corner:4px;--c-page:1200px;--c-f1:'Space Grotesk',system-ui,sans-serif;--c-text-font:'Inter',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--c-paper);color:var(--c-type);font:16px/1.78 var(--c-text-font)}
img{max-width:100%;height:auto} a{color:var(--c-main);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--c-f1);line-height:1.2;letter-spacing:-.01em;color:var(--c-type)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.75em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1.25em}
.pu-wra{max-width:var(--c-page);margin:0 auto;padding:0 1rem} .pu-mai{max-width:var(--c-page);margin:0 auto;padding:1.2rem 1rem 3rem}
.pu-ski{position:absolute;left:-9999px} .pu-ski:focus{left:1rem;top:1rem;background:var(--c-card);padding:.5rem;z-index:99}
.pu-heain{max-width:var(--c-page);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.pu-bra{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--c-f1);color:var(--c-type);text-decoration:none}
.pu-nav{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .pu-nav a{color:var(--c-type);text-decoration:none;font-weight:600;font-size:.95rem}
.pu-hea{background:transparent;padding-top:.8rem} .pu-heain{background:var(--c-card);border:1px solid var(--c-edge);border-radius:999px;padding:.5rem 1.1rem}  .pu-nav a{border-bottom:2px solid transparent;padding-bottom:2px} .pu-nav a:hover,.pu-nav a[aria-current]{border-color:var(--c-main)}
.pu-her{margin:1rem 0 1.4rem} .pu-lea{font-size:1.12rem;max-width:46em;color:var(--c-soft)} .pu-her{background:var(--c-main);color:#fff;padding:2.4rem 1.6rem;border-radius:var(--c-corner)} .pu-her h1,.pu-her .pu-lea{color:#fff} .pu-her .pu-lea{opacity:.92}
.pu-too{margin:1.4rem 0 2rem}
.pu-not{margin:1.4em 0;padding:.9em 1.1em;background:var(--c-card);border-left:4px solid var(--c-hi);border-radius:0 var(--c-corner) var(--c-corner) 0}
.pu-for{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--c-card);border:1px dashed var(--c-main);border-radius:var(--c-corner);overflow-x:auto}
.pu-tabwra{margin:1.2em 0;overflow-x:auto;border:1px solid var(--c-edge);border-radius:var(--c-corner);background:var(--c-card)}
.pu-tab{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .pu-tab th,.pu-tab td{padding:.5em .75em;border-bottom:1px solid var(--c-edge);text-align:left}
.pu-tab thead th{background:color-mix(in srgb,var(--c-edge) 60%,var(--c-card))}
ol.pu-ste{padding-left:1.3em} ol.pu-ste>li{margin:.5em 0}
.pu-fig{margin:1.6em 0;text-align:center} .pu-fig img{width:100%;max-width:720px;border-radius:var(--c-corner);border:1px solid var(--c-edge);background:#fff} .pu-fig figcaption{font-size:.9em;color:var(--c-soft)}
.pu-car{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.pu-cara{display:block;padding:1.1rem;background:var(--c-card);border-radius:var(--c-corner);border:1px solid var(--c-edge);color:var(--c-type);text-decoration:none}
.pu-cara b{display:block;font-family:var(--c-f1);margin-bottom:.35rem} .pu-cara span{color:var(--c-soft);font-size:.92rem} .pu-cara:hover{border-color:var(--c-main)}
.pu-cara--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .pu-cara--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--c-type) 14%,transparent)}
.pu-carimg{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .pu-cartxt{display:block;padding:1rem 1.1rem 1.1rem} .pu-cartxt>span{display:block}
.pu-bli a,.pu-bro,.pu-poskic{background:none!important}
.pu-carmet{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--c-main)}
.pu-car--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .pu-car--feat>.pu-cara:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .pu-car--feat>.pu-cara:first-child b{font-size:1.35rem}
.pu-bli{display:grid;gap:1rem;margin:1.2em 0} .pu-bro{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--c-card);border:1px solid var(--c-edge);border-radius:var(--c-corner);overflow:hidden;color:var(--c-type);text-decoration:none}
.pu-bro .pu-carimg{height:100%;aspect-ratio:auto;min-height:126px} .pu-bro b{display:block;font-family:var(--c-f1);font-size:1.12rem;margin-bottom:.3rem} .pu-bro .pu-cartxt>span{color:var(--c-soft);font-size:.93rem} .pu-bro:hover{border-color:var(--c-main)}
.pu-bli--min{list-style:none;padding:0;counter-reset:bl;gap:0} .pu-bli--min li{counter-increment:bl;border-top:1px solid var(--c-edge)} .pu-bli--min li:last-child{border-bottom:1px solid var(--c-edge)}
.pu-bli--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--c-type);text-decoration:none} .pu-bli--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--c-f1);color:var(--c-main)}
.pu-bli--min b{font-family:var(--c-f1);font-size:1.15rem} .pu-bli--min span{color:var(--c-soft);font-size:.93rem} .pu-bli--min a:hover b{color:var(--c-main)}
.pu-poshea--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--c-corner);overflow:hidden} .pu-poshea--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.pu-posov{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .pu-posov h1,.pu-posov .pu-posmet,.pu-posov .pu-poskic{color:#fff}
.pu-poshea--band{background:var(--c-main);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--c-corner)} .pu-poshea--band h1,.pu-poshea--band .pu-posmet,.pu-poshea--band .pu-poskic{color:#fff}
.pu-poshea--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .pu-poshea--split .pu-poscov{margin:0}
.pu-toc--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .pu-toc--chips li{margin:0} .pu-toc--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--c-edge);border-radius:999px;background:var(--c-paper);text-decoration:none;font-size:.88rem}
.pu-toc--rail{background:none;border:0;border-left:3px solid var(--c-hi);border-radius:0;padding:.2rem 0 .2rem 1rem}
.pu-lana--globe summary{display:flex;align-items:center;gap:.35rem} .pu-lan{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .pu-lan a{padding:.25rem .7rem;border:1px solid var(--c-edge);border-radius:999px;text-decoration:none} .pu-lan a[aria-current]{background:var(--c-main);border-color:var(--c-main);color:#fff}
@media (max-width:700px){.pu-car--feat{grid-template-columns:1fr} .pu-car--feat>.pu-cara:first-child{display:flex} .pu-bro{grid-template-columns:1fr} .pu-bro .pu-carimg{min-height:0;aspect-ratio:1200/630} .pu-poshea--split{grid-template-columns:1fr} .pu-posov{position:static;background:var(--c-main);padding:1.2rem} .pu-poshea--overlay>img{min-height:0}}
.pu-pos{max-width:48rem;margin:0 auto} .pu-poshea{margin:.6rem 0 1.2rem} .pu-poshea h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.pu-poskic{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-main);text-decoration:none}
.pu-upd{color:var(--c-soft);font-size:.9rem;margin:2rem 0 0} .pu-sig{font-style:italic;color:var(--c-soft)} .pu-posmet{color:var(--c-soft);font-size:.92rem;margin:0} .pu-poscov{margin:0 0 1.6rem} .pu-poscov img{display:block;width:100%;height:auto;border-radius:var(--c-corner)}
.pu-pos .pu-lea{font-size:1.2rem;color:var(--c-type)} .pu-pos .pu-lea::first-letter{font-family:var(--c-f1);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--c-main)}
.pu-pos .pu-toc--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--c-card);border:1px solid var(--c-edge);border-left:4px solid var(--c-main);border-radius:var(--c-corner);font-size:.95rem}
.pu-toc--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .pu-toc--post li{margin:.2rem 0}
.pu-pos h3{color:var(--c-main)} .pu-pos blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--c-hi);font-size:1.1em}
.pu-faq h3{font-size:1.05rem;margin-top:1.3em}
.pu-cru{font-size:.88rem;color:var(--c-soft);margin:.4rem 0 1rem} .pu-cru a{color:var(--c-soft)}
.pu-cta{margin:2.4rem 0;padding:1.4rem;background:var(--c-card);border-radius:var(--c-corner);border:1px solid var(--c-edge);text-align:center}
.pu-btn{display:inline-block;padding:.7em 1.4em;background:var(--c-main);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.pu-foo{border-top:1px solid var(--c-edge);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--c-soft);background:var(--c-card)}
.pu-foo nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .pu-foo a{color:var(--c-soft)} .pu-fooin{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center}


.pu-lana{position:relative} .pu-lana summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--c-edge);border-radius:999px;font-size:.85rem}
.pu-lanlis{position:absolute;right:0;top:120%;background:var(--c-card);border:1px solid var(--c-edge);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.pu-lanlis a{padding:.3rem .5rem;text-decoration:none;color:var(--c-type)} .pu-lanlis a[aria-current]{font-weight:700;color:var(--c-main)}
.pu-cod{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .pu-cod a{text-decoration:none;color:var(--c-soft);padding:.1rem .3rem;border-radius:4px} .pu-cod a[aria-current]{color:var(--c-main);background:color-mix(in srgb,var(--c-main) 12%,transparent)}
[data-unit]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-unit]:empty{margin:0}
[data-unit="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--c-card)}
[data-unit="sidebar_left"],[data-unit="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-unit="sidebar_left"]{left:12px} [data-unit="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-unit="sidebar_left"],[data-unit="sidebar_right"]{display:none}}
.pu-adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--c-soft)}
.pu-btn{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.pu-tabwra{border:0;border-top:3px solid var(--c-main);border-radius:0;background:transparent} .pu-tab thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.pu-sec a:not(.pu-btn):not(.pu-cara){text-decoration-thickness:2px}
@media (max-width:640px){.pu-heain{gap:.5rem} .pu-nav{gap:.8rem}}

/* Punctuation Checker — tool styles. Colours, radius and fonts come only from the site tokens. */
.pcx {
  --pcx-spacing: var(--c-main);
  --pcx-marks: var(--c-hi);
  --pcx-commas: color-mix(in srgb, var(--c-main) 45%, var(--c-hi));
  --pcx-apostrophes: color-mix(in srgb, var(--c-type) 62%, var(--c-main));
  --pcx-dashes: color-mix(in srgb, var(--c-hi) 55%, var(--c-type));
  --pcx-quotes: color-mix(in srgb, var(--c-main) 55%, var(--c-type));
  --pcx-language: var(--c-soft);
  --pcx-tint: color-mix(in srgb, var(--c-main) 7%, var(--c-card));
  container-type: inline-size;
  color: var(--c-type);
  font-family: var(--c-text-font);
  color-scheme: inherit;
  position: relative;
  line-height: 1.5;
}
.pcx *, .pcx *::before, .pcx *::after { box-sizing: border-box; }
.pcx [hidden] { display: none !important; }
.pcx-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* top settings bar */
.pcx-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.1rem; margin-bottom: .55rem; }
.pcx-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.pcx-lbl { font: 600 .74rem/1.2 var(--c-f1); letter-spacing: .06em; text-transform: uppercase; color: var(--c-soft); }
.pcx-select {
  font: inherit; font-size: .95rem; color: var(--c-type); background: var(--c-card);
  border: 1px solid var(--c-edge); border-radius: var(--c-corner); padding: .5rem 2rem .5rem .7rem; min-height: 42px; max-width: 100%;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-soft) 50%), linear-gradient(135deg, var(--c-soft) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.pcx-seg { display: inline-flex; border: 1px solid var(--c-edge); border-radius: var(--c-corner); background: var(--c-card); padding: 3px; gap: 2px; }
.pcx-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pcx-seg label { padding: .45rem .85rem; min-height: 36px; display: inline-flex; align-items: center; border-radius: calc(var(--c-corner) - 3px); cursor: pointer; font-size: .92rem; color: var(--c-soft); transition: background .15s, color .15s; }
.pcx-seg input:checked + label { background: var(--c-main); color: var(--c-card); font-weight: 600; }
.pcx-seg input:focus-visible + label { outline: 2px solid var(--c-hi); outline-offset: 1px; }
.pcx-badge {
  margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--c-main) 12%, var(--c-card)); color: var(--c-type); font-size: .85rem; font-weight: 600;
  border: 1px dashed color-mix(in srgb, var(--c-main) 45%, transparent);
}
.pcx-badge svg { color: var(--c-main); flex: none; }
.pcx-note { margin: 0 0 .9rem; font-size: .88rem; color: var(--c-soft); }

/* main grid */
.pcx-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }

/* editor */
.pcx-ed { min-width: 0; }
.pcx-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.pcx-grow { flex: 1; }
.pcx-sep { width: 1px; height: 22px; background: var(--c-edge); margin: 0 .2rem; }
.pcx-ibtn, .pcx-tbtn {
  font: inherit; font-size: .88rem; color: var(--c-type); background: transparent; border: 1px solid var(--c-edge);
  border-radius: var(--c-corner); min-height: 38px; min-width: 38px; padding: 0 .7rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.pcx-ibtn { padding: 0; }
.pcx-ibtn:hover:not(:disabled), .pcx-tbtn:hover:not(:disabled) { border-color: var(--c-main); color: var(--c-main); }
.pcx-ibtn:disabled, .pcx-tbtn:disabled, .pcx-btn:disabled { opacity: .42; cursor: not-allowed; }

.pcx-paper {
  position: relative; border-radius: var(--c-corner); background: var(--c-card); border: 1px solid var(--c-edge);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c-hi) 70%, transparent);
}
.pcx-paper::before { /* proofreader margin rule */
  content: ""; position: absolute; top: 10px; bottom: 10px; left: 38px; width: 1px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--c-hi) 55%, transparent) 0 6px, transparent 6px 10px);
}
.pcx-ta, .pcx-back {
  font-family: var(--c-text-font); font-size: 1.02rem; line-height: 1.75; letter-spacing: normal; word-spacing: normal;
  padding: 14px 16px 14px 52px; border: 1px solid transparent; margin: 0;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; tab-size: 4; text-align: left;
}
.pcx-ta {
  position: relative; z-index: 1; display: block; width: 100%; min-height: 280px; max-height: 70vh; resize: vertical; overflow-y: auto;
  background: transparent; color: var(--c-type); caret-color: var(--c-main); border-radius: var(--c-corner); outline: none;
}
.pcx-ta::placeholder { color: var(--c-soft); opacity: 1; }
.pcx-paper:focus-within { border-color: var(--c-main); box-shadow: inset 3px 0 0 var(--c-hi), 0 0 0 3px color-mix(in srgb, var(--c-main) 22%, transparent); }
.pcx-back { position: absolute; inset: 0; overflow: hidden; color: transparent; pointer-events: none; border-radius: var(--c-corner); }
.pcx-mk { color: transparent; background: color-mix(in srgb, var(--pcx-c) 22%, transparent); box-shadow: inset 0 -2px 0 var(--pcx-c); border-radius: 2px; padding: 0; }
.pcx-mk.pcx-on { background: color-mix(in srgb, var(--pcx-c) 42%, transparent); box-shadow: inset 0 -3px 0 var(--pcx-c), 0 0 0 2px color-mix(in srgb, var(--pcx-c) 40%, transparent); }

.pcx-c-spacing { --pcx-c: var(--pcx-spacing); }
.pcx-c-marks { --pcx-c: var(--pcx-marks); }
.pcx-c-commas { --pcx-c: var(--pcx-commas); }
.pcx-c-apostrophes { --pcx-c: var(--pcx-apostrophes); }
.pcx-c-dashes { --pcx-c: var(--pcx-dashes); }
.pcx-c-quotes { --pcx-c: var(--pcx-quotes); }
.pcx-c-language { --pcx-c: var(--pcx-language); }

.pcx-map { margin-top: .45rem; }
.pcx-map-svg { display: block; width: 100%; height: 22px; }
.pcx-map-rail { fill: color-mix(in srgb, var(--c-edge) 80%, transparent); }
.pcx-tick { fill: var(--pcx-c); cursor: pointer; opacity: .85; }
.pcx-tick.pcx-on { opacity: 1; stroke: var(--c-type); stroke-width: 1.5; }

.pcx-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; align-items: center; margin-top: .45rem; }
.pcx-stats { margin: 0; font-size: .86rem; color: var(--c-soft); font-variant-numeric: tabular-nums; }
.pcx-stats::before { content: "¶ "; color: var(--c-hi); font-weight: 700; }
.pcx-keep { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--c-soft); cursor: pointer; min-height: 36px; }
.pcx-keep input { width: 18px; height: 18px; accent-color: var(--c-main); }

.pcx-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.pcx-btn {
  font: 600 .95rem/1.2 var(--c-text-font); display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 42px; padding: .55rem 1.05rem; border-radius: var(--c-corner); cursor: pointer;
  background: var(--c-card); color: var(--c-type); border: 1px solid var(--c-edge); transition: transform .12s, background .15s, border-color .15s;
}
.pcx-btn:hover:not(:disabled) { border-color: var(--c-main); }
.pcx-btn:active:not(:disabled) { transform: translateY(1px); }
.pcx-btn--p { background: var(--c-main); color: var(--c-card); border-color: var(--c-main); }
.pcx-btn--p:hover:not(:disabled) { background: color-mix(in srgb, var(--c-main) 86%, var(--c-type)); }
.pcx-btn--g { background: transparent; }
.pcx-btn--s { min-height: 36px; padding: .35rem .75rem; font-size: .85rem; }
.pcx button:focus-visible, .pcx a:focus-visible, .pcx select:focus-visible, .pcx-card:focus-visible, .pcx-keep input:focus-visible { outline: 2px solid var(--c-hi); outline-offset: 2px; }

/* sidebar: margin notes */
.pcx-side {
  min-width: 0; background: var(--pcx-tint); border: 1px solid var(--c-edge); border-radius: var(--c-corner); padding: .9rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.pcx-side-h { margin: 0; font: 700 .78rem/1.2 var(--c-f1); letter-spacing: .08em; text-transform: uppercase; color: var(--c-soft); }
.pcx-sum { display: flex; align-items: center; gap: .85rem; min-height: 64px; }
.pcx-sum[data-state="empty"], .pcx-sum[data-state="ok"] { flex-direction: column; text-align: center; padding: 1rem .5rem; gap: .35rem; }
.pcx-pilcrow { font: 700 2.6rem/1 var(--c-f1); color: color-mix(in srgb, var(--c-hi) 80%, var(--c-type)); }
.pcx-okic { color: var(--c-main); }
.pcx-sum-t { margin: 0; font: 700 1.3rem/1.2 var(--c-f1); color: var(--c-type); }
.pcx-sum-d { margin: 0; font-size: .88rem; color: var(--c-soft); }
.pcx-ring { flex: none; }
.pcx-ring-bg { fill: none; stroke: var(--c-edge); stroke-width: 6; }
.pcx-ring-seg { fill: none; stroke: var(--pcx-c); stroke-width: 6; }
.pcx-ring-n { font: 700 15px var(--c-f1); fill: var(--c-type); }
.pcx-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.pcx-chip {
  font: inherit; font-size: .82rem; display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: .25rem .65rem;
  border-radius: 999px; border: 1px solid var(--c-edge); background: var(--c-card); color: var(--c-type); cursor: pointer;
}
.pcx-chip b { font-variant-numeric: tabular-nums; }
.pcx-chip[aria-pressed="true"] { border-color: var(--c-main); background: color-mix(in srgb, var(--c-main) 14%, var(--c-card)); }
.pcx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pcx-c, var(--c-type)); }
.pcx-chip--ign { border-style: dashed; color: var(--c-soft); }
.pcx-x { font-weight: 700; }

.pcx-list { display: flex; flex-direction: column; gap: .6rem; max-height: 560px; overflow-y: auto; padding: 2px 4px 2px 2px; }
.pcx-card {
  position: relative; background: var(--c-card); border: 1px solid var(--c-edge); border-left: 4px solid var(--pcx-c);
  border-radius: var(--c-corner); padding: .7rem .8rem .75rem .85rem; cursor: pointer; transition: box-shadow .15s, transform .15s;
  animation: pcx-in .22s ease-out both;
}
.pcx-card::after { /* margin flag */
  content: ""; position: absolute; top: 10px; right: -1px; width: 12px; height: 9px;
  background: var(--c-hi); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%); opacity: 0; transition: opacity .15s;
}
.pcx-card:hover { box-shadow: 0 2px 10px color-mix(in srgb, var(--c-type) 10%, transparent); }
.pcx-card.pcx-on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pcx-c) 55%, transparent); }
.pcx-card.pcx-on::after { opacity: 1; }
.pcx-card-h { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.pcx-kind { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--pcx-c) 16%, var(--c-card)); color: var(--pcx-c); flex: none; }
.pcx-card-t { font: 700 .96rem/1.3 var(--c-f1); }
.pcx-rid { margin-left: auto; font: .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--c-soft); background: var(--c-paper); border: 1px solid var(--c-edge); border-radius: 4px; padding: .2rem .35rem; }
.pcx-diff { margin: .5rem 0 .35rem; font-size: .95rem; overflow-wrap: anywhere; line-height: 1.6; }
.pcx-ctx { color: var(--c-soft); }
.pcx-diff del { text-decoration: line-through; text-decoration-color: var(--c-hi); text-decoration-thickness: 2px; background: color-mix(in srgb, var(--c-hi) 14%, transparent); border-radius: 3px; padding: 0 .1rem; color: var(--c-type); white-space: pre-wrap; }
.pcx-diff ins { text-decoration: none; background: color-mix(in srgb, var(--c-main) 18%, transparent); color: var(--c-type); font-weight: 700; border-radius: 3px; padding: 0 .15rem; white-space: pre-wrap; }
.pcx-arrow { color: var(--c-hi); font-weight: 700; padding: 0 .2rem; }
.pcx-why { margin: 0 0 .3rem; font-size: .88rem; }
.pcx-nofix { margin: 0 0 .3rem; font-size: .82rem; color: var(--c-soft); font-style: italic; }
.pcx-ex { margin: 0 0 .5rem; font-size: .82rem; color: var(--c-soft); overflow-wrap: anywhere; }
.pcx-ex s { text-decoration-color: var(--c-hi); }
.pcx-ex b { color: var(--c-type); font-weight: 600; }
.pcx-card-a { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; }
.pcx-read { margin-left: auto; font-size: .85rem; color: var(--c-main); text-underline-offset: 3px; min-height: 36px; display: inline-flex; align-items: center; }
.pcx-ignored { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .84rem; color: var(--c-soft); }
.pcx-honest { margin: 0; font-size: .8rem; color: var(--c-soft); border-top: 1px dashed var(--c-edge); padding-top: .6rem; }

/* consistency report */
.pcx-cons { margin-top: 1.1rem; border: 1px solid var(--c-edge); border-radius: var(--c-corner); padding: .9rem 1rem; background: var(--c-card); }
.pcx-cons-h { margin: 0 0 .6rem; font: 700 1rem/1.3 var(--c-f1); }
.pcx-rows { display: grid; gap: .5rem; }
.pcx-row { display: grid; grid-template-columns: 9.5rem minmax(60px, 140px) 1fr auto; align-items: center; gap: .4rem .8rem; font-size: .9rem; }
.pcx-row-l { font-weight: 600; }
.pcx-row-v { color: var(--c-soft); font-variant-numeric: tabular-nums; }
.pcx-will { grid-column: 1 / -1; font-size: .8rem; color: var(--c-main); }
.pcx-cbar { width: 100%; height: 8px; display: block; }
.pcx-cbar-bg { fill: var(--c-edge); }
.pcx-cbar-0 { fill: var(--c-main); }
.pcx-cbar-1 { fill: var(--c-hi); }
.pcx-cbar-2 { fill: var(--pcx-dashes); }
.pcx-st { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .2rem .5rem; border-radius: 999px; background: var(--c-paper); color: var(--c-soft); white-space: nowrap; }
.pcx-st--ok { color: var(--c-main); background: color-mix(in srgb, var(--c-main) 12%, var(--c-card)); }
.pcx-st--mixed, .pcx-st--tie { color: color-mix(in srgb, var(--c-hi) 70%, var(--c-type)); background: color-mix(in srgb, var(--c-hi) 16%, var(--c-card)); }

.pcx-export { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

/* toast + modal */
.pcx-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); z-index: 50; max-width: min(92vw, 520px);
  background: var(--c-type); color: var(--c-card); padding: .65rem 1rem; border-radius: var(--c-corner); font-size: .9rem;
  opacity: 0; transition: transform .25s, opacity .25s; pointer-events: none;
}
.pcx-toast.pcx-show { opacity: 1; transform: translate(-50%, 0); }
.pcx-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--c-type) 45%, transparent); }
.pcx-modal-box { background: var(--c-card); color: var(--c-type); border-radius: var(--c-corner); border: 1px solid var(--c-edge); padding: 1.2rem 1.3rem; width: min(100%, 460px); }
.pcx-modal-box h3 { margin: 0 0 .7rem; font: 700 1.1rem var(--c-f1); }
.pcx-keys { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
.pcx-keys dt { white-space: nowrap; }
.pcx-keys dd { margin: 0; color: var(--c-soft); }
.pcx kbd { font: .78rem ui-monospace, Menlo, monospace; border: 1px solid var(--c-edge); border-bottom-width: 2px; border-radius: 4px; padding: .05rem .3rem; background: var(--c-paper); }
.pcx-print { display: none; }
.pcx-promo { display: none; }

@keyframes pcx-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pcx-card { animation: none; }
  .pcx-card, .pcx-btn, .pcx-toast, .pcx-seg label { transition: none; }
}

@container (max-width: 760px) {
  .pcx-main { grid-template-columns: minmax(0, 1fr); }
  .pcx-list { max-height: none; overflow: visible; }
  .pcx-badge { margin-left: 0; }
  .pcx-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pcx-row .pcx-cbar { grid-column: 1 / -1; grid-row: 2; }
  .pcx-row-v { grid-column: 1 / -1; }
}
@container (max-width: 460px) {
  .pcx-top { gap: .6rem; }
  .pcx-field, .pcx-select, .pcx-seg { width: 100%; }
  .pcx-seg label { flex: 1; justify-content: center; }
  .pcx-ta, .pcx-back { padding-left: 34px; padding-right: 12px; font-size: 1rem; }
  .pcx-paper::before { left: 24px; }
  .pcx-acts .pcx-btn, .pcx-export .pcx-btn { flex: 1 1 auto; }
  .pcx-rid { margin-left: 0; }
}

@media print {
  html.pcx-printing body * { visibility: hidden !important; }
  html.pcx-printing .pcx-print, html.pcx-printing .pcx-print * { visibility: visible !important; }
  html.pcx-printing .pcx-print { display: block !important; position: absolute; left: 0; top: 0; width: 100%; color: CanvasText; background: Canvas; font: 11pt/1.5 var(--c-text-font); }
  .pcx-print .pcx-pr-why { color: GrayText; font-size: 9.5pt; }
}

/* design: sites/<d>/design/site.css */
/* punctuation-checker.com — "Galley proof on the copy desk"
   a white galley sheet on a mint desk; a hairline proof margin on the left holds
   the only ornaments: caret, pilcrow, margin flags, query circles. */

body{background:var(--c-paper);background-image:linear-gradient(180deg,color-mix(in srgb,var(--c-edge) 55%,var(--c-paper)) 0,var(--c-paper) 340px);background-repeat:no-repeat}
::selection{background:color-mix(in srgb,var(--c-hi) 30%,transparent)}

/* ---------- header: the slug line above the galley ---------- */
.pu-hea{background:transparent;border-bottom:0}
.pu-heain{padding:1rem 1rem .8rem}
.pu-bra{font-size:1.18rem;letter-spacing:-.005em}
.pu-nav{gap:.4rem 1.5rem}
.pu-nav>a{font-family:var(--c-f1);font-weight:600;font-size:.95rem;color:var(--c-type);border-bottom:0;padding:.2rem 0;text-decoration:none;transition:color .15s}
.pu-nav>a:hover{color:var(--c-main);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
/* the proofreader's wavy line = "set in bold" */
.pu-nav>a[aria-current]{color:var(--c-type);text-decoration:underline wavy var(--c-hi);text-decoration-thickness:1.5px;text-underline-offset:7px;text-decoration-skip-ink:none}
/* language switcher: a small square proof stamp */
.pu-lana--globe summary{border:1.5px solid var(--c-type);border-radius:2px;padding:.28rem .55rem;font:700 .74rem/1 var(--c-f1);letter-spacing:.1em;color:var(--c-type);background:var(--c-card);transition:background .15s,color .15s}
.pu-lana--globe summary::-webkit-details-marker{display:none}
.pu-lana--globe summary:hover,.pu-lana--globe[open] summary{background:var(--c-type);color:var(--c-card)}
.pu-lanlis{border:1px solid var(--c-type);border-radius:2px;padding:.3rem 0;min-width:10rem;box-shadow:4px 4px 0 color-mix(in srgb,var(--c-type) 12%,transparent)}
.pu-lanlis a{padding:.42rem .9rem;font-size:.92rem;border-left:3px solid transparent}
.pu-lanlis a:hover{background:color-mix(in srgb,var(--c-main) 8%,var(--c-card))}
.pu-lanlis a[aria-current]{border-left-color:var(--c-hi);color:var(--c-type)}

/* ---------- the galley sheet ---------- */
.pu-mai{--pm:5.4rem;position:relative;width:min(calc(100% - 2rem),calc(var(--c-page) - 2rem));max-width:none;margin:.5rem auto 0;padding:2.4rem 2.6rem 3.2rem var(--pm);background:var(--c-card);border:1px solid color-mix(in srgb,var(--c-type) 12%,transparent);border-radius:2px;box-shadow:0 1px 2px color-mix(in srgb,var(--c-type) 8%,transparent),0 24px 44px -34px color-mix(in srgb,var(--c-type) 45%,transparent);
  background-image:linear-gradient(90deg,transparent calc(var(--pm) - 1.5rem),color-mix(in srgb,var(--c-hi) 55%,transparent) calc(var(--pm) - 1.5rem),color-mix(in srgb,var(--c-hi) 55%,transparent) calc(var(--pm) - 1.5rem + 1px),transparent calc(var(--pm) - 1.5rem + 1px))}
.pu-mai:has(>.pu-pos){width:min(calc(100% - 2rem),62rem)}

/* first screen: galley headline with a slug rule */
.pu-her{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:2rem;align-items:end;margin:0 0 1.6rem;padding:0 0 1.4rem;border-bottom:2px solid var(--c-type);background:none;color:var(--c-type);border-radius:0}
.pu-her::after{content:'';width:260px;height:130px;background:var(--c-main);opacity:.85;-webkit-mask:url(/assets/img/d-marks.svg) center/contain no-repeat;mask:url(/assets/img/d-marks.svg) center/contain no-repeat}
.pu-her h1,.pu-mai>h1{position:relative;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.06;letter-spacing:-.025em;margin:.1em 0 .35em}
.pu-her h1{color:inherit}
.pu-her h1::before,.pu-mai>h1::before,.pu-poshea h1::before{content:'';position:absolute;left:calc(-1 * var(--pm) + 1.5rem);top:.12em;width:1.5rem;height:1.5rem;background:var(--c-hi);-webkit-mask:url(/assets/img/d-caret.svg) center/contain no-repeat;mask:url(/assets/img/d-caret.svg) center/contain no-repeat}
.pu-her .pu-lea{color:var(--c-soft);font-size:1.16rem;max-width:40em;margin-bottom:0;opacity:1}
.pu-too{margin:1.6rem 0 2.4rem}

/* breadcrumbs: small caps slug */
.pu-cru{font:600 .76rem/1.6 var(--c-f1);letter-spacing:.09em;text-transform:uppercase;color:var(--c-soft);margin:0 0 1.2rem}
.pu-cru a{color:var(--c-main);text-decoration:none}
.pu-cru a:hover{text-decoration:underline}

/* ---------- sections: hairline rule + pilcrow in the margin ---------- */
.pu-sec{position:relative;margin:2.8rem 0 0;padding-top:.2rem;border-top:1px solid color-mix(in srgb,var(--c-type) 14%,transparent)}
.pu-sec>h2{position:relative;margin-top:1.3rem;letter-spacing:-.015em}
.pu-sec>h2::before{content:'';position:absolute;left:calc(-1 * var(--pm) + 1.55rem);top:.18em;width:1rem;height:1.2rem;background:var(--c-main);-webkit-mask:url(/assets/img/d-pilcrow.svg) center/contain no-repeat;mask:url(/assets/img/d-pilcrow.svg) center/contain no-repeat}
.pu-sec h3{font-size:1.14rem;letter-spacing:-.005em}
.pu-mai p,.pu-mai li{max-width:48rem}
.pu-mai div:has(>.pu-tab)+p{margin-top:1.2em}
.pu-sec ul>li::marker{color:var(--c-main)}
ol.pu-ste>li::marker,.pu-sec ol>li::marker{color:var(--c-main);font-family:var(--c-f1);font-weight:700}
.pu-mai a:not(.pu-btn):not(.pu-cara):not(.pu-bro){text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .15s}
.pu-mai a:not(.pu-btn):not(.pu-cara):not(.pu-bro):hover{text-decoration:underline wavy var(--c-hi);text-decoration-thickness:1.5px;text-decoration-skip-ink:none}
code{font-size:.92em}

/* notes: amber margin flag */
.pu-not{position:relative;background:color-mix(in srgb,var(--c-hi) 8%,var(--c-card));border-left:3px solid var(--c-hi);border-radius:0 2px 2px 0;padding:1em 1.2em}
.pu-not::before{content:'';position:absolute;left:calc(-1 * var(--pm) + 1.15rem);top:1.05em;width:1.7rem;height:1.05rem;background:var(--c-hi);clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%)}
.pu-for{background:color-mix(in srgb,var(--c-main) 4%,var(--c-card));border:1px dashed color-mix(in srgb,var(--c-main) 60%,transparent);border-radius:2px;line-height:1.75}
.pu-fig img{border-radius:2px;border-color:color-mix(in srgb,var(--c-type) 14%,transparent)}
.pu-fig figcaption{font-style:italic;margin-top:.5rem}

/* tables: ruled like a house style sheet (wrapper matched via :has — the renamer splits .pu-tabwra) */
.pu-mai div:has(>.pu-tab){overflow-x:auto;border:0;border-top:2px solid var(--c-type);border-bottom:2px solid var(--c-type);border-radius:0;background:transparent;margin:1.6em 0}
.pu-tab caption{caption-side:top;text-align:left;font:italic .9rem/1.5 var(--c-text-font);color:var(--c-soft);padding:.55rem 0 .45rem}
.pu-tab thead th{background:transparent;font:700 .74rem/1.4 var(--c-f1);letter-spacing:.09em;text-transform:uppercase;color:var(--c-type);border-bottom:1px solid var(--c-type);padding-top:.7em}
.pu-tab td{border-bottom:1px solid color-mix(in srgb,var(--c-type) 10%,transparent);vertical-align:top}
.pu-tab tbody tr:last-child td{border-bottom:0}
.pu-tab tbody tr{transition:background .15s}
.pu-tab tbody tr:hover{background:color-mix(in srgb,var(--c-hi) 9%,transparent)}

/* FAQ: author queries */
.pu-faq details{border-bottom:1px solid color-mix(in srgb,var(--c-type) 12%,transparent);padding:.15rem 0}
.pu-faq summary{display:flex;align-items:flex-start;gap:.75rem;list-style:none;padding:.8rem 0;font-size:1.05rem;line-height:1.4}
.pu-faq summary::-webkit-details-marker{display:none}
.pu-faq summary::before{content:'';flex:0 0 auto;width:1.25rem;height:1.25rem;margin-top:.1rem;background:color-mix(in srgb,var(--c-hi) 75%,var(--c-type));-webkit-mask:url(/assets/img/d-query.svg) center/contain no-repeat;mask:url(/assets/img/d-query.svg) center/contain no-repeat;transition:transform .2s}
.pu-faq details[open] summary::before{background:var(--c-main)}
.pu-faq summary:hover{color:var(--c-main)}
.pu-faq details>p{margin:0 0 1rem 2rem}

/* ---------- guides: galley slips ---------- */
.pu-bli{gap:1.1rem}
.pu-bro{grid-template-columns:260px 1fr;gap:1.4rem;border:1px solid color-mix(in srgb,var(--c-type) 14%,transparent);border-radius:2px;background:var(--c-card);box-shadow:3px 3px 0 color-mix(in srgb,var(--c-main) 10%,transparent);transition:border-color .15s,box-shadow .15s}
.pu-bro:hover{border-color:var(--c-main);box-shadow:5px 5px 0 color-mix(in srgb,var(--c-hi) 30%,transparent)}
.pu-bro .pu-carimg{border-right:1px solid color-mix(in srgb,var(--c-type) 10%,transparent)}
.pu-bro .pu-cartxt{padding:1rem 1.4rem 1rem 0}
.pu-bro b{font-size:1.2rem;line-height:1.3;letter-spacing:-.01em}
.pu-bro:hover b{text-decoration:underline wavy var(--c-hi);text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-skip-ink:none}
.pu-carmet{font:700 .72rem/1.4 var(--c-f1);letter-spacing:.1em;text-transform:uppercase;color:var(--c-main)}
.pu-cara{border-radius:2px}
.pu-mai>.pu-lea{font-size:1.16rem;max-width:44em}

/* call to action: an "OK to print" strip */
.pu-cta{background:color-mix(in srgb,var(--c-main) 6%,var(--c-card));border:1px solid color-mix(in srgb,var(--c-main) 30%,transparent);border-left:4px solid var(--c-main);border-radius:2px;text-align:left;padding:1.2rem 1.4rem}
.pu-btn{background:var(--c-main);color:#fff;border-radius:2px;transition:background .15s}
.pu-btn:hover{background:color-mix(in srgb,var(--c-main) 82%,#000)}

/* ---------- article ---------- */
.pu-pos{max-width:48rem;margin:0}
.pu-poshea{margin:.4rem 0 1.4rem;padding-bottom:1.2rem;border-bottom:2px solid var(--c-type)}
.pu-poshea h1{position:relative;font-size:clamp(2rem,4.6vw,2.9rem);line-height:1.1;letter-spacing:-.02em}
.pu-poskic{font:700 .74rem/1 var(--c-f1);letter-spacing:.14em;color:var(--c-main)}
.pu-posmet{font:600 .8rem/1.5 var(--c-f1);letter-spacing:.06em;text-transform:uppercase;color:var(--c-soft)}
.pu-poscov img{border-radius:2px;border:1px solid color-mix(in srgb,var(--c-type) 12%,transparent);box-shadow:6px 6px 0 color-mix(in srgb,var(--c-main) 12%,transparent)}
.pu-pos .pu-lea{font-size:1.2rem;line-height:1.7}
.pu-pos .pu-lea::first-letter{font-weight:800;color:var(--c-main);font-size:3.3em;margin:.04em .12em 0 0}
/* contents: a column of margin notes, always in the flow */
.pu-pos .pu-toc--post.pu-toc--rail{position:static!important;background:transparent;border:0;border-left:2px solid var(--c-hi);border-radius:0;padding:.3rem 0 .3rem 1.2rem;margin:0 0 2rem}
.pu-toc--rail strong{display:block;font:700 .74rem/1.4 var(--c-f1);letter-spacing:.12em;text-transform:uppercase;color:var(--c-soft)}
.pu-toc--rail ol{padding-left:1.4rem;margin:.5rem 0 0}
.pu-toc--rail li{margin:.3rem 0}
.pu-toc--rail li::marker{color:var(--c-main);font:700 .85em var(--c-f1)}
.pu-toc--rail a{text-decoration:none;color:var(--c-type)}
.pu-toc--rail a:hover{color:var(--c-main)}
.pu-pos blockquote{border-left:3px solid var(--c-hi);font-family:var(--c-f1);font-size:1.15em;line-height:1.5;color:var(--c-type)}

/* ---------- footer: the proof stamp under the sheet ---------- */
.pu-foo{background:transparent;border-top:0;margin-top:2.4rem;padding:1.4rem 0 2.6rem;color:var(--c-soft)}
.pu-fooin>p{display:inline-block;margin:0;padding:.45rem .8rem;border:2px solid color-mix(in srgb,var(--c-hi) 70%,var(--c-type));border-radius:3px;color:color-mix(in srgb,var(--c-hi) 40%,var(--c-type));font:700 .9rem/1.4 var(--c-f1);transform:rotate(-1.2deg);max-width:100%}
.pu-foo nav{gap:.4rem 1.1rem}
.pu-foo a{color:var(--c-soft);text-decoration-thickness:1px}
.pu-foo a:hover{color:var(--c-main)}

/* ---------- phones: the margin folds into the text ---------- */
@media (max-width:760px){
  .pu-mai,.pu-mai:has(>.pu-pos){--pm:1rem;width:100%;margin-top:.3rem;padding:1.6rem 1rem 2.4rem;border-left:0;border-right:0;border-radius:0;background-image:none}
  .pu-her{grid-template-columns:1fr;gap:0}
  .pu-her::after{display:none}
  .pu-her h1::before,.pu-mai>h1::before,.pu-poshea h1::before,.pu-not::before{display:none}
  .pu-her h1,.pu-mai>h1{font-size:clamp(2rem,9vw,2.4rem)}
  .pu-sec>h2{padding-left:1.25rem}
  .pu-sec>h2::before{left:0;top:.2em;width:.85rem;height:1.05rem}
  .pu-bro{grid-template-columns:1fr;gap:0}
  .pu-bro .pu-carimg{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--c-type) 10%,transparent)}
  .pu-bro .pu-cartxt{padding:1rem 1.1rem 1.1rem}
  .pu-faq details>p{margin-left:0}
  .pu-cta{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .pu-nav>a,.pu-bro,.pu-btn,.pu-tab tbody tr,.pu-faq summary::before,.pu-lana--globe summary{transition:none}
}