/* ==========================================================================================================
   SecureYrHome.com, redesign 2026-10 "After dark": the INNER pages (ART-DIRECTION.md section 5).
   Loaded after syh.css (tokens, buttons, frame, home) and style.css (the earlier design's inner rules, which this file
   overrides). Every rule here is for the inner pages only: shared class names (.y-faq, .fq, .gd-card, .fq-card ...)
   are scoped with body:not(.y-home) so the home page never changes.
     1 inner tokens + base         2 heads (night photo head, steel head), crumbs, labels
     3 sections, dark bands, the single-element plate      4 accordions (plates; the trades' door plates)
     5 trade pages                 6 guides                 7 how it works            8 FAQ page
     9 pricing                    10 join                  11 contact                12 insights index + cards
    13 article                    14 legal                 15 404                    16 responsive
    17 review fixes 2026-10-14 (trade photos and bands, t-why list, lintels, door plates, ledger, pricing questions,
       404, insights index, join panel)
   One idea: graphite, one signal yellow, steel and white; Work Sans; thin yellow line drawings; every chamfer cut
   at the BOTTOM-RIGHT corner (buttons 10 px, plates 14 px, dark sections and heads 48 px).
   ========================================================================================================== */

/* ---------- 1. inner tokens + base ---------- */
/* the earlier design's tokens, re-pointed at the after-dark palette, so no old rule can bring cobalt, rounded
   corners or soft shadows back */
body:not(.y-home){
 --ink:#1B1E23;--text:#30353D;--mut:#5B6470;--line:#D9DCE1;--line2:#C3C8CF;--frost:#F1F2F4;--sky:#F1F2F4;
 --cobalt:#1B1E23;--cobalt-d:#1B1E23;--cobalt-l:#FFC21A;--night:#1B1E23;--night2:#23272D;--teal:#FFC21A;
 --sh1:none;--sh2:none;
 --in-cut:48px;
 background:var(--syh-graphite);color:var(--text)
}
body:not(.y-home) main{background:#fff}
body:not(.y-home) main h1,body:not(.y-home) main h2,body:not(.y-home) main h3,body:not(.y-home) main h4{color:var(--syh-graphite);text-wrap:balance}
body:not(.y-home) main :is(.y-phero,.y-dark,.y-band,.in-col.no) :is(h1,h2,h3){color:#fff}
body:not(.y-home) main .y-faq .fq h3{color:inherit}
body:not(.y-home) main a{color:var(--syh-graphite)}
body:not(.y-home) main a:hover{color:var(--syh-graphite)}
/* icons: one 1.5 px stroke, square caps, mitred joins (the inline icons were drawn with round caps) */
body:not(.y-home) main svg.ic{stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
/* links set in running text: graphite with a 2 px yellow underline that thickens on hover. Contents and topic lists
   (nav, the phone contents panel) are not running text: :where() keeps them out without raising the weight, so their
   own rules (.y-toc ol a, .toc-m ol a) win even before the scroll-spy gives a link a class */
body:not(.y-home) main :is(p,li,td,figcaption,small) a:not([class]):where(:not(nav a,.toc-m a)),body:not(.y-home) .legal a:where(:not(nav a,.toc-m a)){color:var(--syh-graphite);font-weight:600;text-decoration:underline;text-decoration-color:var(--syh-yellow);text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-thickness .2s}
body:not(.y-home) main :is(p,li,td,figcaption,small) a:not([class]):where(:not(nav a,.toc-m a)):hover,body:not(.y-home) .legal a:where(:not(nav a,.toc-m a)):hover{text-decoration-thickness:4px}
body:not(.y-home) .in-dark :is(p,li) a:not([class]){color:#fff}
.in-label{display:block;margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--syh-muted-light)}

/* ---------- 2. heads ---------- */
/* 2a. the content-page head (trades, guides, how it works, FAQ, contact): a night or dusk photo, graded cool, full
   bleed; from 768 px the text stands bottom-left on a graphite plate with the 28 px bottom-right chamfer (the home
   hero's plate), so the photo shows clear beside it; the 48 px chamfer at the head's bottom-right, cut in the colour
   of the section that follows (--cut) */
.y-phero{--cut:#fff;position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:620px;padding:calc(var(--hdr) + 96px) 0 0;background:var(--syh-graphite);color:#fff;overflow:hidden}
.y-phero.tall{min-height:min(760px,94vh)}
.y-phero.short{min-height:500px;padding-bottom:0}
.y-phero::after{content:"";position:absolute;right:0;bottom:0;z-index:3;width:var(--in-cut);height:var(--in-cut);background:var(--cut);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}
.y-faqp .y-phero,.y-contact .y-phero{--cut:var(--syh-steel)}
.y-phero .ph-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.08) brightness(.86)}
.y-phero .ph-shade{position:absolute;inset:0;z-index:-1;background:
 linear-gradient(180deg,rgba(27,30,35,.62) 0,rgba(27,30,35,0) 200px),
 linear-gradient(90deg,rgba(27,30,35,.5) 0,rgba(27,30,35,.16) 50%,rgba(27,30,35,0) 72%)}
.y-phero .ph-in{position:relative;display:block;width:100%}
.y-phero .ph-txt{max-width:820px;padding:44px 56px 56px;background:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
.y-phero h1{margin:0 0 22px;max-width:13.5em;font-size:54px;line-height:1;letter-spacing:-.035em;font-weight:800;color:#fff}
.y-phero.tall h1{font-size:58px;max-width:13.5em}
.y-phero .lede{margin:0 0 34px;max-width:36em;font-size:18px;line-height:1.58;font-weight:400;color:rgba(241,242,244,.86)}
.y-phero .hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
/* the trade or guide-group label above the h1: an uppercase line with its yellow line icon (no pill) */
body:not(.y-home) .y-pill{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:#fff}
body:not(.y-home) .y-pill .ic{width:22px;height:22px;color:var(--syh-yellow)}
body:not(.y-home) .y-pill::after{content:"";flex:0 0 48px;height:1.5px;background:var(--syh-yellow);opacity:.8}
/* guide heads: "8 steps / 8-item checklist / Free to read" as one ruled line with yellow line icons */
.y-phero .ph-meta{display:inline-flex;flex-wrap:wrap;margin:0 0 32px;padding:0;list-style:none;border-top:1px solid rgba(241,242,244,.22);border-bottom:1px solid rgba(241,242,244,.22);font-size:15px;font-weight:500;line-height:1.3;color:#fff}
.y-phero .ph-meta li{display:flex;align-items:center;gap:10px;padding:14px 26px 14px 0;margin-right:26px;border-right:1px solid rgba(241,242,244,.22)}
.y-phero .ph-meta li:last-child{margin-right:0;padding-right:0;border-right:0}
.y-phero .ph-meta .ic{width:20px;height:20px;color:var(--syh-yellow)}
.y-phero .hero-acts .y-btn .ic{width:18px;height:18px}

/* 2b. the steel head (insights, pricing, legal): crumbs, a large h1, the lede; no photo, no watermark */
body:not(.y-home) .y-lhead{position:relative;isolation:isolate;padding:calc(var(--hdr) + 72px) 0 80px;background:var(--syh-steel);overflow:visible}
body:not(.y-home) .y-lhead::before,body:not(.y-home) .y-ahead::before,body:not(.y-home) .y-join::before{content:none}
body:not(.y-home) .y-lhead h1{margin:0 0 18px;max-width:15em;font-size:60px;line-height:1.02;letter-spacing:-.035em;font-weight:800}
body:not(.y-home) .y-lhead .lede,body:not(.y-home) .y-ahead .lede,body:not(.y-home) .jn-head .lede{margin:0;max-width:42em;font-size:19px;line-height:1.58;color:var(--syh-muted-light)}

/* 2c. crumbs: small, quiet; chevrons in the muted tone; the current page in full colour */
body:not(.y-home) .y-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 26px;font-size:14px;font-weight:500;line-height:1.4}
body:not(.y-home) .y-crumbs a{display:inline-block;padding:3px 0;color:rgba(241,242,244,.74);text-decoration:none}
body:not(.y-home) .y-crumbs a:hover{color:var(--syh-yellow)}
body:not(.y-home) .y-crumbs i{display:flex}
body:not(.y-home) .y-crumbs i .ic{width:14px;height:14px;opacity:1;color:rgba(241,242,244,.5)}
body:not(.y-home) .y-crumbs span{color:#fff;font-weight:600}
body:not(.y-home) :is(.y-lhead,.y-ahead,.jn-head) .y-crumbs a{color:var(--syh-muted-light)}
body:not(.y-home) :is(.y-lhead,.y-ahead,.jn-head) .y-crumbs a:hover{color:var(--syh-graphite);text-decoration:underline;text-decoration-color:var(--syh-yellow);text-decoration-thickness:2px;text-underline-offset:4px}
body:not(.y-home) :is(.y-lhead,.y-ahead,.jn-head) .y-crumbs span{color:var(--syh-graphite)}
body:not(.y-home) :is(.y-lhead,.y-ahead,.jn-head) .y-crumbs i .ic{color:var(--syh-input-light)}

/* ---------- 3. sections, dark bands, plates ---------- */
body:not(.y-home) .y-sec{position:relative;padding:128px 0}
body:not(.y-home) .x.alt,body:not(.y-home) .y-alt{background:var(--syh-steel)}
body:not(.y-home) .y-dark{--cut:#fff;position:relative;background:var(--syh-graphite);color:var(--syh-muted-dark)}
body:not(.y-home) .y-dark::after{content:"";position:absolute;right:0;bottom:0;z-index:3;width:var(--in-cut);height:var(--in-cut);background:var(--cut);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}
body:not(.y-home) .y-dark h2,body:not(.y-home) .y-dark h3{color:#fff}
body:not(.y-home) .t-why,body:not(.y-home) .hw-pr{background:var(--syh-graphite)}
/* section heads: the h2 on the left, the sub line on the right, both on one baseline */
body:not(.y-home) .y-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:end;margin-bottom:56px}
body:not(.y-home) .y-head .yh-t{display:contents;max-width:none}
body:not(.y-home) .y-head h2{grid-column:1;margin:0;max-width:15em;font-size:46px;line-height:1.06;letter-spacing:-.03em;font-weight:800}
body:not(.y-home) .y-head .sub{grid-column:2;margin:0;max-width:46ch;font-size:17.5px;line-height:1.6;color:var(--syh-muted-light)}
body:not(.y-home) .y-dark .y-head .sub{color:var(--syh-muted-dark)}
body:not(.y-home) .y-head .yh-r{grid-column:2;justify-self:end;align-self:end}
body:not(.y-home) .y-head.center{text-align:left}
body:not(.y-home) .lead-p{font-size:18px;line-height:1.62;color:var(--text)}

/* the single-element plate: square, a 1 px line (inset shadow), the 14 px chamfer at the bottom-right (clip-path) with
   its diagonal line drawn as a background tile; --pl-bg / --pl-line set the plate, hover turns the line yellow */
body:not(.y-home) :is(.cp-list li,.x-card,.why-grid li,.ot,.gp,.g-check li,.g-close,.y-toc,.toc-m,.pr-cards li,.in-col,.fq-help,
 .y-faq .fq,.fq-card,.ctc,.ct-note,.cf-card,.jn-card,.y-card,.gd-card,.bl-feat,.pn,.a-take,.y-note,.in-note,.x-art,.hw-art .ha-plate,.ev-chips){
 position:relative;border:0;border-radius:0;box-shadow:inset 0 0 0 1px var(--pl-line,#D9DCE1);
 background:linear-gradient(to bottom right,transparent calc(50% - 1.1px),var(--pl-line,#D9DCE1) calc(50% - 1.1px),var(--pl-line,#D9DCE1) 50%,transparent 50%) 100% 100%/var(--pl-cut,14px) var(--pl-cut,14px) no-repeat,var(--pl-bg,#fff);
 clip-path:polygon(0 0,100% 0,100% calc(100% - var(--pl-cut,14px)),calc(100% - var(--pl-cut,14px)) 100%,0 100%);
 transition:box-shadow .25s,background-color .25s}
/* every plate states its own tone, so no plate inherits the tone of a plate around it */
body:not(.y-home) :where(.cp-list li,.x-card,.ot,.gp,.g-check li,.g-close,.y-toc,.toc-m,.in-col,.fq-help,.y-faq .fq,.fq-card,.ctc,.ct-note,.cf-card,.jn-card,.y-card,.gd-card,.pn,.a-take,.in-note,.ev-chips){--pl-bg:#fff;--pl-line:#D9DCE1}
/* plate tones (the rule above sets white with a light line; these come later with a higher weight) */
body:not(.y-home) main :is(.why-grid li,.pr-cards li){--pl-bg:#22262C;--pl-line:var(--syh-line-dark)}
body:not(.y-home) main :is(.y-toc,.x-art,.in-col.no,.y-note,.bl-feat){--pl-bg:var(--syh-graphite);--pl-line:var(--syh-graphite)}
body:not(.y-home) main :is(.gp,.toc-m,.fq-help,.a-take,.in-note){--pl-bg:var(--syh-steel);--pl-line:var(--syh-steel)}
body:not(.y-home) main .fq-page .fq-help{--pl-bg:#fff;--pl-line:#fff}
body:not(.y-home) main .alt :is(.gp,.fq-help){--pl-bg:#fff;--pl-line:#fff}
/* link plates: the line turns yellow on hover and focus */
body:not(.y-home) :is(a.ot,a.gd-card,a.ctc,a.pn,a.bl-feat,.y-card):is(:hover,:focus-within){--pl-line:var(--syh-yellow)}
body:not(.y-home) :is(a.ot,a.gd-card,a.ctc,a.pn,a.bl-feat):focus-visible{outline:3px solid var(--syh-graphite);outline-offset:-6px}
body:not(.y-home) a.bl-feat:focus-visible{outline-color:var(--syh-yellow)}

/* the line drawings (inner/InnerArt.tsx): yellow 1.5 px lines on a graphite plate */
.x-art{display:block;width:100%;color:var(--syh-yellow);aspect-ratio:4/3}
.x-art svg{display:block;width:100%;height:100%}
.ia .ia-soft{opacity:.42}
.ia .ia-mid{opacity:.7}
.ia .ia-fill{fill:var(--syh-graphite)}

/* ---------- 4. accordions ---------- */
/* plates: closed = a white (or steel) plate with a 1 px line; open = a graphite plate with white text */
body:not(.y-home) .y-faq .fq{--pl-bg:#fff;margin:0 0 12px;color:var(--syh-graphite)}
body:not(.y-home) .alt .y-faq .fq,body:not(.y-home) .y-alt .y-faq .fq,body:not(.y-home) .fq-page .y-faq .fq{--pl-bg:#fff;--pl-line:#fff}
body:not(.y-home) .y-faq .fq.open{--pl-bg:var(--syh-graphite);--pl-line:var(--syh-graphite);color:#fff}
body:not(.y-home) .y-faq h3{margin:0}
body:not(.y-home) .y-faq .fq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:22px 22px 22px 26px;border:0;background:none;text-align:left;font:600 17.5px/1.4 var(--syh-font);letter-spacing:-.005em;color:inherit;cursor:pointer}
body:not(.y-home) .y-faq .fq-q:hover>span{text-decoration:underline;text-decoration-color:var(--syh-yellow);text-decoration-thickness:2px;text-underline-offset:5px}
body:not(.y-home) .y-faq .fq-q:focus-visible{outline:3px solid var(--syh-graphite);outline-offset:-5px}
body:not(.y-home) .y-faq .fq.open .fq-q:focus-visible{outline-color:var(--syh-yellow)}
body:not(.y-home) .y-faq .fq-q i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;border:1px solid var(--syh-input-light);border-radius:0;background:none;color:var(--syh-graphite);transform:none;transition:border-color .2s,color .2s}
body:not(.y-home) .y-faq .fq-q i .ic{width:20px;height:20px;transition:transform .3s}
body:not(.y-home) .y-faq .fq.open .fq-q i{transform:none;background:none;border-color:var(--syh-yellow);color:var(--syh-yellow)}
body:not(.y-home) .y-faq .fq.open .fq-q i .ic{transform:rotate(45deg)}
body:not(.y-home) .y-faq .fq-a{padding:0 26px 30px}
body:not(.y-home) .y-faq .fq-a p{margin:0 0 12px;max-width:66ch;font-size:16.5px;line-height:1.65;color:rgba(241,242,244,.86)}
body:not(.y-home) .y-faq .fq-a p:last-child{margin-bottom:0}
body:not(.y-home) .y-faq .fq-a a:not([class]){color:#fff}

/* ---------- 5. trade pages ---------- */
/* 5a. t-caps: a tall photo with the bottom-right chamfer beside the h2 and three plates */
.t-caps .cap-photo{position:relative}
.t-caps .cap-photo>img{display:block;width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),calc(100% - 48px) 100%,0 100%);filter:saturate(.84) contrast(1.04)}
.t-caps .cap-float{display:none}
.t-caps h2{margin:0;max-width:13em;font-size:46px;line-height:1.06;letter-spacing:-.03em}
.cp-list{display:grid;gap:14px;margin:36px 0 0;padding:0;list-style:none}
body:not(.y-home) .cp-list li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:22px;padding:26px 28px 28px 26px}
.cp-list .cp-ic,.x-card .x-ic,.x-cols .x-ic,.why-grid .w-ic,.ot .ot-ic,.gp .gp-ic,.pr-cards .pr-ic,.gc-ic,.gcl-ic{display:flex;align-items:flex-start;justify-content:flex-start;width:auto;height:auto;flex:0 0 auto;border-radius:0;background:none;box-shadow:none;color:var(--syh-graphite)}
.cp-list .cp-ic .ic,.x-card .x-ic .ic,.x-cols .x-ic .ic{width:32px;height:32px}
.cp-list h3{margin:3px 0 8px;font-size:21px;line-height:1.25}
.cp-list p{margin:0;font-size:16px;line-height:1.6;color:var(--syh-muted-light)}

/* 5b. the middle sections: intros */
.x-intro h2{margin:0 0 20px;max-width:14em;font-size:44px;line-height:1.06;letter-spacing:-.03em}
.x-intro .lead-p{margin:0;max-width:46ch}
.x-intro.center{max-width:none;margin:0 0 56px;text-align:left;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:end}
.x-intro.center h2{margin:0}
.x-intro.center .lead-p{max-width:52ch;font-size:17.5px;color:var(--syh-muted-light)}
.v-cards .x-intro{position:sticky;top:calc(var(--hdr) + 48px)}

/* v-cards: white plate cards on steel, 2 x 2 */
body:not(.y-home) .x-card{height:100%;padding:32px 30px 34px}
.x-card .x-ic{margin-bottom:26px}
.x-card h3{margin:0 0 10px;font-size:21px;line-height:1.25}
.x-card p{margin:0;font-size:16px;line-height:1.6;color:var(--syh-muted-light)}

/* v-console: the line drawing (floor plan, door, section, elevation or lot plan) + check rows */
.v-console .x-art{max-width:600px}
.x-checks{margin:34px 0 0;padding:0;list-style:none;border-top:1.5px solid var(--syh-graphite)}
.x-checks li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:20px;padding:22px 0 24px;border-top:0;border-bottom:1px solid var(--syh-line-light)}
.x-checks>li>.ic{position:relative;width:32px;height:32px;padding:7px;margin-top:-2px;border-radius:0;background:var(--syh-yellow);color:var(--syh-graphite);clip-path:var(--clip-btn)}
.x-checks h3{margin:0 0 6px;font-size:19px;line-height:1.3}
.x-checks p{margin:0;font-size:16px;line-height:1.6;color:var(--syh-muted-light)}

/* v-rows: four columns divided by hairlines, line icons on top (a spec sheet, no boxes) */
.x-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:1.5px solid var(--syh-graphite)}
.x-cols.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
body:not(.y-home) .x-cols li{padding:34px 30px 8px 0;margin:0 30px 0 0;border:0;border-radius:0;background:none;border-right:1px solid var(--syh-line-light)}
body:not(.y-home) .x-cols li:last-child{border-right:0;margin-right:0}
body:not(.y-home) .alt .x-cols li{border-right-color:#CDD1D7}
.x-cols .x-ic{margin-bottom:24px}
.x-cols h3{margin:0 0 10px;font-size:20px;line-height:1.25}
.x-cols p{margin:0;font-size:15.5px;line-height:1.62;color:var(--syh-muted-light)}

/* v-checks: numbered key-cut rows (the number in a yellow chamfered square, the rule notched like a key) */
.x-lines{margin:0;padding:0;list-style:none;counter-reset:xl}
.x-lines li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:24px;padding:30px 0 30px;border-top:0;counter-increment:xl}
.x-lines li::before{content:counter(xl,decimal-leading-zero);grid-row:1/span 2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--syh-yellow);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;color:var(--syh-graphite);clip-path:var(--clip-btn)}
.x-lines li::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;pointer-events:none;background:
 linear-gradient(var(--syh-graphite),var(--syh-graphite)) 0 0/14px 1.5px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 .75H4L10 9L16 .75H20' fill='none' stroke='%231B1E23' stroke-width='1.5'/%3E%3C/svg%3E") 14px 0/20px 10px no-repeat,
 linear-gradient(var(--syh-line-light),var(--syh-line-light)) 34px 0/calc(100% - 34px) 1px no-repeat}
.x-lines li:first-child::after{background:
 linear-gradient(var(--syh-graphite),var(--syh-graphite)) 0 0/14px 1.5px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 .75H4L10 9L16 .75H20' fill='none' stroke='%231B1E23' stroke-width='1.5'/%3E%3C/svg%3E") 14px 0/20px 10px no-repeat,
 linear-gradient(var(--syh-graphite),var(--syh-graphite)) 34px 0/calc(100% - 34px) 1.5px no-repeat}
.x-lines li:last-child{border-bottom:1px solid var(--syh-line-light)}
.alt .x-lines li:last-child{border-bottom-color:#CDD1D7}
.x-lines h3{margin:4px 0 8px;font-size:21px;line-height:1.25}
.x-lines p{margin:0;max-width:60ch;font-size:16.5px;line-height:1.62;color:var(--syh-muted-light)}

/* y-band: a full-bleed night photo statement + Join Us (a short C3), chamfered */
body:not(.y-home) .y-band{--cut:#fff;position:relative;isolation:isolate;padding:132px 0;color:#fff;overflow:hidden;background:var(--syh-graphite)}
body:not(.y-home) .y-band::after{content:"";position:absolute;right:0;bottom:0;z-index:3;width:var(--in-cut);height:var(--in-cut);background:var(--cut);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}
.t-dealers .y-band,.t-smarthome .y-band,.t-windowsdoors .y-band{--cut:var(--syh-steel)}
.y-band .bd-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(1.06) brightness(.78)}
.y-band .bd-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(27,30,35,.92) 0%,rgba(27,30,35,.76) 52%,rgba(27,30,35,.52) 100%)}
.y-band .bd-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px 64px}
.y-band .bd-in::before{content:"";grid-column:1/-1;width:44px;height:52px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52'%3E%3Cg fill='none' stroke='%23FFC21A' stroke-width='1.5' stroke-linejoin='miter'%3E%3Cpath d='M22 1.5 42 9v15c0 13-8.5 22-20 26.5C10.5 46 2 37 2 24V9z'/%3E%3Cpath d='M18.4 27.6a5.6 5.6 0 1 1 7.2 0L27.5 37h-11z'/%3E%3C/g%3E%3C/svg%3E") 0 0/44px 52px no-repeat}
.y-band .bd-in .y-btn{justify-self:start}
.y-band .bd-in p{max-width:20em;margin:0;font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-.03em;color:#fff;text-wrap:balance}

/* t-why: five plates on graphite */
.t-why .y-head h2{max-width:13em}
.why-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
body:not(.y-home) .why-grid li,body:not(.y-home) .why-grid.n5 li:nth-child(4),body:not(.y-home) .why-grid.n5 li:nth-child(5),body:not(.y-home) .why-grid.n4 li{grid-column:auto;padding:30px 24px 34px}
.why-grid .w-ic{margin-bottom:34px;color:var(--syh-yellow)}
.why-grid .w-ic .ic{width:32px;height:32px}
.why-grid h3{margin:0 0 10px;font-size:19px;line-height:1.28}
.why-grid p{margin:0;font-size:15px;line-height:1.6;color:var(--syh-muted-dark)}

/* t-faq: the side (h2, lead, call and email lines), then the door plates; "Other solutions" plates under them */
body:not(.y-home) .fq-side h2{margin:0 0 18px;font-size:40px;line-height:1.08;letter-spacing:-.03em}
body:not(.y-home) .fq-side .lead-p{margin:0;font-size:17.5px;color:var(--syh-muted-light)}
body:not(.y-home) .fq-side>.fq-lines{margin:30px 0 0;padding:0;border:0;border-radius:0;border-top:1.5px solid var(--syh-graphite)}
body:not(.y-home) .ct-line{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--syh-line-light);font-weight:600;font-size:16.5px;color:var(--syh-graphite);text-decoration:none}
body:not(.y-home) .ct-line+.ct-line{border-top:0}
body:not(.y-home) .ct-line:hover{color:var(--syh-graphite)}
body:not(.y-home) .ct-line:hover>span:last-child{text-decoration:underline;text-decoration-color:var(--syh-yellow);text-decoration-thickness:2px;text-underline-offset:4px}
body:not(.y-home) .ct-line small{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-light)}
body:not(.y-home) .ct-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--syh-input-light);border-radius:0;background:none;color:var(--syh-graphite)}
body:not(.y-home) .ct-ic .ic{width:21px;height:21px}
/* the door plates: closed plates are steel; the open one is graphite and wide */
body:not(.y-home) .t-faq .y-faq .fq{--pl-bg:var(--syh-steel);--pl-line:var(--syh-steel)}
body:not(.y-home) .t-faq .y-faq .fq.open{--pl-bg:var(--syh-graphite);--pl-line:var(--syh-graphite)}
.ot-wrap{margin-top:96px;padding-top:0;border-top:0}
.ot-h{display:flex;align-items:center;gap:18px;margin:0 0 24px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-graphite)}
.ot-h::after{content:"";flex:1;height:1px;background:var(--syh-line-light)}
.ot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
body:not(.y-home) a.ot{display:flex;flex-direction:column;gap:18px;padding:26px 24px 30px;color:var(--syh-graphite);text-decoration:none}
.ot .ot-ic .ic{width:30px;height:30px}
.ot b{display:block;font-size:18px;font-weight:700;line-height:1.25}
.ot small{display:block;margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--syh-muted-light)}
body:not(.y-home) .ot .go{position:absolute;top:26px;right:24px;width:20px;height:20px;color:var(--syh-graphite);transition:transform .25s}
body:not(.y-home) .ot:hover .go{transform:translateX(4px)}

/* ---------- 6. guides ---------- */
.g-lead{margin:0 0 8px;max-width:68ch}
.g-lead .g-first{margin:0 0 22px;font-size:22px;line-height:1.55;font-weight:400;color:var(--syh-graphite)}
.g-lead p{font-size:17.5px;line-height:1.72}
/* a step: the rule above it is notched like a key; the number in a yellow chamfered square beside "Step N of M" */
.gs{position:relative;margin-top:64px;padding-top:56px;border-top:0;scroll-margin-top:calc(var(--hdr) + 24px)}
.gs::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;pointer-events:none;background:
 linear-gradient(var(--syh-graphite),var(--syh-graphite)) 0 0/18px 1.5px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 .75H5L12 11L19 .75H24' fill='none' stroke='%231B1E23' stroke-width='1.5'/%3E%3C/svg%3E") 18px 0/24px 12px no-repeat,
 linear-gradient(var(--syh-line-light),var(--syh-line-light)) 42px 0/calc(100% - 42px) 1px no-repeat}
.gs-n{display:flex;align-items:center;gap:16px;margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-light)}
.gs-n span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border-radius:0;background:var(--syh-yellow);box-shadow:none;font-size:17px;font-weight:800;letter-spacing:0;color:var(--syh-graphite);font-variant-numeric:tabular-nums;clip-path:var(--clip-btn)}
.gs h2{margin:0 0 18px;max-width:22em;font-size:34px;line-height:1.12;letter-spacing:-.028em}
.gs>p,.g-main>p{max-width:68ch;font-size:17.5px;line-height:1.75;color:var(--text)}
.gp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
body:not(.y-home) .gp{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:16px;padding:22px 24px 24px 22px;border-radius:0}
.gp .gp-ic{width:auto;height:auto;padding-top:1px}
.gp .gp-ic .ic{width:24px;height:24px}
.gp h3{margin:2px 0 6px;font-size:17px;line-height:1.3}
.gp p{margin:0;font-size:15.5px;line-height:1.6;color:var(--syh-muted-light)}
.gp-grid>:last-child:nth-child(odd){grid-column:1/-1}
/* the figure: a chamfered photo, caption on a hairline */
.g-fig,.a-fig{margin:64px 0 0}
.g-fig img,body:not(.y-home) .a-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%);filter:saturate(.88) contrast(1.03)}
.g-fig figcaption,body:not(.y-home) .a-fig figcaption{display:flex;gap:12px;margin-top:14px;font-size:14px;line-height:1.5;text-align:left;color:var(--syh-muted-light)}
.g-fig figcaption::before,body:not(.y-home) .a-fig figcaption::before{content:"";flex:0 0 24px;height:1.5px;margin-top:10px;background:var(--syh-graphite)}
/* the checklist: a steel panel of white plates; each box a square that fills yellow (chamfered) when ticked */
.g-check{position:relative;margin-top:72px;padding:40px 36px 36px;border-radius:0;background:var(--syh-steel);color:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%);scroll-margin-top:calc(var(--hdr) + 24px)}
.gc-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:20px;align-items:start;margin-bottom:28px}
.gc-h .gc-ic{width:auto;height:auto;padding-top:4px;color:var(--syh-graphite)}
.gc-h .gc-ic .ic{width:32px;height:32px}
.gc-h h2{margin:0 0 6px;font-size:28px;line-height:1.15;color:var(--syh-graphite)}
.gc-h p{margin:0;font-size:15px;color:var(--syh-muted-light)}
.gc-h b{margin:4px 0 0;padding:8px 14px 7px;border-radius:0;background:var(--syh-graphite);font-size:13px;font-weight:600;letter-spacing:.06em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.g-check ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
body:not(.y-home) .g-check li{--pl-bg:#fff;--pl-line:#fff}
body:not(.y-home) .g-check li:hover{--pl-line:var(--syh-input-light)}
.g-check label{display:flex;align-items:flex-start;gap:14px;height:100%;padding:18px 20px 20px;border:0;border-radius:0;background:none;font-size:15.5px;line-height:1.5;color:var(--syh-graphite);cursor:pointer}
.g-check label:hover{background:none}
.g-check input{position:absolute;opacity:0;pointer-events:none}
.g-check .cb{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;margin-top:-1px;border:1.5px solid var(--syh-graphite);border-radius:0;color:transparent;transition:background-color .2s,border-color .2s}
.g-check .cb .ic{width:16px;height:16px;stroke-width:2}
.g-check input:focus-visible+.cb{outline:3px solid var(--syh-graphite);outline-offset:3px}
.g-check li.done .cb{background:var(--syh-yellow);border-color:var(--syh-yellow);color:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)}
.g-check li.done label>span:last-child{text-decoration:line-through;text-decoration-color:var(--syh-graphite);opacity:.6}
.g-check li:last-child:nth-child(odd){grid-column:1/-1}
/* the guide's questions and the closing note */
.g-faq{margin-top:72px;scroll-margin-top:calc(var(--hdr) + 24px)}
.g-faq h2{margin:0 0 24px;font-size:34px;letter-spacing:-.028em}
body:not(.y-home) .g-faq .y-faq .fq{--pl-bg:var(--syh-steel);--pl-line:var(--syh-steel)}
body:not(.y-home) .g-faq .y-faq .fq.open{--pl-bg:var(--syh-graphite);--pl-line:var(--syh-graphite)}
body:not(.y-home) .g-close{--pl-bg:var(--syh-graphite);--pl-line:var(--syh-graphite);display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:22px;margin-top:56px;padding:32px 34px 36px 30px}
.g-close .gcl-ic{width:auto;height:auto;color:var(--syh-yellow)}
.g-close .gcl-ic .ic{width:36px;height:36px}
.g-close p{margin:0;font-size:17px;line-height:1.7;color:rgba(241,242,244,.88)}

/* the side contents: a graphite plate, the yellow progress bar, numbered rows; the promo below a hairline */
body:not(.y-home) .y-toc{padding:26px 24px 28px;color:#fff}
body:not(.y-home) .toc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
body:not(.y-home) .toc-top b{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff}
body:not(.y-home) .toc-top small{font-size:13px;font-weight:600;color:var(--syh-muted-dark);font-variant-numeric:tabular-nums}
body:not(.y-home) .toc-bar{height:3px;margin-bottom:10px;border-radius:0;background:var(--syh-line-dark);overflow:hidden}
body:not(.y-home) .toc-bar i{display:block;width:0;height:100%;background:var(--syh-yellow);transition:width .3s}
body:not(.y-home) .y-toc ol{margin:0 -6px;padding:0;list-style:none;max-height:calc(100vh - var(--hdr) - 330px);max-height:calc(100svh - var(--hdr) - 330px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--syh-line-dark) transparent}
body:not(.y-home) .y-toc ol a{position:relative;display:flex;align-items:flex-start;gap:12px;padding:10px 8px;border-radius:0;font-size:14.5px;font-weight:500;line-height:1.4;color:rgba(241,242,244,.78);text-decoration:none;transition:color .2s,background-color .2s}
body:not(.y-home) .y-toc ol a:hover{background:rgba(255,255,255,.05);color:#fff}
body:not(.y-home) .y-toc .n{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;margin-top:-3px;border:1px solid var(--syh-line-dark);border-radius:0;background:none;font-size:12px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
body:not(.y-home) .y-toc ol.dots a::before{content:"";width:6px;height:6px;flex:0 0 6px;margin-top:7px;border-radius:0;background:var(--syh-input-dark)}
body:not(.y-home) .y-toc ol a.active{background:none;color:#fff;font-weight:600}
body:not(.y-home) .y-toc ol a.active::after{content:"";position:absolute;left:-18px;top:8px;bottom:8px;width:3px;background:var(--syh-yellow)}
body:not(.y-home) .y-toc ol a.active .n{border-color:var(--syh-yellow);background:var(--syh-yellow);color:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)}
body:not(.y-home) .y-toc ol.dots a.active::before{background:var(--syh-yellow)}
body:not(.y-home) .toc-more{display:grid;gap:0;margin:14px 0 0;padding-top:8px;border-top:1px solid var(--syh-line-dark)}
body:not(.y-home) .toc-more a{display:flex;align-items:center;gap:12px;padding:10px 2px;border-radius:0;font-weight:600;font-size:14.5px;color:#fff;text-decoration:none}
body:not(.y-home) .toc-more a:hover{background:none;color:var(--syh-yellow)}
body:not(.y-home) .toc-more .ic{width:20px;height:20px;color:var(--syh-yellow)}
body:not(.y-home) .toc-pro{margin:18px 0 0;padding:20px 0 0;border-top:1px solid var(--syh-line-dark);border-radius:0;background:none;color:var(--syh-muted-dark)}
body:not(.y-home) .toc-pro b{display:block;font-size:17px;font-weight:700;color:#fff}
body:not(.y-home) .toc-pro p{margin:6px 0 16px;font-size:14.5px;line-height:1.55}
/* the phone and tablet contents panel (also the admin's legal HTML): a steel plate */
body:not(.y-home) .toc-m{display:none}
/* more guides + related articles (steel): plate cards */
.g-more .y-head{margin-bottom:44px}
.gd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
body:not(.y-home) a.gd-card{display:flex;flex-direction:column;height:100%;overflow:visible;color:var(--syh-graphite);text-decoration:none;transform:none}
body:not(.y-home) a.gd-card:hover{transform:none;box-shadow:inset 0 0 0 1px var(--pl-line);color:var(--syh-graphite)}
body:not(.y-home) .gd-card .gd-img{display:block;aspect-ratio:16/10;overflow:hidden;margin:1px 1px 0}
body:not(.y-home) .gd-card .gd-img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.03);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
body:not(.y-home) .gd-card:hover .gd-img img{transform:scale(1.04)}
body:not(.y-home) .gd-card .gd-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 28px}
body:not(.y-home) .gd-card .gd-g{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:var(--syh-muted-light)}
body:not(.y-home) .gd-card .gd-g .ic{width:18px;height:18px;color:var(--syh-graphite)}
body:not(.y-home) .gd-card .gd-body b{margin:12px 0 8px;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.012em;color:var(--syh-graphite)}
body:not(.y-home) .gd-card .gd-body small{font-size:15px;line-height:1.55;color:var(--syh-muted-light)}
body:not(.y-home) .gd-card .gd-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-weight:600;font-size:15px;color:var(--syh-graphite)}
body:not(.y-home) .gd-card .gd-go .ic{width:18px;height:18px;color:var(--syh-graphite);transition:transform .25s}
body:not(.y-home) .gd-card:hover .gd-go .ic{transform:translateX(4px)}
.gm-reads{margin-top:80px}
.gm-h{display:flex;align-items:center;gap:18px;margin:0 0 24px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-graphite)}
.gm-h::after{content:"";flex:1;height:1px;background:#CDD1D7}

/* ---------- 7. how it works ---------- */
/* five steps as rows: number plate, text, and the step's line drawing on a plate (graphite, or steel on even rows);
   rows are divided by a full-width rule notched like a key */
.hw-steps{padding-top:112px}
.hw-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.hw-row{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 96px;align-items:center;padding:72px 0}
.hw-row:first-child{padding-top:0}
.hw-row+.hw-row::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;pointer-events:none;background:
 linear-gradient(var(--syh-graphite),var(--syh-graphite)) 0 0/18px 1.5px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 .75H5L12 11L19 .75H24' fill='none' stroke='%231B1E23' stroke-width='1.5'/%3E%3C/svg%3E") 18px 0/24px 12px no-repeat,
 linear-gradient(var(--syh-line-light),var(--syh-line-light)) 42px 0/calc(100% - 42px) 1px no-repeat}
.hw-txt{max-width:520px}
.hw-n{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 0 26px;background:var(--syh-yellow);font-size:28px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--syh-graphite);-webkit-text-stroke:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);font-variant-numeric:tabular-nums}
.hw-k{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-light)}
.hw-txt h2{margin:0 0 18px;font-size:42px;line-height:1.06;letter-spacing:-.03em}
.hw-txt p{margin:0;font-size:17.5px;line-height:1.7;color:var(--text)}
.hw-art{display:block}
body:not(.y-home) .hw-art .ha-plate{display:block;aspect-ratio:4/3;--pl-bg:var(--syh-graphite);--pl-line:var(--syh-graphite);color:var(--syh-yellow)}
body:not(.y-home) .hw-row.flip .hw-art .ha-plate{--pl-bg:var(--syh-steel);--pl-line:var(--syh-steel);color:var(--syh-graphite)}
.hw-row.flip .ia .ia-fill{fill:var(--syh-steel)}
.hw-art .ha-plate svg{display:block;width:100%;height:100%}
/* desktop: the five steps read as one key turned on end. A 2 px graphite blade runs down the gutter, cut at each step
   (the home's key-bitting steps, vertical; each cut a different depth), and the rows zig-zag: steps 2 and 4 put their
   drawing on the left. Phones keep text, then drawing, under the notched rules. */
@media (min-width:992px){
 .hw-list{position:relative}
 .hw-list::before{content:"";position:absolute;left:50%;top:0;bottom:72px;width:2px;margin-left:-1px;background:var(--syh-graphite);pointer-events:none}
 .hw-list>.hw-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:120px;align-items:start}
 .hw-list>.hw-row.flip .hw-txt{order:2}
 .hw-row+.hw-row::before{content:none}
 .hw-row::after{content:"";position:absolute;left:50%;top:104px;width:var(--kc,18px);height:var(--kc,18px);background:#fff;border-top:2px solid var(--syh-graphite);border-right:2px solid var(--syh-graphite);transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
 .hw-row:first-child::after{top:32px}
 .hw-row:nth-child(1){--kc:16px}
 .hw-row:nth-child(2){--kc:27px}
 .hw-row:nth-child(3){--kc:21px}
 .hw-row:nth-child(4){--kc:31px}
 .hw-row:nth-child(5){--kc:19px}
}
/* what we stand by: three plates on graphite, the head to the left of them */
.hw-pr .y-head{margin-bottom:48px}
.pr-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
body:not(.y-home) .pr-cards li{padding:32px 30px 36px}
.pr-cards .pr-ic{margin-bottom:34px;color:var(--syh-yellow)}
.pr-cards .pr-ic .ic{width:34px;height:34px}
.pr-cards h3{margin:0 0 10px;font-size:21px;line-height:1.25}
.pr-cards p{margin:0;font-size:15.5px;line-height:1.62;color:var(--syh-muted-dark)}
/* is / is not: a lintel photo, then one graphite ledger plate (the heading on the left; "SecureYrHome is" and "It is
   not" either side of a rule topped by the yellow keyhole, rows marked with a yellow line check or a yellow line X),
   then the members' note as one steel line under the plate */
.hw-isnot .in-photo{margin:0 0 12px;overflow:hidden}
.hw-isnot .in-photo img{display:block;width:100%;height:auto;aspect-ratio:21/8;object-fit:cover;border-radius:0;clip-path:none;filter:saturate(.8) contrast(1.04)}
.in-ledger{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:64px;padding:60px 60px 64px;background:var(--syh-graphite);color:#fff;clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),calc(100% - 48px) 100%,0 100%)}
.hw-isnot .in-ledger h2{margin:0;max-width:8em;font-size:44px;line-height:1.06;letter-spacing:-.03em;color:#fff}
.in-grid{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);column-gap:44px;margin:0}
.in-rule{position:relative;display:block;background:var(--syh-line-dark)}
.in-rule .ic{display:none}
/* the keyhole on top of the rule: a 1.5 px line drawing on a graphite patch that opens the rule */
.in-rule::before{content:"";position:absolute;left:50%;top:0;box-sizing:content-box;width:24px;height:34px;margin-left:-12px;padding:0 0 10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'%3E%3Cpath d='M8.6 15.2a6 6 0 1 1 6.8 0L17 30H7z' fill='none' stroke='%23FFC21A' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E") 0 0/24px 34px no-repeat,var(--syh-graphite)}
body:not(.y-home) .hw-isnot .in-ledger .in-col{padding:0;box-shadow:none;background:none;clip-path:none;color:#fff}
.hw-isnot .in-col h3{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:20px;line-height:1.25;color:#fff}
.hw-isnot .in-col h3 .ic{width:28px;height:28px;padding:5px;flex:0 0 28px}
body:not(.y-home) .hw-isnot .in-col.yes h3 .ic{background:var(--syh-yellow);color:var(--syh-graphite);clip-path:var(--clip-btn)}
body:not(.y-home) .hw-isnot .in-col.no h3 .ic{padding:4px;background:none;border:1.5px solid var(--syh-yellow);color:var(--syh-yellow);clip-path:none}
.hw-isnot .in-col ul{margin:0;padding:0;list-style:none}
body:not(.y-home) .hw-isnot .in-col li{position:relative;padding:14px 0 14px 34px;border-top:1px solid var(--syh-line-dark);font-size:16px;line-height:1.5;color:rgba(241,242,244,.9)}
.hw-isnot .in-col li::before{content:"";position:absolute;left:2px;top:15px;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10.5l4 4 9-9' fill='none' stroke='%23FFC21A' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") 0 0/20px 20px no-repeat}
.hw-isnot .in-col.no li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5 5 15' fill='none' stroke='%23FFC21A' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E")}
body:not(.y-home) .hw-isnot .in-note{display:flex;align-items:center;gap:16px;margin:12px 0 0;padding:20px 28px 20px 24px;font-size:15.5px;line-height:1.55;color:var(--syh-graphite)}
body:not(.y-home) .in-note .ic{width:26px;height:26px;flex:0 0 26px;margin:0;color:var(--syh-graphite)}

/* ---------- 8. FAQ page ---------- */
/* steel page; the topics as a sticky graphite plate with the call and email plate under it; four numbered groups */
.y-faqp .fq-page{background:var(--syh-steel);padding-top:112px}
body:not(.y-home) .fq-nav ol a{font-size:15px}
body:not(.y-home) .fq-help{margin-top:12px;padding:24px 22px 18px}
.fq-help h3{margin:0 0 4px;font-size:19px}
.fq-help p{margin:0 0 6px;font-size:14.5px;line-height:1.55;color:var(--syh-muted-light)}
body:not(.y-home) .fq-help .ct-line{font-size:15px;padding:14px 0;border-bottom-color:#CDD1D7}
body:not(.y-home) .fq-help .ct-line:last-child{border-bottom:0}
body:not(.y-home) .fq-help .ct-ic{width:40px;height:40px;flex-basis:40px}
.fq-page{counter-reset:fg}
.fq-page .fg{margin:0 0 72px;scroll-margin-top:calc(var(--hdr) + 24px);counter-increment:fg}
.fq-page .fg:last-child{margin-bottom:0}
.fq-page .fg h2{display:flex;align-items:center;gap:18px;margin:0 0 24px;font-size:34px;letter-spacing:-.028em}
.fq-page .fg h2::before{content:counter(fg,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;background:var(--syh-graphite);font-size:16px;font-weight:700;letter-spacing:0;color:var(--syh-yellow);clip-path:var(--clip-btn);font-variant-numeric:tabular-nums}

/* ---------- 9. pricing ---------- */
/* steel head: h1 and lede left; the four inclusions as one ruled strip under them */
body:not(.y-home) .pr-head{padding-bottom:72px;text-align:left}
body:not(.y-home) .pr-head .y-crumbs{justify-content:flex-start}
body:not(.y-home) .pr-head .lede{margin:0}
body:not(.y-home) .ev-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:48px 0 0;padding:0;list-style:none;--pl-bg:#fff;--pl-line:#fff}
body:not(.y-home) .ev-chips li{display:flex;align-items:center;gap:14px;padding:22px 24px;border:0;border-radius:0;background:none;border-right:1px solid var(--syh-line-light);font-size:15.5px;font-weight:600;line-height:1.35;color:var(--syh-graphite)}
body:not(.y-home) .ev-chips li:last-child{border-right:0}
body:not(.y-home) .ev-chips .ic{width:28px;height:28px;flex:0 0 28px;color:var(--syh-graphite)}
/* the plans on graphite: three columns read as one table; Standard is raised on a yellow plate */
.y-plans-page{--cut:#fff;position:relative;padding:120px 0 112px;background:var(--syh-graphite);color:#fff}
.y-plans-page::after{content:"";position:absolute;right:0;bottom:0;z-index:3;width:var(--in-cut);height:var(--in-cut);background:var(--cut);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}
.pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:0;margin:0;align-items:stretch;border:1px solid var(--syh-line-dark)}
body:not(.y-home) .pl{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;margin:0;padding:36px 34px 38px;border:0;border-left:1px solid var(--syh-line-dark);border-radius:0;background:none;box-shadow:none;color:#fff}
body:not(.y-home) .pl:first-child{border-left:0}
body:not(.y-home) .pl.featured{z-index:1;margin:-24px 0;padding-top:60px;padding-bottom:62px;border:0;background:var(--syh-yellow);color:var(--syh-graphite);box-shadow:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
body:not(.y-home) .pl.featured+.pl{border-left:0}
body:not(.y-home) .pl-badge{position:absolute;top:24px;left:34px;padding:6px 10px 5px;border-radius:0;background:var(--syh-graphite);box-shadow:none;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;color:var(--syh-yellow)}
body:not(.y-home) .pl-top{display:flex;flex-direction:column;padding-bottom:30px;border-bottom:1px solid var(--syh-line-dark)}
body:not(.y-home) .pl.featured .pl-top{border-bottom-color:rgba(27,30,35,.22)}
body:not(.y-home) .pl-tag{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-dark)}
body:not(.y-home) .pl.featured .pl-tag{color:rgba(27,30,35,.74)}
body:not(.y-home) .pl h2{margin:0 0 22px;font-size:32px;font-weight:800;letter-spacing:-.025em;color:#fff}
body:not(.y-home) .pl.featured h2{color:var(--syh-graphite)}
body:not(.y-home) .pl-price{display:flex;align-items:flex-end;gap:14px;margin:0 0 18px;padding-top:20px;border-top:1px solid var(--syh-line-dark)}
body:not(.y-home) .pl.featured .pl-price{border-top-color:rgba(27,30,35,.22)}
body:not(.y-home) .pl-price b{font-size:64px;line-height:.9;font-weight:800;letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
body:not(.y-home) .pl.featured .pl-price b{color:var(--syh-graphite)}
body:not(.y-home) .pl-price span{display:flex;flex-direction:column;padding-bottom:4px;font-size:14px;line-height:1.35;color:var(--syh-muted-dark)}
body:not(.y-home) .pl-price s{color:var(--syh-muted-dark);text-decoration-thickness:1.5px}
body:not(.y-home) .pl.featured .pl-price span,body:not(.y-home) .pl.featured .pl-price s{color:rgba(27,30,35,.74)}
body:not(.y-home) .pl-b{min-height:0;flex:1 0 auto;margin:0 0 28px;font-size:15.5px;line-height:1.58;color:rgba(241,242,244,.8)}
body:not(.y-home) .pl.featured .pl-b{color:rgba(27,30,35,.86)}
body:not(.y-home) .pl-inc{margin:26px 0 6px;padding:0;border:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-dark)}
body:not(.y-home) .pl.featured .pl-inc{color:rgba(27,30,35,.74)}
body:not(.y-home) .pl-f{display:block;margin:0;padding:0;list-style:none;font-size:15px;line-height:1.5}
body:not(.y-home) .pl-f li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--syh-line-dark);color:#fff}
body:not(.y-home) .pl-f li:last-child{border-bottom:0}
body:not(.y-home) .pl-f .ic{width:18px;height:18px;flex:0 0 18px;margin-top:2px;color:var(--syh-yellow)}
body:not(.y-home) .pl.featured .pl-f li{border-bottom-color:rgba(27,30,35,.2);color:var(--syh-graphite)}
body:not(.y-home) .pl.featured .pl-f .ic{color:var(--syh-graphite)}
/* buttons on graphite: the secondary chamfer (yellow outline); on the yellow plate: graphite fill */
.y-plans-page .y-btn.outline{color:#fff}
.y-plans-page .y-btn.outline::before{background:var(--syh-yellow)}
.y-plans-page .y-btn.outline::after{content:"";background:var(--syh-graphite)}
.y-plans-page .y-btn.outline:hover{color:var(--syh-graphite)}
.y-plans-page .y-btn.outline:hover::after{background:var(--syh-yellow-hover)}
.y-plans-page .pl.featured .y-btn.primary{color:#fff}
.y-plans-page .pl.featured .y-btn.primary::before{background:var(--syh-graphite)}
.y-plans-page .pl.featured .y-btn.primary:hover{color:var(--syh-yellow)}
.y-plans-page .pl.featured :focus-visible{outline-color:var(--syh-graphite)}
.y-plans-page :focus-visible{outline-color:var(--syh-yellow)}
body:not(.y-home) .pl-note{display:flex;justify-content:flex-start;align-items:center;gap:12px;margin:56px 0 0;font-size:15px;color:var(--syh-muted-dark)}
body:not(.y-home) .pl-note .ic{width:22px;height:22px;color:var(--syh-yellow)}
/* the comparison: a graphite header row, the Standard column marked in yellow, hairline rows, tabular figures */
.pr-compare .y-head{margin-bottom:44px}
body:not(.y-home) .cmp-wrap{overflow-x:auto;border:0;border-radius:0;background:#fff}
body:not(.y-home) .cmp{width:100%;min-width:780px;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:15.5px;line-height:1.5;color:var(--syh-graphite);font-variant-numeric:tabular-nums}
body:not(.y-home) .cmp th,body:not(.y-home) .cmp td{padding:18px 22px;border-bottom:1px solid var(--syh-line-light);vertical-align:top;text-align:left;background:none}
body:not(.y-home) .cmp thead th{padding:24px 22px 22px;border-bottom:0;background:var(--syh-graphite);font-size:22px;font-weight:800;letter-spacing:-.015em;color:#fff}
body:not(.y-home) .cmp thead th:first-child{width:24%}
body:not(.y-home) .cmp thead th span:not(.visually-hidden){display:block}
body:not(.y-home) .cmp thead th a{display:inline-block;margin-top:6px;padding:4px 0;font-size:14px;font-weight:600;letter-spacing:0;color:var(--syh-yellow);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
body:not(.y-home) .cmp thead th a:hover{color:var(--syh-yellow-hover);text-decoration-thickness:3px}
body:not(.y-home) .cmp thead th a:focus-visible{outline-color:var(--syh-yellow)}
body:not(.y-home) .cmp thead th:nth-child(3){position:relative;background:#262A30;box-shadow:inset 0 4px 0 var(--syh-yellow)}
body:not(.y-home) .cmp tbody th{font-weight:600;color:var(--syh-graphite)}
body:not(.y-home) .cmp td:nth-child(3){background:#FFF7DE}
body:not(.y-home) .cmp tbody tr:last-child th,body:not(.y-home) .cmp tbody tr:last-child td{border-bottom:1.5px solid var(--syh-graphite)}
body:not(.y-home) .cmp tbody tr:first-child td{font-size:20px;font-weight:800;letter-spacing:-.01em}
body:not(.y-home) .cmp .na{color:var(--syh-muted-light);font-style:normal}
body:not(.y-home) .cmp .na::before{content:"\2014\00a0"}
/* the phone switcher (main.js): three square buttons, the chosen one graphite */
@media (max-width:699.98px){
 .js body:not(.y-home) .cmp-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:none;margin:0 0 18px;padding:0;border:1px solid var(--syh-graphite);border-radius:0;background:#fff}
 .js body:not(.y-home) .cmp-switch button{height:48px;border:0;border-left:1px solid var(--syh-graphite);border-radius:0;background:#fff;box-shadow:none;font:600 15px/1 var(--syh-font);color:var(--syh-graphite)}
 .js body:not(.y-home) .cmp-switch button:first-child{border-left:0}
 .js body:not(.y-home) .cmp-switch button.on{background:var(--syh-graphite);color:#fff;box-shadow:inset 0 -4px 0 var(--syh-yellow)}
 .js body:not(.y-home) .cmp td:nth-child(n),.js body:not(.y-home) .cmp thead th:nth-child(n){background-color:var(--syh-graphite)}
 .js body:not(.y-home) .cmp td:nth-child(n){background-color:#fff}
 .js body:not(.y-home) .cmp thead th:first-child{width:44%}
 .js body:not(.y-home) .cmp thead th:nth-child(n){box-shadow:none}
}
/* pricing questions: the photo plate with the call and email lines, beside the plates */
body:not(.y-home) .y-faqs .fq-card{--pl-bg:var(--syh-graphite);--pl-line:var(--syh-graphite);display:block;margin:34px 0 0;overflow:visible}
body:not(.y-home) .y-faqs .fq-card .fq-ph{display:block;aspect-ratio:16/10;overflow:hidden}
body:not(.y-home) .y-faqs .fq-card .fq-ph img{display:block;width:100%;height:100%;object-fit:cover}
body:not(.y-home) .y-faqs .fq-card .fq-lines{margin:0;padding:4px 24px 12px;border:0}
body:not(.y-home) .y-faqs .fq-card .ct-line{color:#fff;border-bottom-color:var(--syh-line-dark)}
body:not(.y-home) .y-faqs .fq-card .ct-line:last-child{border-bottom:0}
body:not(.y-home) .y-faqs .fq-card .ct-ic{border-color:var(--syh-input-dark);color:var(--syh-yellow)}
body:not(.y-home) .y-faqs .fq-card .ct-line:focus-visible{outline-color:var(--syh-yellow)}

/* ---------- 10. join (/get-started) ---------- */
/* one white sheet centred on the graphite field (cross-site QA 2026-10-14): the head on the graphite above it; in the
   sheet the plan choice as three chamfered plates in a row, the chosen plan's summary on steel under them, then the
   account fields. No photo, no side plan card */
body:not(.y-home) .y-join{position:relative;isolation:isolate;padding:0;background:var(--syh-graphite);overflow:hidden}
.y-join>.container{position:relative;display:block;max-width:1000px;padding-top:calc(var(--hdr) + 64px);padding-bottom:128px}
.y-join>.container::before{content:none}
.y-join .jn-head{max-width:none;margin:0 0 40px}
.y-join .jn-head h1{margin:0 0 16px;font-size:56px;line-height:1.02;letter-spacing:-.035em;font-weight:800;color:#fff}
body:not(.y-home) .y-join .jn-head .lede{color:var(--syh-muted-dark)}
body:not(.y-home) .y-join .jn-head .y-crumbs a{color:rgba(241,242,244,.74)}
body:not(.y-home) .y-join .jn-head .y-crumbs a:hover{color:var(--syh-yellow);text-decoration:none}
body:not(.y-home) .y-join .jn-head .y-crumbs span{color:#fff}
body:not(.y-home) .y-join .jn-head .y-crumbs i .ic{color:rgba(241,242,244,.5)}
.y-join .jn-grid{display:block;padding:44px 56px 52px;background:#fff;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
/* the plan choice: three plates (the chosen one yellow), the chosen plan's summary on steel */
body:not(.y-home) .jn-plan{position:static;margin:0 0 40px;padding:0;border-radius:0;background:none;color:var(--syh-graphite);box-shadow:none;clip-path:none}
body:not(.y-home) .jp-lab{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-light)}
body:not(.y-home) .jp-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 14px;border:0}
body:not(.y-home) .jp-switch a{--pl-line:#C3C8CF;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:84px;padding:16px 22px;border:0;border-radius:0;box-shadow:inset 0 0 0 1.5px var(--pl-line);background:linear-gradient(to bottom right,transparent calc(50% - 1.1px),var(--pl-line) calc(50% - 1.1px),var(--pl-line) 50%,transparent 50%) 100% 100%/14px 14px no-repeat,#fff;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);color:var(--syh-graphite);text-align:left;text-decoration:none;transition:box-shadow .2s,background-color .2s}
body:not(.y-home) .jp-switch a:first-child{border-left:0}
body:not(.y-home) .jp-switch a b{font-size:19px;font-weight:700;line-height:1.2}
body:not(.y-home) .jp-switch a small{font-size:14px;color:var(--syh-muted-light)}
body:not(.y-home) .jp-switch a:hover{--pl-line:var(--syh-graphite);background:linear-gradient(to bottom right,transparent calc(50% - 1.1px),var(--pl-line) calc(50% - 1.1px),var(--pl-line) 50%,transparent 50%) 100% 100%/14px 14px no-repeat,#fff;color:var(--syh-graphite)}
body:not(.y-home) .jp-switch a.on{--pl-line:var(--syh-yellow);background:var(--syh-yellow);color:var(--syh-graphite)}
body:not(.y-home) .jp-switch a.on small{color:rgba(27,30,35,.78)}
body:not(.y-home) .jp-switch a:focus-visible{outline:3px solid var(--syh-graphite);outline-offset:3px;position:relative;z-index:1}
body:not(.y-home) .jp-body{padding:22px 28px 20px;background:var(--syh-steel);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
body:not(.y-home) .jp-sum{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;padding-bottom:16px;border-bottom:1px solid #D2D6DB}
body:not(.y-home) .jp-now{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
body:not(.y-home) .jp-now b{font-size:26px;font-weight:700;color:var(--syh-graphite)}
body:not(.y-home) .jp-now .pl-tag{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-light)}
body:not(.y-home) .jp-price{display:flex;align-items:flex-end;gap:12px;margin:0;padding:0;border:0}
body:not(.y-home) .jp-price b{font-size:44px;line-height:.9;font-weight:800;letter-spacing:-.045em;color:var(--syh-graphite);font-variant-numeric:tabular-nums}
body:not(.y-home) .jp-price span{display:flex;flex-direction:column;padding-bottom:2px;font-size:14px;line-height:1.3;color:var(--syh-muted-light)}
body:not(.y-home) .jp-price s{color:var(--syh-muted-light);text-decoration-thickness:1.5px}
body:not(.y-home) .jn-plan .pl-b{min-height:0;margin:16px 0 6px;max-width:68ch;font-size:15.5px;line-height:1.58;color:var(--text)}
body:not(.y-home) .jp-inc{border-top:1px solid #D2D6DB}
body:not(.y-home) .jp-inc summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:12px 0;cursor:pointer;list-style:none;font-weight:600;font-size:15.5px;color:var(--syh-graphite)}
body:not(.y-home) .jp-inc summary::-webkit-details-marker{display:none}
body:not(.y-home) .jp-inc summary .cv{width:20px;height:20px;transition:transform .25s}
body:not(.y-home) .jp-inc[open] summary .cv{transform:rotate(180deg)}
body:not(.y-home) .jp-inc summary:focus-visible{outline:3px solid var(--syh-graphite);outline-offset:2px}
body:not(.y-home) .jn-plan .pl-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;padding-bottom:12px;font-size:14.5px}
body:not(.y-home) .jn-plan .pl-f li{padding:9px 0;border-bottom:1px solid #D2D6DB;color:var(--syh-graphite)}
body:not(.y-home) .jn-plan .pl-f .ic{color:var(--syh-graphite)}
body:not(.y-home) .jp-pp{display:flex;gap:12px;margin:0;padding-top:16px;border-top:1px solid #D2D6DB;font-size:14px;line-height:1.5;color:var(--syh-graphite)}
body:not(.y-home) .jp-pp .ic{width:20px;height:20px;flex:0 0 20px;color:var(--syh-graphite)}
body:not(.y-home) .jn-plan a:focus-visible{outline-color:var(--syh-graphite)}
/* the form sheet (contact) and the join fields (plain inside the join sheet) */
body:not(.y-home) .jn-card,body:not(.y-home) .cf-card{--pl-bg:#fff;--pl-line:#fff;grid-area:form;padding:48px 48px 52px}
body:not(.y-home) .y-join .jn-card{padding:36px 0 0;border-top:1px solid var(--syh-line-light);box-shadow:none;background:none;clip-path:none}
body:not(.y-home) .jn-card h2,body:not(.y-home) .cf-card h2{margin:0 0 28px;font-size:30px;letter-spacing:-.025em}
/* form controls: square, 52 px, a 1.5 px graphite-grey border, a yellow bar and graphite ring on focus */
body:not(.y-home) .form-label{margin-bottom:8px;font-weight:600;font-size:14.5px;color:var(--syh-graphite)}
body:not(.y-home) .form-control,body:not(.y-home) .form-select{height:52px;padding:0 16px;border:1.5px solid var(--syh-input-light);border-radius:0;background-color:#fff;font-size:16.5px;color:var(--syh-graphite);box-shadow:none;transition:border-color .2s,box-shadow .2s}
body:not(.y-home) textarea.form-control{height:auto;min-height:160px;padding:14px 16px;line-height:1.55}
body:not(.y-home) .form-control:hover,body:not(.y-home) .form-select:hover{border-color:var(--syh-graphite)}
body:not(.y-home) .form-control:focus,body:not(.y-home) .form-select:focus{border-color:var(--syh-graphite);box-shadow:inset 0 -4px 0 var(--syh-yellow);outline:none}
body:not(.y-home) .form-control:focus-visible,body:not(.y-home) .form-select:focus-visible{outline:3px solid var(--syh-graphite);outline-offset:3px}
body:not(.y-home) .form-control.is-invalid,body:not(.y-home) .form-select.is-invalid{border-color:#B3261E;background-image:none;padding-right:16px}
body:not(.y-home) .invalid-feedback{margin-top:8px;font-size:14px;font-weight:500;color:#B3261E}
body:not(.y-home) .form-text{margin-top:8px;font-size:14px;color:var(--syh-muted-light)}
body:not(.y-home) .pw-t{right:4px;width:44px;height:44px;border-radius:0;color:var(--syh-muted-light)}
body:not(.y-home) .pw-t:hover{color:var(--syh-graphite)}
body:not(.y-home) .pw-t.on{color:var(--syh-graphite)}
/* in-between widths (16 Oct): the field rule above (padding 0 16px) and .is-invalid (16px) out-rank style.css .pw .form-control{padding-right:52px}, so a long or shown password ran under the 44 px eye button; keep the button's strip (4 + 44 px) free of text */
body:not(.y-home) .pw .form-control,body:not(.y-home) .pw .form-control.is-invalid{padding-right:56px}
/* the consent block on steel */
body:not(.y-home) .jn-consent{margin:30px 0 26px;padding:22px 22px 20px 58px;border-radius:0;background:var(--syh-steel);font-size:14px;line-height:1.65;color:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
body:not(.y-home) .jn-consent .form-check-input{width:24px;height:24px;margin:0 0 0 -36px;border:1.5px solid var(--syh-graphite);border-radius:0;background-color:#fff;box-shadow:none;cursor:pointer}
body:not(.y-home) .jn-consent .form-check-input:checked{background-color:var(--syh-yellow);border-color:var(--syh-graphite);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231B1E23' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");background-size:18px}
body:not(.y-home) .jn-consent .form-check-input:focus{box-shadow:none}
body:not(.y-home) .jn-consent .form-check-input:focus-visible{outline:3px solid var(--syh-graphite);outline-offset:3px}
body:not(.y-home) .jn-consent .form-check-label{cursor:pointer}
body:not(.y-home) .jn-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:12px 0 0}
body:not(.y-home) .jn-links a{display:inline-block;padding:3px 0;font-weight:600;color:var(--syh-graphite);text-decoration:underline;text-decoration-color:var(--syh-yellow);text-decoration-thickness:2px;text-underline-offset:4px}
body:not(.y-home) .jn-fine,body:not(.y-home) .cf-fine{display:flex;gap:12px;margin:20px 0 0;font-size:14px;line-height:1.6;color:var(--syh-muted-light)}
body:not(.y-home) .jn-fine .ic,body:not(.y-home) .cf-fine .ic{width:20px;height:20px;flex:0 0 20px;margin-top:1px;color:var(--syh-graphite)}
body:not(.y-home) .cf-fine{margin:22px 0 26px}
body:not(.y-home) .jn-wait,body:not(.y-home) .jn-done{padding:72px 10px}
body:not(.y-home) .jn-wait strong{font-size:21px;color:var(--syh-graphite)}
body:not(.y-home) .jn-wait small{color:var(--syh-muted-light)}
body:not(.y-home) .spin{border-radius:50%;border-color:var(--syh-line-light);border-top-color:var(--syh-graphite)}
body:not(.y-home) .done-ic{width:72px;height:72px;margin-bottom:22px;border-radius:0;background:var(--syh-yellow);color:var(--syh-graphite);box-shadow:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
body:not(.y-home) .jn-done h2{margin:0 0 12px;font-size:32px}
body:not(.y-home) .jn-help{font-size:15px;color:var(--syh-muted-light)}
body:not(.y-home) .mini-done .ic{border-radius:0;background:var(--syh-yellow);color:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)}

/* ---------- 11. contact ---------- */
/* steel board: the graphite contact panel (lines, quick answers, the yellow 911 note) beside the white form sheet */
.y-contact .ct-board{background:var(--syh-steel);padding-top:112px}
@media (min-width:992px){.ct-board .row>.col-lg-5{order:-1}}
.cf-sub{margin:-18px 0 24px;font-size:15px;color:var(--syh-muted-light)}
body:not(.y-home) .ct-side{--pl-bg:var(--syh-graphite);--pl-line:var(--syh-graphite);position:relative;padding:36px 34px 38px;color:var(--syh-muted-dark);background:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.ct-cards{display:grid;gap:0;border-top:1px solid var(--syh-line-dark)}
body:not(.y-home) .ctc{--pl-bg:transparent;--pl-line:transparent;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;padding:20px 0;border-bottom:1px solid var(--syh-line-dark);box-shadow:none;background:none;clip-path:none;color:#fff;text-decoration:none}
body:not(.y-home) a.ctc:hover{color:#fff}
body:not(.y-home) a.ctc:hover b{color:var(--syh-yellow)}
body:not(.y-home) a.ctc:focus-visible{outline:3px solid var(--syh-yellow);outline-offset:2px}
body:not(.y-home) .ctc .ct-ic{border-color:var(--syh-input-dark);color:var(--syh-yellow)}
body:not(.y-home) .ctc small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-dark)}
body:not(.y-home) .ctc b{display:block;margin-top:2px;font-size:18px;font-weight:700;color:#fff;transition:color .2s}
body:not(.y-home) .ctc em{display:block;margin-top:4px;font-style:normal;font-size:14.5px;line-height:1.5;color:var(--syh-muted-dark)}
.qa-h{margin:36px 0 6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff}
body:not(.y-home) .ct-side .qa-h{color:#fff}
body:not(.y-home) a.qa{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--syh-line-dark);color:#fff;text-decoration:none}
body:not(.y-home) a.qa:hover{color:#fff}
body:not(.y-home) a.qa:hover b{color:var(--syh-yellow)}
body:not(.y-home) a.qa:focus-visible{outline:3px solid var(--syh-yellow);outline-offset:2px}
body:not(.y-home) .qa>.ic{width:22px;height:22px;flex:0 0 22px;color:var(--syh-yellow)}
body:not(.y-home) .qa b{display:block;font-size:16px;font-weight:600;transition:color .2s}
body:not(.y-home) .qa small{display:block;font-size:14px;color:var(--syh-muted-dark)}
body:not(.y-home) .qa .go{margin-left:auto;width:18px;height:18px;flex:0 0 18px;color:var(--syh-yellow);transition:transform .25s}
body:not(.y-home) .qa:hover .go{transform:translateX(4px)}
body:not(.y-home) .ct-note{--pl-bg:var(--syh-yellow);--pl-line:var(--syh-yellow);display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:14px;margin-top:28px;padding:20px 22px 22px 20px;font-size:15px;line-height:1.55;color:var(--syh-graphite)}
body:not(.y-home) .ct-note .ic{width:24px;height:24px;margin:0;color:var(--syh-graphite)}
body:not(.y-home) .ct-note b{font-weight:800}

/* ---------- 12. insights index + article cards ---------- */
/* steel head: h1 + lede left; the search right as an underlined line; then the newest article as a dark plate */
body:not(.y-home) .bl-head{padding-bottom:96px;background:var(--syh-steel)}
body:not(.y-home) .bl-head h1{margin-bottom:18px}
body:not(.y-home) .bl-search{display:flex;align-items:center;gap:14px;height:64px;padding:0 4px;border:0;border-bottom:2px solid var(--syh-graphite);border-radius:0;background:none;box-shadow:none;cursor:text;transition:box-shadow .2s}
body:not(.y-home) .bl-search .ic{width:24px;height:24px;color:var(--syh-graphite)}
body:not(.y-home) .bl-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:500 19px/1.2 var(--syh-font);color:var(--syh-graphite)}
body:not(.y-home) .bl-search input::placeholder{color:var(--syh-muted-light)}
body:not(.y-home) .bl-search:focus-within{box-shadow:0 4px 0 var(--syh-yellow)}
body:not(.y-home) .bl-search input:focus-visible{outline:none}
body:not(.y-home) .bl-search:has(input:focus-visible){outline:3px solid var(--syh-graphite);outline-offset:6px}
body:not(.y-home) a.bl-feat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);margin-top:56px;overflow:visible;color:#fff;text-decoration:none}
body:not(.y-home) .bl-feat .bf-img{display:block;min-height:440px;overflow:hidden;background:#000}
body:not(.y-home) .bl-feat .bf-img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.04);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
body:not(.y-home) .bl-feat:hover .bf-img img{transform:scale(1.03)}
body:not(.y-home) .bf-t{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:44px 44px 48px}
body:not(.y-home) .bf-lab{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-yellow)}
body:not(.y-home) .bf-lab::after{content:"";width:40px;height:1.5px;background:var(--syh-yellow)}
body:not(.y-home) .bf-t small{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:14px;color:var(--syh-muted-dark)}
body:not(.y-home) .bf-t small .yc-cat{color:#fff}
body:not(.y-home) .bf-t b{font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.028em;color:#fff;text-wrap:balance}
body:not(.y-home) .bf-ex{font-size:16.5px;line-height:1.6;color:rgba(241,242,244,.82)}
body:not(.y-home) .bf-go{display:inline-flex;align-items:center;gap:10px;margin-top:10px;font-weight:600;font-size:16px;color:#fff}
body:not(.y-home) .bf-go .ic{width:20px;height:20px;color:var(--syh-yellow);transition:transform .25s}
body:not(.y-home) .bl-feat:hover .bf-go .ic{transform:translateX(4px)}
/* the topic filter: uppercase text tabs on one rule; the chosen one carries the yellow bar */
body:not(.y-home) .bl-list{padding-top:88px}
body:not(.y-home) .cat-tabs{display:flex;flex-wrap:nowrap;gap:0 30px;margin:0 0 48px;padding:0;border-bottom:1px solid var(--syh-line-light);overflow-x:auto;scrollbar-width:none}
body:not(.y-home) .cat-tabs::-webkit-scrollbar{display:none}
body:not(.y-home) .cat-tabs button{flex:0 0 auto}
body:not(.y-home) .cat-tabs button{position:relative;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0;border:0;border-radius:0;background:none;font:600 12.5px/1 var(--syh-font);letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-light);transition:color .2s}
body:not(.y-home) .cat-tabs button svg{display:none}
body:not(.y-home) .cat-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;background:var(--syh-yellow);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
body:not(.y-home) .cat-tabs button:hover{color:var(--syh-graphite)}
body:not(.y-home) .cat-tabs button.on{background:none;border:0;color:var(--syh-graphite)}
body:not(.y-home) .cat-tabs button.on::after{transform:scaleX(1)}
body:not(.y-home) .cat-tabs button.on .ic,body:not(.y-home) .cat-tabs button.on svg{color:var(--syh-graphite)}
body:not(.y-home) .cat-tabs button:focus-visible{outline:3px solid var(--syh-graphite);outline-offset:2px}
body:not(.y-home) .bl-empty{padding:48px 0;font-size:17px;text-align:left;color:var(--syh-muted-light)}
body:not(.y-home) .pager{display:flex;justify-content:flex-start;gap:8px;margin-top:56px}
body:not(.y-home) .pager:empty{display:none}
body:not(.y-home) .pager button{width:48px;height:48px;border:1px solid var(--syh-input-light);border-radius:0;background:#fff;font:700 15px/1 var(--syh-font);color:var(--syh-graphite);font-variant-numeric:tabular-nums;transition:background-color .2s,border-color .2s,color .2s}
body:not(.y-home) .pager button:hover{border-color:var(--syh-graphite)}
body:not(.y-home) .pager button.on{background:var(--syh-graphite);border-color:var(--syh-graphite);color:#fff;clip-path:var(--clip-btn)}
body:not(.y-home) .pager button:focus-visible{outline:3px solid var(--syh-graphite);outline-offset:3px}
/* the article card (PostCard): a white plate; photo, uppercase topic and date, title, excerpt, read time */
body:not(.y-home) .y-card{display:flex;flex-direction:column;height:100%;overflow:visible;transform:none}
body:not(.y-home) .y-card:hover{transform:none}
body:not(.y-home) .alt .y-card,body:not(.y-home) .y-alt .y-card{--pl-line:#fff}
body:not(.y-home) .alt .y-card:is(:hover,:focus-within),body:not(.y-home) .y-alt .y-card:is(:hover,:focus-within){--pl-line:var(--syh-yellow)}
body:not(.y-home) .yc-img{display:block;aspect-ratio:16/10;overflow:hidden;margin:1px 1px 0;background:var(--syh-line-light)}
body:not(.y-home) .yc-img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
body:not(.y-home) .y-card:hover .yc-img img{transform:scale(1.04)}
body:not(.y-home) .yc-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 26px}
body:not(.y-home) .yc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0 0 12px;font-size:13.5px;color:var(--syh-muted-light)}
body:not(.y-home) .yc-cat{display:inline;padding:0;border-radius:0;background:none;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:var(--syh-graphite)}
body:not(.y-home) .y-card h3{margin:0 0 10px;font-size:20px;line-height:1.28;letter-spacing:-.012em}
body:not(.y-home) .y-card h3 a{display:block;color:var(--syh-graphite);text-decoration:none}
body:not(.y-home) .y-card h3 a:hover{color:var(--syh-graphite);text-decoration:underline;text-decoration-color:var(--syh-yellow);text-decoration-thickness:3px;text-underline-offset:5px}
body:not(.y-home) .y-card h3 a:focus-visible{outline:3px solid var(--syh-graphite);outline-offset:3px}
body:not(.y-home) .yc-ex{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--syh-muted-light)}
body:not(.y-home) .yc-more{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--syh-line-light);font-size:13.5px;font-weight:500;color:var(--syh-muted-light)}
body:not(.y-home) .yc-more .ic{width:17px;height:17px;color:var(--syh-graphite)}

/* ---------- 13. article ---------- */
body:not(.y-home) .read-bar{position:fixed;top:0;left:0;right:0;z-index:1040;height:3px;pointer-events:none}
body:not(.y-home) .read-bar i{display:block;width:0;height:100%;background:var(--syh-yellow)}
/* steel head: crumbs, the topic as an uppercase label with its line icon, h1, lede, byline; the photo chamfered */
body:not(.y-home) .y-ahead{position:relative;isolation:isolate;padding:calc(var(--hdr) + 64px) 0 72px;background:var(--syh-steel)}
body:not(.y-home) .ah-in{max-width:900px}
body:not(.y-home) .yc-cat.lg{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;padding:0;font-size:12.5px;letter-spacing:.14em;color:var(--syh-graphite);text-decoration:none}
body:not(.y-home) .yc-cat.lg svg{width:22px;height:22px;flex:0 0 22px;color:var(--syh-graphite);stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
body:not(.y-home) .yc-cat.lg::after{content:"";width:40px;height:1.5px;background:var(--syh-graphite)}
body:not(.y-home) .yc-cat.lg:hover{text-decoration:underline;text-decoration-color:var(--syh-yellow);text-decoration-thickness:2px;text-underline-offset:5px}
body:not(.y-home) .y-ahead h1{margin:0 0 20px;max-width:18em;font-size:52px;line-height:1.05;letter-spacing:-.035em;font-weight:800}
body:not(.y-home) .a-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:30px 0 44px;font-size:14.5px;color:var(--syh-muted-light)}
body:not(.y-home) .a-meta>*{display:flex;align-items:center;padding:0 18px;border-left:1px solid #C9CDD3}
body:not(.y-home) .a-meta>:first-child{padding-left:0;border-left:0}
body:not(.y-home) .am-by{gap:10px;font-weight:600;color:var(--syh-graphite)}
body:not(.y-home) .am-by img{width:24px;height:auto}
body:not(.y-home) .a-lead{margin:0;aspect-ratio:21/9;border-radius:0;overflow:hidden;background:var(--syh-line-light);clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),calc(100% - 48px) 100%,0 100%)}
body:not(.y-home) .a-lead img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03)}
/* the reading column: 17.5 px, 66 characters; takeaways on steel; notes as graphite plates with yellow icons */
body:not(.y-home) .y-article{padding:80px 0 120px}
body:not(.y-home) .a-col{max-width:700px}
body:not(.y-home) .a-take{margin:0 0 52px;padding:28px 30px 26px}
body:not(.y-home) .at-h{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-graphite)}
body:not(.y-home) .at-h .ic{width:22px;height:22px;color:var(--syh-graphite)}
body:not(.y-home) .a-take ul{margin:0;padding:0;list-style:none}
body:not(.y-home) .a-take li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;padding:10px 0;border-top:1px solid #D2D6DB;font-size:16.5px;line-height:1.55;color:var(--syh-graphite)}
body:not(.y-home) .a-take li .ic{width:22px;height:22px;margin-top:1px;padding:3px;background:var(--syh-yellow);color:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%)}
body:not(.y-home) .a-body{font-size:17.5px;line-height:1.75;color:var(--text)}
body:not(.y-home) .a-body>p:first-child{font-size:20px;line-height:1.62;color:var(--syh-graphite)}
body:not(.y-home) .a-body h2{position:relative;margin:60px 0 18px;padding-top:26px;font-size:30px;line-height:1.15;letter-spacing:-.025em;font-weight:800;scroll-margin-top:calc(var(--hdr) + 24px)}
body:not(.y-home) .a-body h2::before{content:"";position:absolute;left:0;top:0;width:40px;height:4px;background:var(--syh-yellow)}
body:not(.y-home) .a-body h3{margin:36px 0 12px;font-size:21px;line-height:1.3;font-weight:700;letter-spacing:-.012em}
body:not(.y-home) .a-body p{margin:0 0 22px}
body:not(.y-home) .a-body ul,body:not(.y-home) .a-body ol{margin:0 0 26px;padding-left:0;list-style:none}
body:not(.y-home) .a-body ul li{position:relative;margin:0 0 10px;padding-left:28px}
body:not(.y-home) .a-body ul li::before{content:"";position:absolute;left:2px;top:.68em;width:8px;height:8px;background:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% 50%,50% 100%,0 100%)}
body:not(.y-home) .a-body ol{counter-reset:ab}
body:not(.y-home) .a-body ol li{position:relative;margin:0 0 10px;padding-left:36px;counter-increment:ab}
body:not(.y-home) .a-body ol li::before{content:counter(ab);position:absolute;left:0;top:.15em;font-weight:800;font-size:15px;color:var(--syh-graphite)}
body:not(.y-home) .a-body li::marker{content:none}
body:not(.y-home) .a-body strong{font-weight:700;color:var(--syh-graphite)}
body:not(.y-home) .y-note{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:18px;margin:36px 0;padding:26px 28px 28px 24px;border-left:0;color:#fff}
body:not(.y-home) .yn-ic{display:flex;color:var(--syh-yellow)}
body:not(.y-home) .yn-ic .ic{width:30px;height:30px;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
body:not(.y-home) .y-note p{margin:0;font-size:18px;line-height:1.6;font-weight:500;color:#fff}
body:not(.y-home) .a-fig{margin:48px 0}
body:not(.y-home) .a-disc{margin-top:52px;padding-top:22px;border-top:1.5px solid var(--syh-graphite);font-size:14px;line-height:1.6;color:var(--syh-muted-light)}
body:not(.y-home) .a-share{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:30px 0}
body:not(.y-home) .a-share>span{margin-right:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-graphite)}
body:not(.y-home) .pn-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px}
body:not(.y-home) a.pn{display:block;padding:24px 26px 28px;color:var(--syh-graphite);text-decoration:none}
body:not(.y-home) .pn small{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-light)}
body:not(.y-home) .pn small .ic{width:18px;height:18px;color:var(--syh-graphite)}
body:not(.y-home) .pn b{display:block;margin-top:10px;font-size:17.5px;line-height:1.35;font-weight:700}
body:not(.y-home) .pn.next{grid-column:2;text-align:right}
body:not(.y-home) .pn.next small{justify-content:flex-end}
body:not(.y-home) .a-rel .y-head{margin-bottom:44px}
body:not(.y-home) .a-rel .y-head h2{max-width:none}

/* ---------- 14. legal ---------- */
body:not(.y-home) .lg-head{padding-bottom:76px}
body:not(.y-home) .lg-head h1{font-size:60px}
body:not(.y-home) .lg-head .lede{font-size:17.5px;font-weight:600;color:var(--syh-graphite)}
body:not(.y-home) .lg-other{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:4px 0;font-weight:600;color:var(--syh-graphite);text-decoration:underline;text-decoration-color:var(--syh-yellow);text-decoration-thickness:2px;text-underline-offset:5px}
body:not(.y-home) .lg-other:hover{color:var(--syh-graphite);text-decoration-thickness:4px}
body:not(.y-home) .lg-other .ic{width:22px;height:22px}
body:not(.y-home) .lg-body{padding:88px 0 120px}
body:not(.y-home) .legal{max-width:720px;counter-reset:none}
body:not(.y-home) .legal h2{margin:56px 0 16px;padding-top:24px;border-top:1px solid var(--syh-line-light);font-size:24px;line-height:1.25;letter-spacing:-.018em;font-weight:800;scroll-margin-top:calc(var(--hdr) + 24px)}
body:not(.y-home) .legal h2:first-child{margin-top:0}
body:not(.y-home) .legal p,body:not(.y-home) .legal li{font-size:17px;line-height:1.75;color:var(--text)}
body:not(.y-home) .legal p{margin:0 0 18px}
body:not(.y-home) .legal>p:first-child{font-size:19px;line-height:1.65;color:var(--syh-graphite)}
body:not(.y-home) .legal ul{margin:0 0 22px;padding-left:0;list-style:none}
body:not(.y-home) .legal li{position:relative;margin:0 0 8px;padding-left:26px}
body:not(.y-home) .legal li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;background:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% 50%,50% 100%,0 100%)}
body:not(.y-home) .legal li::marker{content:none}
body:not(.y-home) .legal strong{color:var(--syh-graphite)}
/* the legal contents (admin HTML: nav.y-toc.solo): the guides' graphite plate (yellow progress bar, yellow active
   square), set to the LEFT of the document on desktop (see "wider gaps" below) */
body:not(.y-home) main nav.y-toc.solo{--pl-bg:var(--syh-graphite);--pl-line:var(--syh-graphite);color:#fff}
body:not(.y-home) .y-toc.solo ol{max-height:calc(100vh - var(--hdr) - 210px);max-height:calc(100svh - var(--hdr) - 210px)}

/* ---------- 15. 404 ---------- */
/* a full-bleed night photo of a front door with the yellow keyhole escutcheon drawn over the door; crumbs, h1, lede and
   the two links bottom-left on the graphite shade; the photo's bottom-right corner cut into a steel threshold that
   keeps it apart from the closing band's photo. The photo box keeps the image's 3:2 shape (wider than the page,
   anchored left, so the door sits right of the text), and the drawing is placed in that box, so it stays on the door. */
.nf{position:relative;padding:0 0 72px;background:var(--syh-steel)}
.nf-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:min(max(600px,74vh),78vw);padding:calc(var(--hdr) + 120px) 0 96px;background:var(--syh-graphite);color:#fff;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),calc(100% - 48px) 100%,0 100%)}
.nf-photo{position:absolute;left:0;top:50%;width:118%;aspect-ratio:3/2;margin-top:-39.333%}
.nf-photo img{position:absolute;inset:0;z-index:-3;display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.06) brightness(.84)}
.nf-shade{position:absolute;inset:0;z-index:-2;background:
 linear-gradient(90deg,rgba(27,30,35,.9) 0%,rgba(27,30,35,.7) 34%,rgba(27,30,35,.14) 62%,rgba(27,30,35,0) 100%),
 linear-gradient(0deg,rgba(27,30,35,.8) 0%,rgba(27,30,35,.2) 42%,rgba(27,30,35,0) 64%),
 linear-gradient(180deg,rgba(27,30,35,.6) 0,rgba(27,30,35,0) 190px)}
.nf-art{position:absolute;z-index:-1;left:50.6%;top:48.75%;width:12.5%;transform:translate(-50%,-50%);color:var(--syh-yellow)}
.nf-art svg{display:block;width:100%;height:auto}
.nf-in{position:relative;display:block;width:100%}
.nf-txt{max-width:620px}
body:not(.y-home) .nf h1{margin:0 0 22px;font-size:84px;line-height:.96;letter-spacing:-.04em;font-weight:800;color:#fff}
.nf .lede{margin:0 0 40px;max-width:26em;font-size:20px;line-height:1.55;color:rgba(241,242,244,.86)}
.nf .nf-acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;margin:0}
body:not(.y-home) .nf .y-crumbs a{color:rgba(241,242,244,.74)}
body:not(.y-home) .nf .y-crumbs a:hover{color:var(--syh-yellow);text-decoration:none}
body:not(.y-home) .nf .y-crumbs span{color:#fff}
body:not(.y-home) .nf .y-crumbs i .ic{color:rgba(241,242,244,.5)}
.nf :focus-visible{outline-color:var(--syh-yellow)}

/* wider gaps between two columns (desktop): extra padding on the inner sides only, so the row never grows past the
   container (a wider --bs-gutter-x would push the row out of a 1200-1360 px window) */
@media (min-width:992px){
 .t-caps .row>.col-lg-6:first-of-type{padding-right:calc(var(--bs-gutter-x) * .5 + 20px)}
 .t-caps .row>.col-lg-6:last-of-type{padding-left:calc(var(--bs-gutter-x) * .5 + 20px)}
 .g-body .row>.col-lg-8,body:not(.y-home) .y-article .row>.col-lg-8{padding-right:calc(var(--bs-gutter-x) * .5 + 12px)}
 .g-body .row>.col-lg-4,body:not(.y-home) .y-article .row>.col-lg-4{padding-left:calc(var(--bs-gutter-x) * .5 + 12px)}
 /* legal: the contents plate first (left), the document after it */
 body:not(.y-home) .lg-body>.container>.row>.toc-solo-col{order:-1;padding-right:calc(var(--bs-gutter-x) * .5 + 12px)}
 body:not(.y-home) .lg-body>.container>.row>.col-lg-8{padding-left:calc(var(--bs-gutter-x) * .5 + 12px)}
 .ct-board .row>.col-lg-5{padding-right:calc(var(--bs-gutter-x) * .5 + 4px)}
 .ct-board .row>.col-lg-7{padding-left:calc(var(--bs-gutter-x) * .5 + 4px)}
 .bl-head .row>.col-lg-7{padding-right:calc(var(--bs-gutter-x) * .5 + 8px)}
 .bl-head .row>.col-lg-5{padding-left:calc(var(--bs-gutter-x) * .5 + 8px)}
}

/* ---------- 16. responsive ---------- */
@media (max-width:1399.98px){
 .y-phero h1{font-size:52px}
 .y-phero.tall h1{font-size:54px}
 .why-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 body:not(.y-home) .why-grid li,body:not(.y-home) .why-grid.n5 li:nth-child(4),body:not(.y-home) .why-grid.n5 li:nth-child(5){grid-column:span 2}
 body:not(.y-home) .why-grid.n5 li:nth-child(4){grid-column:2/span 2}
 body:not(.y-home) .why-grid.n5 li:nth-child(5){grid-column:4/span 2}
}
@media (max-width:1199.98px){
 body:not(.y-home) .y-sec{padding:104px 0}
 .y-phero h1,.y-phero.tall h1{font-size:50px}
 .y-phero .ph-txt{max-width:720px;padding:40px 48px 48px}
 body:not(.y-home) .y-lhead h1,body:not(.y-home) .lg-head h1{font-size:52px}
 .x-cols,.x-cols.n3{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
 .x-cols.n3>li:last-child:nth-child(odd){grid-column:1/-1}
 body:not(.y-home) .x-cols li{margin:0;padding:30px 28px 30px 0;border-right:0;border-top:1.5px solid var(--syh-graphite)}
 body:not(.y-home) .x-cols li:nth-child(odd){padding-right:36px;margin-right:0}
 body:not(.y-home) .x-cols li:nth-child(even){padding-left:28px;border-left:1px solid var(--syh-line-light)}
 .ot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hw-row{gap:40px 56px}
 .hw-txt h2{font-size:36px}
 body:not(.y-home) .jn-card,body:not(.y-home) .cf-card{padding:40px 36px 44px}
 body:not(.y-home) .pl{padding-left:26px;padding-right:26px}
 body:not(.y-home) .pl-badge{left:26px}
 body:not(.y-home) .pl-price b{font-size:54px}
 body:not(.y-home) .ev-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
 body:not(.y-home) .ev-chips li:nth-child(2){border-right:0}
 body:not(.y-home) .ev-chips li:nth-child(-n+2){border-bottom:1px solid var(--syh-line-light)}
}
/* tablets and phones: the trades' door plates become a vertical accordion; contents move to the top panel */
@media (min-width:1200px) and (prefers-reduced-motion:no-preference){
 body:not(.y-home) .t-faq .y-faq{display:flex;gap:12px;align-items:stretch;min-height:500px}
 body:not(.y-home) .t-faq .y-faq .fq{display:flex;flex-direction:column;flex:1 1 0;min-width:0;margin:0;transition:flex-grow .5s cubic-bezier(.2,.7,.2,1),background-color .25s}
 body:not(.y-home) .t-faq .y-faq .fq.open{flex-grow:2.6}
 body:not(.y-home) .t-faq .y-faq h3{display:flex;flex:1 1 auto}
 body:not(.y-home) .t-faq .y-faq .fq.open h3{flex:0 0 auto}
 body:not(.y-home) .t-faq .y-faq .fq-q{position:static;flex-direction:column-reverse;align-items:flex-start;justify-content:flex-end;gap:22px;padding:24px 20px 26px 22px;font-size:16.5px;line-height:1.35}
 body:not(.y-home) .t-faq .y-faq .fq-q::after{content:"";position:absolute;inset:0;z-index:1}
 body:not(.y-home) .t-faq .y-faq .fq.open .fq-q{flex-direction:row;justify-content:space-between;align-items:flex-start;padding:28px 24px 4px 26px;font-size:20px;line-height:1.25;letter-spacing:-.012em}
 body:not(.y-home) .t-faq .y-faq .fq.open .fq-q::after{content:none}
 body:not(.y-home) .t-faq .y-faq .fq:not(.open) .fq-q span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
 body:not(.y-home) .t-faq .y-faq .fq:not(.open):hover{--pl-line:var(--syh-input-light)}
 body:not(.y-home) .t-faq .y-faq .collapsing{transition:none}
 body:not(.y-home) .t-faq .y-faq .fq-a{padding:20px 26px 34px}
 body:not(.y-home) .t-faq .row>[class*=col-lg-]{width:100%}
 body:not(.y-home) .t-faq .fq-side{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:end;margin-bottom:8px}
 body:not(.y-home) .t-faq .fq-side h2{grid-column:1;grid-row:1/span 2;margin:0;max-width:12em;font-size:46px}
 body:not(.y-home) .t-faq .fq-side .lead-p{grid-column:2}
 /* call and email side by side (or two whole lines): a wrapping row; the email line drops the inline-size container
    (style.css), which would otherwise give it no width of its own and set the address one letter per line */
 body:not(.y-home) .t-faq .fq-side>.fq-lines{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;column-gap:40px;margin-top:22px}
 body:not(.y-home) .t-faq .fq-side>.fq-lines .ct-line{flex:0 0 auto;border-bottom:0;font-size:15.5px;gap:14px}
 body:not(.y-home) .t-faq .fq-side>.fq-lines .ct-line[href^="mailto:"]{container-type:normal}
 body:not(.y-home) .t-faq .fq-side>.fq-lines .ct-line>span:last-child{overflow-wrap:normal;white-space:nowrap}
 body:not(.y-home) .t-faq .fq-side>.fq-lines .ct-ic{width:40px;height:40px;flex-basis:40px}
}
@media (max-width:991.98px){
 body:not(.y-home) .y-sec{padding:96px 0}
 .y-phero,.y-phero.tall,.y-phero.short{min-height:0;padding:calc(var(--hdr) + 200px) 0 0}
 .y-phero .ph-shade{background:linear-gradient(180deg,rgba(27,30,35,.62) 0,rgba(27,30,35,0) 160px)}
 .y-phero .ph-txt{max-width:none}
 /* tablets and phones: the photo fills only the band above the plate, so the whole picture (the door, the window)
    shows there instead of its top edge */
 .y-phero .ph-bg,.y-phero .ph-shade{bottom:auto;height:calc(var(--hdr) + 232px)}
 .y-phero h1,.y-phero.tall h1{font-size:46px}
 body:not(.y-home) .y-head{grid-template-columns:1fr;row-gap:18px;margin-bottom:40px}
 body:not(.y-home) .y-head .sub,body:not(.y-home) .y-head .yh-r{grid-column:1;justify-self:start}
 body:not(.y-home) .y-head h2,.x-intro h2,.t-caps h2,.hw-isnot h2{font-size:38px}
 .x-intro.center{grid-template-columns:1fr;row-gap:18px}
 .v-cards .x-intro{position:static;margin-bottom:8px}
 .t-caps .cap-photo>img{aspect-ratio:16/10}
 .v-console .x-art{max-width:none}
 .y-band .bd-in{grid-template-columns:1fr;align-items:start}
 .y-band .bd-in p{font-size:34px}
 .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body:not(.y-home) .why-grid li,body:not(.y-home) .why-grid.n5 li:nth-child(4),body:not(.y-home) .why-grid.n5 li:nth-child(5){grid-column:auto}
 body:not(.y-home) .why-grid li:last-child:nth-child(odd){grid-column:1/-1}
 .hw-row{grid-template-columns:1fr;padding:64px 0}
 .hw-txt{max-width:640px}
 .pr-cards{grid-template-columns:1fr}
 body:not(.y-home) .pr-cards li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:22px;padding:28px 26px 30px}
 .pr-cards .pr-ic{grid-row:1/span 2;margin:0}
 body:not(.y-home) .side-stick{position:static}
 body:not(.y-home) .y-toc ol{max-height:none}
 /* the phone/tablet contents panel: a steel plate; the side contents shrink to the promo */
 body:not(.y-home) .toc-m{display:block;margin:0 0 36px;padding:0}
 body:not(.y-home) .toc-m summary{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 20px;list-style:none;cursor:pointer}
 body:not(.y-home) .toc-m summary::-webkit-details-marker{display:none}
 body:not(.y-home) .toc-m summary:focus-visible{outline:3px solid var(--syh-graphite);outline-offset:-4px}
 body:not(.y-home) .toc-m .tm-ic{display:flex;width:auto;height:auto;flex:0 0 auto;border-radius:0;background:none;color:var(--syh-graphite)}
 body:not(.y-home) .toc-m .tm-ic .ic{width:22px;height:22px}
 body:not(.y-home) .toc-m .tm-l{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-graphite)}
 body:not(.y-home) .toc-m .tm-n{margin-left:auto;font-size:14px;color:var(--syh-muted-light);white-space:nowrap}
 body:not(.y-home) .toc-m .tm-cv{display:flex;color:var(--syh-graphite);transition:transform .25s}
 body:not(.y-home) .toc-m .tm-cv .ic{width:20px;height:20px}
 body:not(.y-home) .toc-m[open] .tm-cv{transform:rotate(180deg)}
 body:not(.y-home) .toc-m ol{margin:0;padding:6px 12px 14px;list-style:none;border-top:1px solid #D2D6DB}
 body:not(.y-home) .toc-m ol a{display:flex;align-items:flex-start;gap:12px;padding:11px 8px;border-radius:0;font-size:15.5px;line-height:1.4;color:var(--text);text-decoration:none}
 body:not(.y-home) .toc-m ol a:hover{background:rgba(27,30,35,.05);color:var(--syh-graphite)}
 body:not(.y-home) .toc-m .n{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;margin-top:-3px;border:1px solid #C3C8CF;border-radius:0;background:none;font-size:12px;font-weight:700;color:var(--syh-graphite)}
 body:not(.y-home) .toc-m ol.dots a::before{content:"";width:6px;height:6px;flex:0 0 6px;margin-top:8px;border-radius:0;background:var(--syh-graphite)}
 body:not(.y-home) .toc-m .tm-more{display:grid;gap:0;margin:0 20px;padding:6px 0 12px;border-top:1px solid #D2D6DB}
 body:not(.y-home) .toc-m .tm-more a{display:flex;align-items:center;gap:12px;padding:11px 0;font-weight:600;font-size:15px;color:var(--syh-graphite);text-decoration:none}
 body:not(.y-home) .toc-m .tm-more .ic{width:20px;height:20px;flex:0 0 20px;color:var(--syh-graphite)}
 body:not(.y-home) .toc-solo-col{display:none}
 body:not(.y-home) .y-toc.has-extra{--pl-bg:var(--syh-graphite);padding:28px 26px 30px}
 body:not(.y-home) .y-toc.has-extra .toc-top,body:not(.y-home) .y-toc.has-extra .toc-bar,body:not(.y-home) .y-toc.has-extra>ol,body:not(.y-home) .y-toc.has-extra .toc-more{display:none}
 body:not(.y-home) .y-toc.has-extra .toc-pro{margin:0;padding:0;border:0}
 /* the FAQ topics stay at the top as a jump list (two columns from 576 px) */
 body:not(.y-home) .fq-nav{padding:22px 22px 18px}
 body:not(.y-home) .fq-help{margin-top:12px}
 body:not(.y-home) .cmp{min-width:0}
 .pl-grid{grid-template-columns:1fr;grid-template-rows:none;max-width:600px;border:0;gap:20px}
 body:not(.y-home) .pl{display:block;grid-row:auto}
 body:not(.y-home) .pl{border:1px solid var(--syh-line-dark)}
 body:not(.y-home) .pl:first-child,body:not(.y-home) .pl.featured+.pl{border-left:1px solid var(--syh-line-dark)}
 body:not(.y-home) .pl.featured{margin:0;padding-top:64px;padding-bottom:40px}
 .y-join>.container{padding-top:calc(var(--hdr) + 56px);padding-bottom:96px}
 .y-join .jn-grid{padding:36px 32px 40px}
 body:not(.y-home) .ct-side{margin-top:0}
 body:not(.y-home) a.bl-feat{grid-template-columns:1fr}
 body:not(.y-home) .bl-feat .bf-img{min-height:0;aspect-ratio:16/9}
 body:not(.y-home) .bf-t{padding:30px 30px 36px}
 body:not(.y-home) .y-ahead h1{font-size:42px}
 body:not(.y-home) .a-lead{aspect-ratio:16/9}
 .gd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gd-grid>:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:768px) and (max-width:991.98px){
 .g-check ul{grid-template-columns:repeat(2,minmax(0,1fr))}
 body:not(.y-home) .ct-cards{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
 body:not(.y-home) .ct-cards .ctc{grid-template-columns:1fr;row-gap:12px}
 /* the first card of an odd row spans both columns, photo beside the text */
 body:not(.y-home) .row>.col-md-6.col-lg-4.wide-md>.y-card,body:not(.y-home) .row>.col-md-6.col-xl-4.wide-md>.y-card{flex-direction:row}
 body:not(.y-home) .row>.col-md-6.wide-md>.y-card .yc-img{flex:0 0 48%;aspect-ratio:auto;min-height:280px;margin:1px 0 1px 1px}
 body:not(.y-home) .row>.col-md-6.wide-md>.y-card .yc-body{justify-content:center;padding:30px 32px}
}
@media (min-width:992px) and (max-width:1199.98px){
 body:not(.y-home) .row>.col-md-6.col-xl-4.wide-md>.y-card{flex-direction:row}
 body:not(.y-home) .row>.col-md-6.col-xl-4.wide-md>.y-card .yc-img{flex:0 0 48%;aspect-ratio:auto;min-height:280px;margin:1px 0 1px 1px}
 body:not(.y-home) .row>.col-md-6.col-xl-4.wide-md>.y-card .yc-body{justify-content:center;padding:30px 32px}
}
@media (max-width:767.98px){
 body:not(.y-home){--in-cut:32px}
 body:not(.y-home) .y-sec{padding:80px 0}
 .y-phero,.y-phero.tall,.y-phero.short{padding:calc(var(--hdr) + 176px) 0 0}
 .y-phero .ph-bg,.y-phero .ph-shade{height:calc(var(--hdr) + 200px)}
 /* phones: the plate runs edge to edge under the photo band; the head's own 32 px chamfer cuts its corner */
 .y-phero .ph-txt{margin:0 calc(var(--bs-gutter-x) * -.5);padding:30px calc(var(--bs-gutter-x) * .5) 52px;clip-path:none}
 .y-phero h1,.y-phero.tall h1{font-size:40px;line-height:1.02;margin-bottom:16px}
 .y-phero .lede{font-size:17px;margin-bottom:28px}
 .y-phero .hero-acts{gap:16px 26px}
 .y-phero .ph-meta{display:flex;flex-direction:column;width:100%;margin-bottom:28px}
 .y-phero .ph-meta li{margin:0;padding:12px 0;border-right:0;border-bottom:1px solid rgba(241,242,244,.18)}
 .y-phero .ph-meta li:last-child{border-bottom:0}
 body:not(.y-home) .y-lhead{padding:calc(var(--hdr) + 48px) 0 56px}
 body:not(.y-home) .y-lhead h1,body:not(.y-home) .lg-head h1{font-size:40px}
 body:not(.y-home) .y-lhead .lede,body:not(.y-home) .y-ahead .lede,body:not(.y-home) .jn-head .lede{font-size:17px}
 body:not(.y-home) .y-head h2,.x-intro h2,.t-caps h2,.hw-isnot h2,body:not(.y-home) .fq-side h2{font-size:32px;line-height:1.08}
 body:not(.y-home) .lead-p{font-size:17px}
 body:not(.y-home) .cp-list li,body:not(.y-home) .x-card{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:16px;align-items:center;padding:24px 22px 26px}
 .cp-list li>div{display:contents}
 .cp-list .cp-ic .ic,.x-card .x-ic .ic{width:28px;height:28px}
 .x-card .x-ic{margin:0}
 .cp-list h3,.x-card h3{margin:0;font-size:19px}
 .cp-list p,.x-card p{grid-column:1/-1;margin-top:12px}
 .x-cols,.x-cols.n3{grid-template-columns:1fr}
 body:not(.y-home) .x-cols li,body:not(.y-home) .x-cols li:nth-child(odd),body:not(.y-home) .x-cols li:nth-child(even){display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:18px;padding:26px 0;border-left:0;border-top:1px solid var(--syh-line-light)}
 body:not(.y-home) .x-cols li:first-child{border-top:1.5px solid var(--syh-graphite)}
 .x-cols .x-ic{grid-row:1/span 2;margin:0}
 .x-cols .x-ic .ic{width:30px;height:30px}
 .x-lines li{grid-template-columns:48px minmax(0,1fr);column-gap:18px;padding:26px 0}
 .x-lines li::before{width:40px;height:40px;font-size:15px}
 .x-lines h3{font-size:19px}
 body:not(.y-home) .y-band{padding:88px 0 96px}
 .y-band .bd-in p{font-size:28px}
 .why-grid{grid-template-columns:1fr;gap:12px}
 body:not(.y-home) .why-grid li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;padding:26px 22px 28px}
 .why-grid .w-ic{grid-row:1/span 2;margin:0}
 .why-grid .w-ic .ic{width:30px;height:30px}
 .ot-wrap{margin-top:64px}
 .ot-grid{grid-template-columns:1fr;gap:10px}
 body:not(.y-home) a.ot{display:grid;grid-template-columns:36px minmax(0,1fr) 20px;column-gap:16px;align-items:start;padding:22px 20px 24px}
 body:not(.y-home) .ot .go{position:static;margin-top:4px}
 body:not(.y-home) .y-faq .fq-q{padding:18px 16px 18px 20px;font-size:16.5px}
 body:not(.y-home) .y-faq .fq-a{padding:0 20px 24px}
 .gs{margin-top:52px;padding-top:44px}
 .gs h2{font-size:28px}
 .g-lead .g-first{font-size:19.5px}
 .gp-grid,.g-check ul{grid-template-columns:1fr}
 .g-check{padding:28px 18px 24px;clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
 .gc-h{grid-template-columns:auto minmax(0,1fr);row-gap:14px}
 .gc-h b{grid-column:2;justify-self:start}
 .gc-h h2{font-size:24px}
 .g-faq h2{font-size:28px}
 body:not(.y-home) .g-close{grid-template-columns:1fr;row-gap:16px;padding:26px 22px 30px}
 .g-fig img,body:not(.y-home) .a-fig img{clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
 .gd-grid{grid-template-columns:1fr;gap:12px}
 .gm-reads{margin-top:64px}
 /* phones: the supporting lists (more guides, related articles, more insights) as compact rows, photo on the left */
 body:not(.y-home) .g-more a.gd-card,body:not(.y-home) :is(.gm-reads,.a-rel) .y-card{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:stretch}
 body:not(.y-home) .g-more .gd-card .gd-img,body:not(.y-home) :is(.gm-reads,.a-rel) .yc-img{aspect-ratio:auto;height:auto;min-height:100%;margin:1px 0 1px 1px}
 body:not(.y-home) .g-more .gd-card .gd-body,body:not(.y-home) :is(.gm-reads,.a-rel) .yc-body{padding:16px 16px 20px 18px}
 body:not(.y-home) .g-more .gd-card .gd-body b,body:not(.y-home) :is(.gm-reads,.a-rel) .y-card h3{font-size:17px;margin-top:8px}
 body:not(.y-home) .g-more .gd-card .gd-body small,body:not(.y-home) :is(.gm-reads,.a-rel) .yc-ex{font-size:14.5px;-webkit-line-clamp:2}
 body:not(.y-home) .g-more .gd-card .gd-go{padding-top:12px;font-size:14.5px}
 body:not(.y-home) :is(.gm-reads,.a-rel) .yc-meta{margin-bottom:8px;font-size:12.5px}
 body:not(.y-home) :is(.gm-reads,.a-rel) .yc-more{padding-top:10px}
 body:not(.y-home) :is(.gm-reads,.a-rel) .row.g-4{--bs-gutter-y:12px}
 .hw-steps{padding-top:80px}
 .hw-row{padding:52px 0;gap:32px}
 .hw-n{width:56px;height:56px;font-size:24px;margin-bottom:22px}
 .hw-txt h2{font-size:32px}
 .hw-txt p{font-size:16.5px}
 .fq-page .fg{margin-bottom:56px}
 .fq-page .fg h2{font-size:26px;gap:14px}
 .fq-page .fg h2::before{width:40px;height:40px;flex-basis:40px;font-size:14px}
 body:not(.y-home) .ev-chips{grid-template-columns:1fr;margin-top:36px}
 body:not(.y-home) .ev-chips li{border-right:0;border-bottom:1px solid var(--syh-line-light);padding:18px 20px}
 body:not(.y-home) .ev-chips li:last-child{border-bottom:0}
 .y-plans-page{padding:80px 0 88px}
 body:not(.y-home) .pl{padding:30px 22px 32px}
 body:not(.y-home) .pl.featured{padding-top:60px;padding-bottom:34px}
 body:not(.y-home) .pl-badge{left:22px}
 body:not(.y-home) .pl-price b{font-size:52px}
 body:not(.y-home) .pl-note{align-items:flex-start;margin-top:40px}
 body:not(.y-home) .cmp th,body:not(.y-home) .cmp td{padding:15px 14px}
 body:not(.y-home) .cmp thead th{font-size:18px;padding:18px 14px}
 body:not(.y-home) .y-faqs .fq-card{margin-top:28px}
 .y-join .jn-head h1{font-size:40px}
 body:not(.y-home) .jn-card,body:not(.y-home) .cf-card{padding:30px 20px 34px}
 body:not(.y-home) .jn-card h2,body:not(.y-home) .cf-card h2{font-size:26px;margin-bottom:22px}
 body:not(.y-home) .jp-body{padding:20px 18px 18px}
 body:not(.y-home) .jp-price b{font-size:40px}
 .y-join .jn-grid{padding:28px 18px 32px;clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
 body:not(.y-home) .jp-switch{gap:8px}
 body:not(.y-home) .jp-switch a{min-height:70px;padding:12px 12px}
 body:not(.y-home) .jp-switch a b{font-size:16px}
 body:not(.y-home) .jp-switch a small{font-size:12.5px}
 body:not(.y-home) .jn-plan .pl-f{grid-template-columns:minmax(0,1fr)}
 body:not(.y-home) .jn-consent{padding:18px 16px 16px 52px}
 body:not(.y-home) .ct-side{padding:28px 22px 30px}
 body:not(.y-home) .bl-head{padding-bottom:72px}
 body:not(.y-home) .bl-search{height:58px}
 body:not(.y-home) .bl-search input{font-size:17px}
 body:not(.y-home) a.bl-feat{margin-top:40px}
 body:not(.y-home) .bf-t{padding:26px 22px 30px}
 body:not(.y-home) .bf-t b{font-size:26px}
 body:not(.y-home) .bl-list{padding-top:64px}
 body:not(.y-home) .cat-tabs{flex-wrap:nowrap;gap:0 26px;margin:0 calc(var(--bs-gutter-x,32px) * -.5) 36px;padding:0 calc(var(--bs-gutter-x,32px) * .5);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 body:not(.y-home) .cat-tabs::-webkit-scrollbar{display:none}
 body:not(.y-home) .cat-tabs button{flex:0 0 auto;height:52px}
 body:not(.y-home) .y-ahead{padding:calc(var(--hdr) + 44px) 0 56px}
 body:not(.y-home) .y-ahead h1{font-size:34px;line-height:1.08}
 body:not(.y-home) .a-meta{margin:24px 0 32px;font-size:14px}
 body:not(.y-home) .a-meta{gap:6px 18px}
 body:not(.y-home) .a-meta>*{padding:0;border-left:0}
 body:not(.y-home) .a-lead{aspect-ratio:3/2;clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%)}
 body:not(.y-home) .y-article{padding:56px 0 88px}
 body:not(.y-home) .a-take{padding:22px 20px 20px;margin-bottom:40px}
 body:not(.y-home) .a-body{font-size:17px}
 body:not(.y-home) .a-body>p:first-child{font-size:18.5px}
 body:not(.y-home) .a-body h2{font-size:25px;margin-top:48px}
 body:not(.y-home) .y-note{grid-template-columns:1fr;row-gap:14px;padding:22px 20px 24px}
 body:not(.y-home) .y-note p{font-size:17px}
 body:not(.y-home) .pn-row{grid-template-columns:1fr}
 body:not(.y-home) .pn.next{grid-column:auto}
 body:not(.y-home) .lg-body{padding:64px 0 88px}
 body:not(.y-home) .legal h2{font-size:22px;margin-top:44px}
 body:not(.y-home) .legal p,body:not(.y-home) .legal li{font-size:16.5px}
 body:not(.y-home) .legal>p:first-child{font-size:18px}
}
@media (max-width:575.98px){
 /* rows keep the container gutter (16 px a side) so no row is wider than the screen */
 body:not(.y-home) main .row.g-5,body:not(.y-home) main .row.g-4{--bs-gutter-x:32px}
 .y-phero .hero-acts .y-btn{flex:0 0 auto}
 body:not(.y-home) .a-share>span{flex:0 0 100%}
 body:not(.y-home) .a-share>a,body:not(.y-home) .a-share>button{flex:1 1 0}
 .ct-cards{grid-template-columns:1fr}
}
@media (min-width:576px) and (max-width:991.98px){body:not(.y-home) .fq-nav ol.dots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}}
@media (max-height:520px) and (orientation:landscape){body:not(.y-home) .side-stick,body:not(.y-home) .jn-plan{position:static!important}}
@media (max-height:839.98px) and (min-width:992px){body:not(.y-home) .jn-plan{position:relative;top:auto}}
@media (prefers-reduced-motion:reduce){
 body:not(.y-home) .t-faq .y-faq .fq{transition:none}
}

/* ---------- 17. review fixes 2026-10-14 (inner-page reviews, designer + client) ---------- */
/* 17a. trade heads: the trade's own night, dusk or detail photo; the shade carries the text on the left and lets the
   photo read on the right */
@media (min-width:992px){
 .y-phero.tall .ph-bg{filter:saturate(.9) contrast(1.04) brightness(.95)}
}

/* 17b. the statement band: a night photo on every trade, graded so its lit windows read on the right half */
body:not(.y-home) .y-band .bd-bg{filter:saturate(.85) contrast(1.05) brightness(.92)}
body:not(.y-home) .y-band .bd-shade{background:linear-gradient(90deg,rgba(27,30,35,.9) 0%,rgba(27,30,35,.66) 48%,rgba(27,30,35,.26) 100%)}
@media (max-width:991.98px){body:not(.y-home) .y-band .bd-shade{background:linear-gradient(90deg,rgba(27,30,35,.9) 0%,rgba(27,30,35,.72) 100%)}}

/* 17c. t-why: a tall night photo (chamfered bottom-right) beside the head, and the five reasons as a ruled list on
   graphite (yellow line icon, title, text; no plates) */
.t-why .tw-photo{position:relative;overflow:hidden;background:#000;clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),calc(100% - 48px) 100%,0 100%)}
.t-why .tw-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.05) brightness(.96)}
body:not(.y-home) .t-why .why-grid{display:block;margin:0;padding:0;border-bottom:1px solid var(--syh-line-dark)}
body:not(.y-home) .t-why .why-grid.why-grid li:nth-child(n){display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:22px;grid-column:auto;padding:26px 0 28px;border-top:1px solid var(--syh-line-dark);box-shadow:none;background:none;clip-path:none}
body:not(.y-home) .t-why .why-grid.why-grid li:first-child{border-top-color:var(--syh-input-dark)}
.t-why .why-grid .w-ic{grid-row:1/span 2;margin:0;padding-top:1px}
.t-why .why-grid .w-ic .ic{width:30px;height:30px}
.t-why .why-grid h3{margin:0 0 8px;font-size:20px;line-height:1.25}
.t-why .why-grid p{max-width:58ch;font-size:15.5px;line-height:1.62}
@media (min-width:992px){
 .t-why>.container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:80px;align-items:start}
 .t-why .tw-photo{grid-column:1;grid-row:1/span 2;align-self:stretch;min-height:520px}
 body:not(.y-home) .t-why .y-head{grid-column:2;display:block;margin:0 0 36px}
 body:not(.y-home) .t-why .y-head h2{margin:0 0 16px}
 .t-why .why-grid{grid-column:2}
}
@media (min-width:1200px){
 body:not(.y-home) .t-why .why-grid.why-grid li:nth-child(n){grid-template-columns:40px minmax(0,5fr) minmax(0,7fr);column-gap:24px}
 .t-why .why-grid .w-ic{grid-row:auto}
 .t-why .why-grid h3{margin:3px 0 0}
}
@media (min-width:992px) and (max-width:1199.98px){.t-why>.container{column-gap:56px}}
@media (max-width:991.98px){
 .t-why .tw-photo{aspect-ratio:16/9;margin:0 0 48px;clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%)}
}

/* 17d. v-cards: a lintel photo above the 2 x 2 */
.v-cards .vc-lintel{position:relative;margin:0 0 24px;aspect-ratio:21/8;overflow:hidden;background:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.v-cards .vc-lintel img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.05)}
@media (max-width:767.98px){.v-cards .vc-lintel{aspect-ratio:16/9}}

/* 17e. trade questions, desktop door plates: shorter, and every closed plate anchored: its number at the head (a
   1.5 px outline numeral), the question under it, the + at its foot */
@media (min-width:1200px) and (prefers-reduced-motion:no-preference){
 body:not(.y-home) .t-faq .y-faq{min-height:380px;counter-reset:tf}
 body:not(.y-home) .t-faq .y-faq .fq{counter-increment:tf}
 body:not(.y-home) .t-faq .y-faq .fq:not(.open) h3{flex-direction:column}
 body:not(.y-home) .t-faq .y-faq .fq:not(.open) h3::before{content:counter(tf,decimal-leading-zero);display:block;flex:0 0 auto;padding:26px 22px 0;font-size:54px;font-weight:800;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--syh-input-light);font-variant-numeric:tabular-nums}
 body:not(.y-home) .t-faq .y-faq .fq:not(.open) .fq-q{flex:1 1 auto;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:22px;padding:16px 20px 22px 22px}
}

/* 17f. contact: no stray hairline at the top of the graphite plate */
body:not(.y-home) .ct-side .ct-cards{border-top:0}
body:not(.y-home) .ct-side .ct-cards>.ctc:first-child{padding-top:0}
@media (min-width:768px) and (max-width:991.98px){body:not(.y-home) .ct-side .ct-cards>.ctc{padding-top:0}}

/* 17g. guides: the 911 safety note on the yellow plate (as the home's "Not a security company." plate) */
body:not(.y-home) main .gp.gp.urgent{--pl-bg:var(--syh-yellow);--pl-line:var(--syh-yellow)}
body:not(.y-home) .gp.urgent h3{color:var(--syh-graphite)}
body:not(.y-home) .gp.urgent p{color:rgba(27,30,35,.86)}
body:not(.y-home) .gp.urgent .gp-ic{color:var(--syh-graphite)}

/* 17h. how it works: a narrower gutter for the blade on small desktops */
@media (min-width:992px) and (max-width:1199.98px){.hw-list>.hw-row{column-gap:88px}}

/* 17i. how it works, is / is not: tablets and phones */
@media (max-width:1199.98px){
 .in-ledger{column-gap:48px;padding:52px 48px 56px}
 .hw-isnot .in-ledger h2{font-size:40px}
 .in-grid{column-gap:32px}
}
@media (max-width:991.98px){
 .in-ledger{grid-template-columns:1fr;row-gap:36px;padding:44px 36px 52px;clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%)}
 .hw-isnot .in-ledger h2{max-width:none;font-size:38px}
 .hw-isnot .in-photo img{aspect-ratio:16/9}
}
@media (max-width:767.98px){
 .in-ledger{padding:36px 22px 44px}
 .hw-isnot .in-ledger h2{font-size:32px;line-height:1.08}
 .in-grid{grid-template-columns:1fr}
 .in-rule{height:1px;margin:30px 0 34px}
 .in-rule::before{left:0;top:50%;margin:-17px 0 0;padding:0 14px 0 0}
 .hw-isnot .in-photo img{aspect-ratio:16/10}
 body:not(.y-home) .hw-isnot .in-note{align-items:flex-start;padding:18px 18px 20px}
}

/* 17j. pricing questions: the head across the container; the questions on the left; one graphite contact plate on the
   right: a yellow keyhole drawing at its top, the call and email lines, the photo at its foot */
body:not(.y-home) .y-faqs.pq .fq-card{display:flex;flex-direction:column;margin:0}
.pq .pq-art{display:block;width:40px;height:56px;margin:34px 26px 8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 56'%3E%3Cpath d='M14.4 25.4a10 10 0 1 1 11.2 0L29 50H11z' fill='none' stroke='%23FFC21A' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E") 0 0/40px 56px no-repeat}
body:not(.y-home) .y-faqs.pq .fq-card .fq-lines{margin:0;padding:6px 26px 20px}
body:not(.y-home) .y-faqs.pq .fq-card .fq-ph{aspect-ratio:4/3;margin:0}
body:not(.y-home) .y-faqs.pq .fq-card .fq-ph img{filter:saturate(.8) contrast(1.04)}

@media (min-width:768px) and (max-width:991.98px){
 body:not(.y-home) .y-faqs.pq .fq-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr}
 .pq .pq-art{grid-column:1}
 body:not(.y-home) .y-faqs.pq .fq-card .fq-lines{grid-column:1}
 body:not(.y-home) .y-faqs.pq .fq-card .fq-ph{grid-column:2;grid-row:1/span 2;aspect-ratio:auto;min-height:260px}
}

/* 17k. 404: tablets and phones put the photo on top and the text under it */
@media (max-width:1199.98px){body:not(.y-home) .nf h1{font-size:68px}}
@media (max-width:991.98px){
 .nf{padding-bottom:56px}
 .nf-hero{display:block;min-height:0;padding:0 0 64px;clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%)}
 .nf-photo{position:relative;top:auto;left:auto;width:100%;margin:0;aspect-ratio:16/10;overflow:hidden}
 .nf-photo::after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,rgba(27,30,35,1) 0%,rgba(27,30,35,.3) 32%,rgba(27,30,35,0) 56%),linear-gradient(180deg,rgba(27,30,35,.6) 0,rgba(27,30,35,0) 140px)}
 .nf-shade{display:none}
 .nf-art{left:50.6%;top:48.7%;width:12.5%}
 .nf-in{margin-top:-24px}
}
@media (max-width:767.98px){
 .nf-photo{aspect-ratio:4/5}
 .nf-art{left:51.1%;top:48.75%;width:23.4%}
 body:not(.y-home) .nf h1{font-size:52px}
 .nf .lede{font-size:17px;margin-bottom:30px}
}

/* 17l. insights index: a ruled index, not a grid of equal cards. main.js still shows, hides and pages the [data-post]
   rows; phones keep the stacked cards. Hover or focus puts a yellow bar beside the row */
@media (min-width:768px){
 body:not(.y-home) .bl-list .cat-tabs{margin-bottom:0}
 body:not(.y-home) .bl-list .row[data-post-grid]{--bs-gutter-y:0;margin-left:0;margin-right:0}
 body:not(.y-home) .bl-list .row[data-post-grid]>[data-post][data-cat]{flex:0 0 100%;width:100%;max-width:100%;padding-left:0;padding-right:0}
 body:not(.y-home) .bl-list .row[data-post-grid]>[data-post][data-cat]>.y-card{position:relative;display:grid;grid-template-columns:240px minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:36px;align-items:start;height:auto;padding:30px 0;border-bottom:1px solid var(--syh-line-light);box-shadow:none;background:none;clip-path:none;overflow:visible}
 body:not(.y-home) .bl-list .row[data-post-grid]>[data-post][data-cat]>.y-card .yc-img{grid-column:1;grid-row:1/span 3;width:240px;height:150px;min-height:0;aspect-ratio:auto;flex:none;margin:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
 body:not(.y-home) .bl-list .row[data-post-grid]>[data-post][data-cat]>.y-card .yc-body{display:contents}
 body:not(.y-home) .bl-list .row[data-post-grid] .y-card .yc-meta{grid-column:2;grid-row:1;margin:2px 0 10px}
 body:not(.y-home) .bl-list .row[data-post-grid] .y-card h3{grid-column:2;grid-row:2;max-width:30em;margin:0 0 10px;font-size:24px;font-weight:800;line-height:1.18;letter-spacing:-.02em}
 body:not(.y-home) .bl-list .row[data-post-grid] .y-card .yc-ex{grid-column:2;grid-row:3;max-width:66ch;margin:0}
 body:not(.y-home) .bl-list .row[data-post-grid] .y-card .yc-more{grid-column:3;grid-row:1;margin:2px 0 0;padding:0;border:0;white-space:nowrap}
 body:not(.y-home) .bl-list .row[data-post-grid] .y-card::before{content:"";position:absolute;left:-20px;top:30px;bottom:30px;width:2px;background:var(--syh-yellow);transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
 body:not(.y-home) .bl-list .row[data-post-grid] .y-card:is(:hover,:focus-within)::before{transform:scaleY(1)}
}
@media (min-width:768px) and (max-width:991.98px){
 body:not(.y-home) .bl-list .row[data-post-grid]>[data-post][data-cat]>.y-card{grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:28px}
 body:not(.y-home) .bl-list .row[data-post-grid]>[data-post][data-cat]>.y-card .yc-img{grid-row:1/span 4;width:200px;height:132px}
 body:not(.y-home) .bl-list .row[data-post-grid] .y-card h3{font-size:21px}
 body:not(.y-home) .bl-list .row[data-post-grid] .y-card .yc-more{grid-column:2;grid-row:4;margin:12px 0 0}
}
/* phones: the topic tabs fade at the right edge, so the topics past it read as more to scroll */
@media (max-width:767.98px){
 body:not(.y-home) .cat-tabs{padding-right:72px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
}

/* 17m. article: the reading measure the plan asks for */
body:not(.y-home) .a-body{max-width:66ch}

/* 17n. join: replaced by the centred sheet (section 10, cross-site QA 2026-10-14) */

/* ---------- 18. cross-site QA 2026-10-14 (the final pass before the owner's review) ---------- */
/* 18a. headline voice: h2 and h3 in Work Sans 700 at normal tracking, so SecureYrHome no longer speaks in
   HomeIsSecure's heavy, tightly tracked grotesque; every h1 keeps 800 / -0.03em. It is the type system's last word,
   written once after all the section rules (hence !important) */
:is(h2,h3){font-weight:700!important;letter-spacing:normal!important}
.h-ins .if-t b{font-weight:700;letter-spacing:normal}

/* 18b. the contents plate (articles, guides, FAQ, legal): no "1 / 7" counter on screen (the scroll-spy still writes it,
   and screen readers still hear it), the progress bar stays; the items carry a small keyhole instead of a dot */
body:not(.y-home) .toc-top small[data-spy-count]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
body:not(.y-home) .y-toc ol.dots a::before,body:not(.y-home) .toc-m ol.dots a::before{width:8px;height:12px;flex:0 0 8px;margin-top:4px;background:var(--syh-input-dark);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Ccircle cx='4' cy='3.6' r='3.1'/%3E%3Cpath d='M2.5 5.6h3L6.6 12H1.4z'/%3E%3C/svg%3E") 50% 50%/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Ccircle cx='4' cy='3.6' r='3.1'/%3E%3Cpath d='M2.5 5.6h3L6.6 12H1.4z'/%3E%3C/svg%3E") 50% 50%/contain no-repeat}
body:not(.y-home) .toc-m ol.dots a::before{background:var(--syh-graphite)}
body:not(.y-home) .y-toc ol.dots a.active::before{background:var(--syh-yellow)}

/* 18c. pricing, "The three plans, side by side": stacked chamfered plates instead of a ruled column table (the phone
   switcher below 700 px is unchanged): a graphite plate with the three plans, then one steel plate per feature, the
   label on the left, Standard marked by a yellow rule. The table and its semantics stay */
@media (min-width:768px){
 body:not(.y-home) .cmp-wrap{overflow:visible;background:none}
 body:not(.y-home) .cmp{display:block;min-width:0}
 body:not(.y-home) .cmp thead,body:not(.y-home) .cmp tbody{display:grid;gap:8px}
 body:not(.y-home) .cmp thead{margin-bottom:8px}
 body:not(.y-home) .cmp tr{display:grid;grid-template-columns:minmax(0,1.05fr) repeat(3,minmax(0,1fr));clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
 body:not(.y-home) .cmp thead tr{background:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
 body:not(.y-home) .cmp tbody tr{background:var(--syh-steel)}
 body:not(.y-home) .cmp th,body:not(.y-home) .cmp td{display:block;width:auto;padding:18px 22px;border-bottom:0}
 body:not(.y-home) .cmp thead th{background:none}
 body:not(.y-home) .cmp thead th:first-child{width:auto}
 body:not(.y-home) .cmp thead th:nth-child(3){background:none;box-shadow:inset 0 4px 0 var(--syh-yellow)}
 body:not(.y-home) .cmp td:nth-child(3){background:none;box-shadow:inset 2px 0 0 var(--syh-yellow)}
 body:not(.y-home) .cmp tbody tr:last-child th,body:not(.y-home) .cmp tbody tr:last-child td{border-bottom:0}
 body:not(.y-home) .cmp tbody th{font-weight:600}
}

/* 18d. pricing questions: the home's and the trades' horizontal accordion (door plates: closed plates narrow, with an
   outline number at the head and the + at the foot; the open plate graphite and wide); the contact plate runs under
   the row as one strip (keyhole, call and email lines, the photo at its end) */
body:not(.y-home) .pq .y-faq .fq{--pl-bg:#fff;--pl-line:#fff}
body:not(.y-home) .pq .y-faq .fq.open{--pl-bg:var(--syh-graphite);--pl-line:var(--syh-graphite)}
@media (min-width:1200px) and (prefers-reduced-motion:no-preference){
 body:not(.y-home) .pq .row>[class*=col-]{width:100%;margin-left:0}
 body:not(.y-home) .pq .y-faq{display:flex;gap:12px;align-items:stretch;min-height:380px;counter-reset:tf}
 body:not(.y-home) .pq .y-faq .fq{display:flex;flex-direction:column;flex:1 1 0;min-width:0;margin:0;counter-increment:tf;transition:flex-grow .5s cubic-bezier(.2,.7,.2,1),background-color .25s}
 body:not(.y-home) .pq .y-faq .fq.open{flex-grow:2.6}
 body:not(.y-home) .pq .y-faq h3{display:flex;flex:1 1 auto}
 body:not(.y-home) .pq .y-faq .fq.open h3{flex:0 0 auto}
 body:not(.y-home) .pq .y-faq .fq:not(.open) h3{flex-direction:column}
 body:not(.y-home) .pq .y-faq .fq:not(.open) h3::before{content:counter(tf,decimal-leading-zero);display:block;flex:0 0 auto;padding:26px 22px 0;font-size:54px;font-weight:800;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--syh-input-light);font-variant-numeric:tabular-nums}
 body:not(.y-home) .pq .y-faq .fq-q{position:static}
 body:not(.y-home) .pq .y-faq .fq:not(.open) .fq-q{flex:1 1 auto;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:22px;padding:16px 20px 22px 22px;font-size:16.5px;line-height:1.35}
 body:not(.y-home) .pq .y-faq .fq-q::after{content:"";position:absolute;inset:0;z-index:1}
 body:not(.y-home) .pq .y-faq .fq.open .fq-q{flex-direction:row;justify-content:space-between;align-items:flex-start;padding:28px 24px 4px 26px;font-size:20px;line-height:1.25}
 body:not(.y-home) .pq .y-faq .fq.open .fq-q::after{content:none}
 body:not(.y-home) .pq .y-faq .fq:not(.open) .fq-q span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
 body:not(.y-home) .pq .y-faq .fq:not(.open):hover{--pl-line:var(--syh-input-light)}
 body:not(.y-home) .pq .y-faq .collapsing{transition:none}
 body:not(.y-home) .pq .y-faq .fq-a{padding:20px 26px 34px}
 body:not(.y-home) .y-faqs.pq .fq-card{display:grid;grid-template-columns:auto minmax(0,1fr) 340px;align-items:center;margin:16px 0 0}
 .pq .pq-art{grid-column:1;grid-row:1;margin:24px 8px 24px 30px}
 body:not(.y-home) .y-faqs.pq .fq-card .fq-lines{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;column-gap:48px;padding:12px 26px}
 body:not(.y-home) .y-faqs.pq .fq-card .fq-lines .ct-line{border:0}
 /* the e-mail line sizes itself to its text here (style.css gives it inline-size containment, which collapses it in a
    flex row), and the address never breaks */
 body:not(.y-home) .y-faqs.pq .fq-card .ct-line[href^="mailto:"]{container-type:normal}
 body:not(.y-home) .y-faqs.pq .fq-card .ct-line>span:last-child{overflow-wrap:normal;white-space:nowrap;font-size:16px}
 body:not(.y-home) .y-faqs.pq .fq-card .fq-ph{grid-column:3;grid-row:1;align-self:stretch;aspect-ratio:auto;min-height:150px}
}

/* 18e. How It Works, "What we stand by": a line drawing heads each plate (records, consent, the member's key) */
.pr-cards .pr-art{display:block;height:92px;margin:0 0 30px;color:var(--syh-yellow)}
.pr-cards .pr-art .ia{display:block;width:auto;height:100%}
@media (max-width:991.98px){
 .pr-cards .pr-art{grid-row:1/span 2;height:auto;width:100%;max-width:120px;margin:0}
 .pr-cards .pr-art .ia{width:100%;height:auto}
 body:not(.y-home) .pr-cards li{grid-template-columns:120px minmax(0,1fr)}
}
@media (max-width:575.98px){
 body:not(.y-home) .pr-cards li{grid-template-columns:minmax(0,1fr)}
 .pr-cards .pr-art{grid-row:auto;max-width:180px;margin:0 0 22px}
}

/* 18f. How It Works, "is / is not": the ledger plate takes a 1.5 px yellow keyline (its chamfer drawn in yellow too) */
.hw-isnot .in-ledger{box-shadow:inset 0 0 0 1.5px var(--syh-yellow);background:linear-gradient(to bottom right,transparent calc(50% - 1.1px),var(--syh-yellow) calc(50% - 1.1px),var(--syh-yellow) 50%,transparent 50%) 100% 100%/48px 48px no-repeat,var(--syh-graphite)}
@media (max-width:767.98px){.hw-isnot .in-ledger{background:linear-gradient(to bottom right,transparent calc(50% - 1.1px),var(--syh-yellow) calc(50% - 1.1px),var(--syh-yellow) 50%,transparent 50%) 100% 100%/32px 32px no-repeat,var(--syh-graphite)}}

/* 18g. pricing plans: the home's stacked plates (cross-site QA 2026-10-14): one full-width plate per plan, the plan,
   price, blurb and Get Started on the left, "What's included" in two columns on the right; Standard marked by a yellow
   keyline and a yellow chamfer instead of a raised yellow column */
@media (min-width:992px){
 .y-plans-page .pl-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:16px;border:0}
 body:not(.y-home) .y-plans-page .pl{--pl-line:var(--syh-line-dark);--pl-w:1px;position:relative;display:grid;grid-row:auto;grid-template-columns:minmax(0,330px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:56px;align-content:stretch;margin:0;padding:36px 40px 38px;border:0;color:#fff;
  box-shadow:inset 0 0 0 var(--pl-w) var(--pl-line);
  background:linear-gradient(to bottom right,transparent calc(50% - 1.1px),var(--pl-line) calc(50% - 1.1px),var(--pl-line) 50%,transparent 50%) 100% 100%/22px 22px no-repeat,#20242A;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
 body:not(.y-home) .y-plans-page .pl.featured{--pl-line:var(--syh-yellow);--pl-w:1.5px;margin:0;padding:36px 40px 38px;color:#fff}
 body:not(.y-home) .y-plans-page .pl-top{grid-column:1;grid-row:1/span 2;padding-bottom:0;border-bottom:0}
 body:not(.y-home) .y-plans-page .pl-inc{grid-column:2;grid-row:1;margin:4px 0 8px}
 body:not(.y-home) .y-plans-page .pl-f{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-content:start}
 body:not(.y-home) .y-plans-page .pl-f li,body:not(.y-home) .y-plans-page .pl-f li:last-child{padding:11px 0;border-bottom:0;border-top:1px solid var(--syh-line-dark)}
 body:not(.y-home) .y-plans-page .pl-badge{top:36px;right:40px;left:auto;background:var(--syh-yellow);color:var(--syh-graphite)}
 .y-plans-page .y-btn.outline::after{background:#20242A}
}
/* the featured plate reads like the others (graphite), only its keyline, chamfer and button are yellow */
body:not(.y-home) .y-plans-page .pl.featured :is(h2,.pl-price b,.pl-f li){color:#fff}
body:not(.y-home) .y-plans-page .pl.featured :is(.pl-tag,.pl-inc,.pl-price span,.pl-price s){color:var(--syh-muted-dark)}
body:not(.y-home) .y-plans-page .pl.featured .pl-b{color:rgba(241,242,244,.8)}
body:not(.y-home) .y-plans-page .pl.featured .pl-price{border-top-color:var(--syh-line-dark)}
body:not(.y-home) .y-plans-page .pl.featured .pl-f li{border-top-color:var(--syh-line-dark)}
body:not(.y-home) .y-plans-page .pl.featured .pl-f .ic{color:var(--syh-yellow)}
.y-plans-page .pl.featured .y-btn.primary{color:var(--syh-graphite)}
.y-plans-page .pl.featured .y-btn.primary::before{background:var(--syh-yellow)}
.y-plans-page .pl.featured .y-btn.primary:hover{color:var(--syh-graphite)}
.y-plans-page .pl.featured .y-btn.primary:hover::before{background:var(--syh-yellow-hover)}
.y-plans-page .pl.featured :focus-visible{outline-color:var(--syh-yellow)}
@media (max-width:991.98px){
 body:not(.y-home) .y-plans-page .pl.featured{border:1.5px solid var(--syh-yellow);background:none;color:#fff;clip-path:none}
 body:not(.y-home) .y-plans-page .pl.featured .pl-top{border-bottom-color:var(--syh-line-dark)}
 body:not(.y-home) .y-plans-page .pl.featured .pl-f li{border-bottom-color:var(--syh-line-dark)}
 body:not(.y-home) .y-plans-page .pl-badge{background:var(--syh-yellow);color:var(--syh-graphite)}
}

/* ---------- 19. photos and devices 2026-10-14 (owner: no head cut off in any photo at any size; every page right
   on phones, phone landscape, tablets, laptops and wide screens). Measured with verify/crop-report.mjs on 19 device
   sizes against a head map of every photo; the framing below keeps every face whole ---------- */
/* 19a. content-page heads: from 1600 px the head grows with the screen (45vw), so a wide screen no longer crops the
   photo to a thin strip that slices the faces near its top, and the faces stay above the text plate */
@media (min-width:1600px){.y-phero:not(.short){min-height:45vw}}
/* 19b. heads whose photo shows people (Choosing an Installer, New Home Checklist, Package Deliveries, Away From Home):
   on every screen the photo is a full-width band under the header bar and the plate stands below it, its top edge
   on the band's foot (the tablet composition). Laid over the photo, the plate and the header bar sat on faces at
   most desktop widths; this way every face shows whole, never under the plate, the logo or the menu */
.y-phero:has(>.ph-bg:is([src*="pexels-photo-3721347."],[src*="pexels-photo-7217914."],[src*="parcels-6868622"],[src*="pexels-photo-6617545."])){--band:38vw;min-height:0;padding:calc(var(--hdr) + var(--band) - 32px) 0 0}
.y-phero:has(>.ph-bg:is([src*="pexels-photo-3721347."],[src*="pexels-photo-7217914."],[src*="parcels-6868622"],[src*="pexels-photo-6617545."])) :is(.ph-bg,.ph-shade){top:var(--hdr);bottom:auto;height:var(--band)}
.y-phero:has(>.ph-bg:is([src*="pexels-photo-3721347."],[src*="pexels-photo-7217914."],[src*="parcels-6868622"],[src*="pexels-photo-6617545."])) .ph-shade{background:linear-gradient(0deg,rgba(27,30,35,.4) 0,rgba(27,30,35,0) 140px)}
/* Away From Home: the family at the door reaches from the top of the frame to the child's hat, so its band is never
   wider than 2.2:1 (46vw tall) and the plate starts at its foot (no overlap, the hat stays clear) */
.y-phero:has(>.ph-bg[src*="pexels-photo-6617545."]){--band:46vw;padding-top:calc(var(--hdr) + var(--band))}
@media (max-width:991.98px){
 .y-phero:has(>.ph-bg:is([src*="pexels-photo-3721347."],[src*="pexels-photo-7217914."],[src*="parcels-6868622"],[src*="pexels-photo-6617545."])){--band:232px}
 .y-phero:has(>.ph-bg[src*="pexels-photo-6617545."]){--band:max(232px,46vw);padding-top:calc(var(--hdr) + var(--band))}
}
@media (max-width:767.98px){
 .y-phero:has(>.ph-bg:is([src*="pexels-photo-3721347."],[src*="pexels-photo-7217914."],[src*="parcels-6868622"],[src*="pexels-photo-6617545."])){--band:200px;padding-top:calc(var(--hdr) + var(--band) - 24px)}
 .y-phero:has(>.ph-bg[src*="pexels-photo-6617545."]){--band:max(200px,46vw);padding-top:calc(var(--hdr) + var(--band))}
}
/* Away From Home, fresh-eyes check 2026-10-15: a second small child (the back of his head, beside the boy in the orange
   hood) reaches 0.735 of the photo's height; at 50% 13% the 2.2:1 band ended just above the bottom of his head. 16%
   keeps every head of the family whole at every width (the woman's beanie at the top still clears the edge) */
.y-phero>.ph-bg[src*="pexels-photo-6617545."]{object-position:50% 16%!important}
/* 19c. article photos from the admin (cards, an article's lead photo, the insights lists). Every frame they use is
   16:10 or wider, top-weighted by default (inline 50% 25%), so a new article's people keep their heads; photos whose
   people reach the frame's edge get their own framing here, by file name */
:is(.yc-img,.a-lead,.if-img,.bf-img,.ins-img) img[src*="pexels-photo-1325762."]{object-position:100% 10%!important}
/* fresh-eyes check 2026-10-15: in that photo (meeting round a table) the man in red is cut by the photo's left edge and
   the woman with glasses by its right edge, and the photo (1.616:1) is 1% wider than the cards' 16:10 frame, so any
   cover crop takes 1% more off one of them. The cards show the whole photo instead (fill: a 1% vertical stretch, not
   visible); the article's own lead photo is wider than 16:10 on desktops and uncropped below 992 px */
.yc-img img[src*="pexels-photo-1325762."]{object-fit:fill!important}
:is(.yc-img,.a-lead,.if-img,.bf-img,.ins-img) img[src*="pexels-photo-6995138."]{object-position:100% 0%!important}
:is(.yc-img,.a-lead,.if-img,.bf-img,.ins-img) img:is([src*="pexels-photo-6280742."],[src*="pexels-photo-7858229."]){object-position:50% 0%!important}
:is(.yc-img,.a-lead,.if-img,.bf-img,.ins-img) img[src*="pexels-photo-5638674."]{object-position:50% 5%!important}
.h-ins .ins-img img{object-position:50% 25%}
/* the article's lead photo on tablets and phones: the whole photo at its own shape (no crop at all) */
@media (max-width:991.98px){
 body:not(.y-home) .a-lead{aspect-ratio:auto}
 body:not(.y-home) .a-lead img{height:auto}
}
/* tablets: the wide first card keeps its photo at 16:10, at the top beside the text (a near-square box cut people
   at the sides); the ruled insights index keeps 16:10 thumbnails */
@media (min-width:768px) and (max-width:991.98px){
 body:not(.y-home) .row>.col-md-6.wide-md>.y-card .yc-img{aspect-ratio:16/10;min-height:0;align-self:flex-start}
 body:not(.y-home) .bl-list .row[data-post-grid]>[data-post][data-cat]>.y-card .yc-img{height:125px}
}
@media (min-width:992px) and (max-width:1199.98px){
 body:not(.y-home) .row>.col-md-6.col-xl-4.wide-md>.y-card .yc-img{aspect-ratio:16/10;min-height:0;align-self:flex-start}
}
/* phones: the compact rows (more guides, related articles, more insights) show a 16:10 thumbnail at the top of the
   photo column instead of a tall sliver of the photo */
@media (max-width:767.98px){
 body:not(.y-home) .g-more a.gd-card,body:not(.y-home) :is(.gm-reads,.a-rel) .y-card{align-items:start}
 body:not(.y-home) .g-more .gd-card .gd-img,body:not(.y-home) :is(.gm-reads,.a-rel) .yc-img{aspect-ratio:16/10;height:auto;min-height:0;margin:1px 0 0 1px}
}
/* 19d. join: on narrow phones the three plan choices stand as full-width rows (name left, price right); side by side
   "Standard" and "$249/month" were cut by the plate at 320-375 px */
@media (max-width:399.98px){
 body:not(.y-home) .jp-switch{grid-template-columns:minmax(0,1fr)}
 body:not(.y-home) .jp-switch a{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 18px}
}
/* 19e. insights index on tablets and small laptops: the topic tabs run past the right edge there too, so they fade
   at the edge (as on phones) to show there is more to scroll */
@media (min-width:768px) and (max-width:1259.98px){
 body:not(.y-home) .cat-tabs{padding-right:72px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
}
/* fresh-eyes device check 2026-10-15: on phones the topic tabs scroll inside the container. The strip ran to the
   screen edge, where the half-shown tab read as cut off by the screen rather than as a strip that scrolls; the fade
   at its right end stays */
@media (max-width:767.98px){
 body:not(.y-home) .cat-tabs{margin-left:0;margin-right:0;padding-left:0}
}
/* fresh-eyes device check 2026-10-15: the Residential Locksmiths head (35578808, the locksmith bent over his key
   machine in the middle of the photo). From 992 px the text plate lies over the photo's middle: it hid him completely
   at 1024-1440 px and covered half of his head at 1920-2560 px. From 992 px this head now takes the composition of the
   guide heads with people (19b): the photo as a full-width band under the header bar, the plate below it. Tablets and
   phones keep their photo band above the plate; there the plate's top edge covered his chin at 932x430, so the photo is
   framed on him at every width (50% 50%: his head stays between the header bar and the plate at all 19 sizes) */
@media (min-width:992px){
 .y-phero.tall:has(>.ph-bg[src*="pexels-photo-35578808."]){--band:38vw;min-height:0;padding:calc(var(--hdr) + var(--band) - 32px) 0 0}
 .y-phero.tall:has(>.ph-bg[src*="pexels-photo-35578808."]) :is(.ph-bg,.ph-shade){top:var(--hdr);bottom:auto;height:var(--band)}
 .y-phero.tall:has(>.ph-bg[src*="pexels-photo-35578808."]) .ph-shade{background:linear-gradient(0deg,rgba(27,30,35,.4) 0,rgba(27,30,35,0) 140px)}
}
.y-phero>.ph-bg[src*="pexels-photo-35578808."]{object-position:50% 50%!important}
/* ---------- fresh-eyes device check 2, 2026-10-15 (second independent recheck) ---------- */
/* Away From Home head (6617545, the family at the door). In the 2.2:1 band (46vw) the photo shows 69% of its height,
   and the family runs from the top of the woman's beanie (0.07 of the photo) to the bottom of the second small child's
   head (0.735): framed at 16% the band ended within a hair of that child's head on tablets, laptops and wide screens.
   The band is now 47vw (2.13:1, 70.5% of the height), framed at 15% (0.044-0.749): every head of the family clears
   both edges of the band at every width */
.y-phero:has(>.ph-bg[src*="pexels-photo-6617545."]){--band:47vw}
@media (max-width:991.98px){.y-phero:has(>.ph-bg[src*="pexels-photo-6617545."]){--band:max(232px,47vw)}}
@media (max-width:767.98px){.y-phero:has(>.ph-bg[src*="pexels-photo-6617545."]){--band:max(200px,47vw)}}
.y-phero>.ph-bg[src*="pexels-photo-6617545."]{object-position:50% 15%!important}
/* mouse hover on cards: the photo zooms 3-4% from its centre, which takes 1.5-2% off every edge of the frame. Where a
   head reaches the frame's edge at rest, the zoom grows away from that edge instead (top centre; top right for
   6995138, whose woman meets the photo's top and right edges), so no head is cut while the pointer is on the card.
   The meeting photo (1325762, people at both side edges, shown whole in the cards) does not zoom */
:is(.gd-img,.yc-img,.if-img,.ins-img,.bf-img) img:is([src*="parcels-6868622"],[src*="pexels-photo-7217914."],[src*="pexels-photo-6280742."],[src*="pexels-photo-7858229."]){transform-origin:50% 0}
:is(.gd-img,.yc-img,.if-img,.ins-img,.bf-img) img[src*="pexels-photo-6995138."]{transform-origin:100% 0}
:is(.y-card,.gd-card,.ins-row,.ins-feat,.bl-feat):hover img[src*="pexels-photo-1325762."]{transform:none!important}

/* ---------- fresh-eyes device check 3, 2026-10-16 (final fix after three independent look passes at 7 sizes) ---------- */
/* 3a. guides, "Other security guides" on tablets (768-991 px): the first card is a wide row (its photo at 16:10 beside
   the text) and the other two stand side by side under it. The last card used to span the row as well, which left the
   second card alone with an empty half beside it */
@media (min-width:768px) and (max-width:991.98px){
 .gd-grid>:first-child~:last-child:nth-child(odd){grid-column:auto}
 body:not(.y-home) .gd-grid>a.gd-card:first-child{flex-direction:row;align-items:flex-start}
 body:not(.y-home) .gd-grid>a.gd-card:first-child .gd-img{flex:0 0 46%;aspect-ratio:16/10;margin:1px 0 0 1px}
 body:not(.y-home) .gd-grid>a.gd-card:first-child .gd-body{align-self:stretch;justify-content:center;padding:26px 30px 30px}
}
/* 3a2. labels at the site's label size, 12 px (they were 11.5 px): contact lines and cards, guide card groups, the plan
   badge, article topics */
body:not(.y-home) .ct-line small,body:not(.y-home) .gd-card .gd-g,body:not(.y-home) .pl-badge,body:not(.y-home) .ctc small,body:not(.y-home) .yc-cat{font-size:12px}
/* 3b. the sticky contents plate of the guides and articles (from 992 px) never grows past the screen. It was taller than
   the room under the header bar at 1024x768 and 1280x720 (about 805 px against 656), so its "Plans and prices" button
   stayed below the fold until the end of the article. The contents list now takes the height that is left after the
   extra links and the promo, and scrolls inside itself as before. Windows under 600 px tall keep the plate in the flow */
@media (min-width:992px) and (min-height:600px){
 body:not(.y-home) .side-stick>.y-toc.has-extra{display:flex;flex-direction:column;max-height:calc(100vh - var(--hdr) - 44px);max-height:calc(100svh - var(--hdr) - 44px)}
 body:not(.y-home) .side-stick>.y-toc.has-extra>*{flex:0 0 auto}
 body:not(.y-home) .side-stick>.y-toc.has-extra>ol{flex:0 1 auto;min-height:72px;max-height:none}
}
@media (min-width:992px) and (max-height:599.98px){body:not(.y-home) .side-stick{position:static}}
/* 3c. trade pages, the v-cards section ("Homeowners who fit your installs" and the other four) at 992-1199 px: the intro
   stacks above the photo lintel and the 2 x 2 plates, which take the container's width (beside the sticky intro they
   were 259 px wide and broke their titles, "Owner- / occupied filter") */
@media (min-width:992px) and (max-width:1199.98px){
 .v-cards .row.g-5>.col-lg-5,.v-cards .row.g-5>.col-lg-7{flex:0 0 auto;width:100%}
 .v-cards .x-intro{position:static;margin-bottom:8px}
}
/* 3d. FAQ page, the "Still curious?" card in the side column (from 992 px): slimmer padding, a 36 px icon box and the
   address a step smaller keep "help@secureyrhome.com" on one line (it broke after the @ from 1200 px) */
@media (min-width:992px){
 body:not(.y-home) .fq-page .fq-help{padding-left:16px;padding-right:16px}
 body:not(.y-home) .fq-page .fq-help .ct-ic{width:36px;height:36px;flex-basis:36px}
 body:not(.y-home) .fq-page .fq-help .ct-line{gap:12px}
 body:not(.y-home) .fq-page .fq-help .ct-line[href^="mailto:"]>span:last-child{font-size:14px;white-space:nowrap}
}
@media (min-width:1200px) and (max-width:1279.98px){body:not(.y-home) .fq-page .fq-help .ct-line[href^="mailto:"]>span:last-child{font-size:13.5px}}
/* 3e. pricing */
/* the graphite contact plate: its "Call us" and "Email us" labels in the label colour of the dark plates (they kept the
   light pages' grey, about 2.8:1 on graphite) */
body:not(.y-home) .y-faqs .fq-card .ct-line small{color:var(--syh-muted-dark)}
/* tablets: the three plan plates take the container's width (they stopped at 600 px, an empty strip beside them); inside
   each, the plan, price and button on the left and the list of what is included on the right, as on desktops */
@media (min-width:768px) and (max-width:991.98px){
 .y-plans-page .pl-grid{max-width:none}
 body:not(.y-home) .y-plans-page .pl{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:36px;align-content:start}
 body:not(.y-home) .y-plans-page .pl-top{grid-column:1;grid-row:1/span 2;padding-bottom:0;border-bottom:0}
 body:not(.y-home) .y-plans-page .pl-inc{grid-column:2;grid-row:1;margin:4px 0 8px}
 body:not(.y-home) .y-plans-page .pl-f{grid-column:2;grid-row:2;align-self:start}
 body:not(.y-home) .y-plans-page .pl-f li,body:not(.y-home) .y-plans-page .pl-f li:last-child{padding:11px 0;border-bottom:0;border-top:1px solid var(--syh-line-dark)}
}
/* small phones: the contact plate keeps "help@secureyrhome.com" on one line */
@media (max-width:374.98px){
 body:not(.y-home) .y-faqs.pq .fq-card .fq-lines{padding-left:20px;padding-right:20px}
 body:not(.y-home) .y-faqs.pq .fq-card .ct-ic{width:40px;height:40px;flex-basis:40px}
 body:not(.y-home) .y-faqs.pq .fq-card .ct-line{gap:14px}
 body:not(.y-home) .y-faqs.pq .fq-card .ct-line[href^="mailto:"]>span:last-child{font-size:14px;white-space:nowrap}
}
/* 3f. contact: on tablets the three cards (Call, Email, Office) line up (icon, label and value level across the row; the
   shorter cards' rows used to stretch) and the email column is a little wider, so the address keeps one line; small
   phones get a 40 px icon box and the address a step smaller for the same reason */
@media (min-width:768px) and (max-width:991.98px){
 body:not(.y-home) .ct-cards{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr)}
 body:not(.y-home) .ct-cards .ctc{align-content:start}
 body:not(.y-home) .ctc[href^="mailto:"] b{font-size:16px;white-space:nowrap}
}
@media (max-width:374.98px){
 body:not(.y-home) .ctc{grid-template-columns:40px minmax(0,1fr);column-gap:14px}
 body:not(.y-home) .ctc .ct-ic{width:40px;height:40px;flex-basis:40px}
 body:not(.y-home) .ctc[href^="mailto:"] b{font-size:14px;white-space:nowrap}
}
/* 3g. join (/get-started) */
/* small laptops (992-1099 px): the head and the sheet start on the site's 24 px gutter like the header and the footer
   (the 1000 px column sat 12 px in from it at 1024 px); from 1100 px the centred column stays */
@media (min-width:992px) and (max-width:1099.98px){.y-join>.container{max-width:none}}
/* the end of the page: the graphite field runs straight into the footer, so a hairline marks where the footer starts
   (main's white background no longer shows as a stray sub-pixel line); phones end the sheet 56 px above it */
body:not(.y-home) main:has(>.y-join){background:var(--syh-graphite)}
main:has(>.y-join)+.y-foot{border-top:1px solid var(--syh-line-dark)}
@media (max-width:767.98px){.y-join>.container{padding-bottom:56px}}
/* phones: the consent box's "Terms & Conditions" and "Privacy Policy" links are 41 px tap targets (29 px before); the
   consent wording and the links are unchanged */
@media (max-width:767.98px){
 body:not(.y-home) .jn-links{gap:0 22px;margin-top:6px}
 body:not(.y-home) .jn-links a{padding:9px 0}
}
/* 3h. how it works on tablets (768-991 px): the step drawings stand on plates of 520 px at most (675 x 506 px of mostly
   empty plate before), left-aligned under the text */
@media (min-width:768px) and (max-width:991.98px){body:not(.y-home) .hw-art .ha-plate{max-width:520px}}
/* 3i. phones */
@media (max-width:767.98px){
 /* tap targets: the breadcrumb links are 41 px tall (26), the visual spacing unchanged; the comparison header's
    "Select this plan" link 41 px (29) */
 body:not(.y-home) .y-crumbs a{padding:11px 0;margin:-8px 0}
 body:not(.y-home) .cmp thead th a{padding:10px 0;margin-top:2px}
 /* the "Other security guides" and "From insights" / "More insights" rows: a 120 px 16:10 thumbnail beside the label
    (and, on guide cards, the title); the excerpt and the link run the full width under them. The thumbnail used to sit
    at the top of a tall empty column. The photo keeps its 16:10 frame, so its crop is unchanged */
 body:not(.y-home) .g-more a.gd-card,body:not(.y-home) :is(.gm-reads,.a-rel) .y-card{grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;align-items:start;padding:0 0 18px}
 body:not(.y-home) .g-more .gd-card .gd-body,body:not(.y-home) :is(.gm-reads,.a-rel) .yc-body{display:contents}
 body:not(.y-home) .g-more .gd-card .gd-img{grid-column:1;grid-row:1/span 2}
 body:not(.y-home) :is(.gm-reads,.a-rel) .yc-img{grid-column:1;grid-row:1}
 body:not(.y-home) .g-more .gd-card .gd-g{grid-column:2;grid-row:1;padding:14px 16px 0 14px}
 body:not(.y-home) .g-more .gd-card .gd-body b{grid-column:2;grid-row:2;margin:6px 0 0;padding:0 16px 0 14px}
 body:not(.y-home) .g-more .gd-card .gd-body small{grid-column:1/-1;grid-row:3;margin:12px 0 0;padding:0 18px}
 body:not(.y-home) .g-more .gd-card .gd-go{grid-column:1/-1;grid-row:4;margin:0;padding:12px 18px 0}
 body:not(.y-home) :is(.gm-reads,.a-rel) .yc-meta{grid-column:2;grid-row:1;align-self:center;margin:0;padding:10px 16px 10px 14px}
 body:not(.y-home) :is(.gm-reads,.a-rel) .y-card h3{grid-column:1/-1;grid-row:2;margin:14px 0 0;padding:0 18px}
 body:not(.y-home) :is(.gm-reads,.a-rel) .yc-ex{grid-column:1/-1;grid-row:3;margin:8px 0 0;padding:0 18px}
 body:not(.y-home) :is(.gm-reads,.a-rel) .yc-more{grid-column:1/-1;grid-row:4;margin:12px 18px 0}
}
/* small phones (under 375 px): the guides' tip plates give their text 16 px more (narrower padding and icon gap) */
@media (max-width:374.98px){body:not(.y-home) .gp{column-gap:12px;padding:20px 16px 22px 16px}}
/* 3j. wide screens (2200 px and up, see syh.css 3i: the content columns are zoomed by --zf there): the contents lists'
   vh limits inside the zoomed columns are divided by the zoom, so the sticky contents plate still fits under the
   header bar (heads, photo bands and the 404 photo are full-bleed, not zoomed, and keep their frames) */
@media (min-width:2200px){
 body:not(.y-home) .y-toc ol{max-height:calc(100vh / var(--zf) - var(--hdr) - 330px);max-height:calc(100svh / var(--zf) - var(--hdr) - 330px)}
 body:not(.y-home) .y-toc.solo ol{max-height:calc(100vh / var(--zf) - var(--hdr) - 210px);max-height:calc(100svh / var(--zf) - var(--hdr) - 210px)}
 body:not(.y-home) .side-stick>.y-toc.has-extra{max-height:calc(100vh / var(--zf) - var(--hdr) - 44px);max-height:calc(100svh / var(--zf) - var(--hdr) - 44px)}
}

/* ---------- fresh-eyes device check 4, 2026-10-16 (the last findings of the third look pass) ---------- */
/* 4a. 404: the steel band between the dark head and the closing band read as a leftover gap. The head now meets the
   closing band with a hard, straight join, and its chamfer (48 px; 32 px under 992 px) cuts into the closing photo,
   which runs up under the head by that much (its text keeps its place) */
body.y-404 .nf{z-index:1;padding-bottom:0;background:none}
body.y-404 .y-cta{margin-top:-48px;padding-top:184px}
@media (max-width:991.98px){body.y-404 .y-cta{margin-top:-32px;padding-top:168px}}
@media (max-width:767.98px){body.y-404 .y-cta{padding-top:128px}}
/* 4b. insights index: the topic tabs and the list sit closer to the "Latest article" plate (184 px of steel and white
   between them, 136 px on phones; now 112 px and 80 px), so they no longer look detached from it */
body:not(.y-home) .bl-head{padding-bottom:64px}
body:not(.y-home) .bl-list{padding-top:48px}
@media (max-width:767.98px){
 body:not(.y-home) .bl-head{padding-bottom:44px}
 body:not(.y-home) .bl-list{padding-top:36px}
}
/* 4c. "More insights" (articles) and "From insights" (guides) with the cards side by side (from 768 px): the topic has
   a line of its own and the date sits under it in every card, so the titles start level (the date wrapped beside a
   long topic in some cards and not in others, about 18 px apart at 992-1199 px) */
@media (min-width:768px){body:not(.y-home) :is(.gm-reads,.a-rel) .yc-meta .yc-cat{flex:0 0 100%}}
/* 4d. insights index, the topic tabs' fade at the right edge (phones to 1259 px): a white end-piece that stays at the
   strip's right edge draws it, instead of a mask. Resized from 375 to 320 px without a reload, the masked strip was
   not painted at all (blank until the page was loaded again); the end-piece looks the same and keeps the 72 px of
   room after the last topic */
@media (max-width:1259.98px){
 body:not(.y-home) .cat-tabs{padding-right:0;-webkit-mask-image:none;mask-image:none}
 body:not(.y-home) .cat-tabs::after{content:"";position:sticky;right:0;flex:0 0 72px;align-self:stretch;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 85%);pointer-events:none}
}