/* BLOG (2026-10-03): the blog's own rules, loaded after og-public.css by blog_post.html and blog_index.html only.
   Every device is the accepted case-study page's (og-cs-*: back link, eyebrow, the gradient stats row, the On this page
   rail, one close, the "more" grid). This file adds only what a long article needs: an H1 that wraps balanced (a
   piece's title has no measured break), the reading column's prose at the case-study beat's sizes, tables that scroll
   inside their own box, quotes, source marks, questions, sources, the byline and a text card. Values are the brand
   sheet's tokens; no new colour, radius or font. */

.og-b-head{max-width:820px}
.og-b-h1{white-space:normal;text-wrap:balance}
.og-b-dek{font:400 var(--b-sub)/1.5 var(--og-font);color:var(--og-ink);margin:16px 0 0;max-width:680px;text-wrap:pretty}
.og-b-by{display:flex;align-items:center;gap:12px;margin:20px 0 0;font:400 14px/1.45 var(--og-font);color:var(--og-mute)}
.og-b-by img{flex:0 0 auto;width:36px;height:36px;border-radius:50%;object-fit:cover}
.og-b-by a{color:var(--og-ink);text-decoration:none;font-weight:600}
.og-b-by a:hover{color:#0098fe}   /* no underline on hover anywhere (his 2026-09-24 ruling, test_b6) */

.og-b-hero{margin:32px 0 0}
.og-b-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--og-tile-r);border:1px solid var(--og-line);background:#fff}
.og-b-hero figcaption{margin-top:8px;font:400 12px/1.4 var(--og-font);color:var(--og-mute2)}

.og-b-stats .og-cs-stat span .og-b-src{font-size:.85em}

.og-b-body{margin-top:56px;min-width:0;max-width:680px}
.og-b-body>:first-child{margin-top:0}
.og-b-body h2{font:700 var(--b-h3)/var(--b-h3-lh) var(--og-font);letter-spacing:var(--b-h3-ls);color:var(--og-ink);margin:48px 0 0;text-wrap:balance;scroll-margin-top:96px}
.og-b-body h3{font:700 18px/1.35 var(--og-font);color:var(--og-ink);margin:28px 0 0;text-wrap:balance}
.og-b-body p,.og-b-body li{font:400 var(--b-prose)/1.65 var(--og-font);color:#474b4c;text-wrap:pretty}
.og-b-body p{margin:12px 0 0}
.og-b-body ul,.og-b-body ol{margin:12px 0 0;padding-left:22px}
.og-b-body li+li{margin-top:6px}
.og-b-body a{color:var(--og-ink);text-decoration:underline;text-underline-offset:2px}
.og-b-body strong{color:var(--og-ink);font-weight:600}
.og-b-body img{display:block;max-width:100%;height:auto;margin:24px 0 0;border-radius:var(--og-in-r);border:1px solid var(--og-line)}
.og-b-body blockquote{margin:20px 0 0;padding:18px 20px;background:var(--og-tile);border:1px solid var(--og-line);border-radius:var(--og-in-r)}
.og-b-body blockquote p{margin:0;color:var(--og-ink)}
.og-b-body blockquote p+p{margin-top:8px}

.og-b-src{font-size:.68em;line-height:0;margin-left:1px;vertical-align:super}
.og-b-src a{padding:0 1px;font-weight:600;color:#0098fe;text-decoration:none}
.og-b-src a:hover{color:var(--og-ink)}

.og-b-table{max-width:100%;overflow-x:auto;margin:20px 0 0;border:1px solid var(--og-line);border-radius:var(--og-in-r);-webkit-overflow-scrolling:touch}
.og-b-table table{width:100%;border-collapse:collapse;font:400 15px/1.4 var(--og-font)}
.og-b-table th{padding:14px 16px;background:var(--og-tile);text-align:left;white-space:nowrap;font:600 var(--b-label)/1 var(--og-font);letter-spacing:var(--b-label-ls);text-transform:uppercase;color:var(--og-mute2)}
.og-b-table td{padding:11px 16px;border-top:1px solid var(--og-line);color:#474b4c;white-space:nowrap}
.og-b-table td:first-child{font-weight:600;color:var(--og-ink)}

.og-b-faq,.og-b-sources{margin-top:48px}
.og-b-faq h2,.og-b-sources h2{margin:0 0 12px}
.og-b-q{border-top:1px solid var(--og-line)}
.og-b-q:last-of-type{border-bottom:1px solid var(--og-line)}
.og-b-q summary{position:relative;padding:16px 36px 16px 0;list-style:none;cursor:pointer;font:600 var(--b-prose)/1.4 var(--og-font);color:var(--og-ink)}
.og-b-q summary::-webkit-details-marker{display:none}
.og-b-q summary:after{content:"+";position:absolute;right:6px;top:13px;font:400 24px/1 var(--og-font);color:var(--og-mute);transition:transform 160ms var(--og-ease)}
.og-b-q[open] summary:after{transform:rotate(45deg)}
.og-b-q p{margin:0 0 16px}
.og-b-sources ol{margin:0;padding-left:20px}
.og-b-sources li{margin:6px 0 0;font:400 14px/1.5 var(--og-font);color:var(--og-mute)}
.og-b-sources a{color:var(--og-mute)}
.og-b-sources li:target{color:var(--og-ink)}
.og-b-body>.og-note{margin-top:32px}

.og-b-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:22px 22px 20px;background:var(--og-tile);border:1px solid var(--og-line);border-radius:var(--og-tile-r);color:inherit;text-decoration:none;transition:border-color 160ms ease}
.og-b-card .og-eyebrow{margin:0}
.og-b-card b{font:700 18px/1.3 var(--og-font);color:var(--og-ink);text-wrap:balance}
.og-b-card span{font:400 14px/1.5 var(--og-font);color:var(--og-mute);text-wrap:pretty}
@media(hover:hover){.og-b-card:hover{border-color:#0098fe}}

@media(max-width:991px){
 .og-b-body{margin-top:32px;max-width:none}
 .og-b-stats{margin-top:24px}}
@media(max-width:640px){
 .og-b-hero{margin-top:24px}
 .og-b-hero img{border-radius:var(--og-in-r)}
 .og-b-body h2{margin-top:40px}
 .og-b-table td,.og-b-table th{padding-left:12px;padding-right:12px}}

/* ==== BLOG HOME (BLOGHOME1003, 2026-10-03) ====
   The front page of /blog: Dmitry's picks from real renders (look B "Front page", the Questions top, the phone in the
   channel style). Spec: "[C] Blog redesign (2026-10-03)/[C] SPEC - Blog home, Front page with Questions". Every value
   is a brand sheet token (og-brand.css :root): no new colour, font or radius.

   HIS LAWS, AND HOW THIS SHEET KEEPS THEM AT EVERY WIDTH (not only at the two widths he was shown):
   - card copy law: a card is one line of title and exactly two full lines of text. The copy is written into ONE
     measured column (353px, the card at 1140 and up) and the type is sized in container units, so the same words break
     in the same place on every screen (brand_sheet.py FIT_BAND; the fitted parts carry data-fit).
   - headline law: a header is one line from 768, at most two declared lines on a phone, and shrinks before it wraps
     (.og-hlaw with its measured --hl-k).
   - a row's two lines never clip: below the width they were written for, they shrink with the row.
   Four regimes: 1140 and up (the approved desktop, exact tokens); 992 to 1139 (the same, fitted down); 768 to 991 (one
   726px column: two cards across at the measured width); under 768 (the approved phone).

   Text rules are scoped to .og-bl-txt or use the child combinator: a bare element rule inside a part that also holds a
   picture or a play disc un-centred every play triangle once (obs #1846). */

.og-bl{position:relative;isolation:isolate}
.og-bl a{text-decoration:none;color:inherit}
.og-bl-sec{margin-top:var(--b-section);padding-top:var(--b-section);scroll-margin-top:max(0px,calc(var(--og-bar-h,60px) + 16px - var(--b-section)))}   /* the sheet's rhythm: the air that closes one block, then the section's own */
.og-bl-more{display:flex;justify-content:center;margin-top:32px}
.og-bl-more[hidden],.og-bl-quiet[hidden]{display:none}
html:not(.og-bl-js) .og-bl-bar,html:not(.og-bl-js) .og-bl-more{display:none}   /* the chips, the search and Load more belong to the script: without it every story is listed and no dead control is shown */
.og-bl-quiet{margin:20px 0 0;text-align:center;font:400 var(--b-small)/var(--b-small-lh) var(--b-font);color:var(--b-mute)}

/* the 36px chip: the site's quiet control (never a primary: cta_gate counts 44 and up) */
.og-bl-chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--b-chip-h);padding:0 16px;border:1px solid var(--b-line);border-radius:var(--b-pill);background:#fff;font:600 var(--b-chip-fs)/1 var(--b-font);white-space:nowrap;cursor:pointer}
.og-bl .og-bl-chip{color:var(--b-ink)}
.og-bl-chip>i{font-style:normal;line-height:1}
.og-bl-chip>svg{flex:0 0 12px;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.og-bl .og-bl-chip.is-on{background:var(--b-ink);border-color:var(--b-ink);color:#fff}
@media(hover:hover){.og-bl-chip:not(.is-on):hover{background:var(--b-tile)}}
.og-bl-chips{display:flex;gap:8px}      /* one row: the search gives way first */

/* the top: the wash, the title, four questions */
.og-bl-top{text-align:center}
.og-bl-top:before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:100vw;height:600px;transform:translateX(-50%);background:linear-gradient(180deg,var(--b-wash) 0,#fff 100%)}
.og-bl-top .og-sub{margin-left:auto;margin-right:auto}
@media(min-width:560px){.og-bl .og-h1 .og-brs{display:none}}   /* the title's one line is 509px at the phone size: from 560 it is one line, as the headline law asks of a wide box */
.og-bl-qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:var(--b-gap);text-align:left}
.og-bl-qlist{display:none}

/* a row: a tile, a bold line, one grey line, a round disc (the questions, and the phone's stream). The row is the
   container its two lines are fitted to: --bt and --bg are the widest a bold and a grey line may be at their own size
   (the rendered test measures every line against them), and below the width that holds them the lines shrink. */
.og-bl-vrow{--bt:227;--bg:208;display:grid;grid-template-columns:52px minmax(0,1fr) 36px;gap:14px;align-items:center;min-width:0;container-type:inline-size}
.og-bl-vrow[hidden],.og-bl-card[hidden],.og-bl-feat[hidden]{display:none}
.og-bl-vrow.is-card{--bt:310;--bg:345;padding:14px 16px;border:1px solid var(--b-line);border-radius:var(--b-card-r);background:#fff}
.og-bl-vrow>i{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--b-line);border-radius:var(--b-inner-r);background:var(--b-tile);font-style:normal;font-size:26px;line-height:1}
.og-bl-vrow>.og-bl-txt{min-width:0}
.og-bl-vrow>.og-bl-txt>b{display:block;font:700 var(--b-title)/var(--b-title-lh) var(--b-font);font-size:min(var(--b-title),calc((100cqw - 116px) * 18 / var(--bt)));letter-spacing:var(--b-title-ls);color:var(--b-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.og-bl-vrow>.og-bl-txt>span{display:block;margin-top:3px;font:400 var(--b-small)/1.4 var(--b-font);font-size:min(var(--b-small),calc((100cqw - 116px) * 14 / var(--bg)));color:var(--b-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.og-bl-vrow>u{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--b-line);border-radius:50%;background:#fff;text-decoration:none}
.og-bl-vrow>u>svg{width:14px;height:14px;fill:var(--b-blue);margin-left:2px}
.og-bl-vrow>u.is-go>svg{fill:none;stroke:var(--b-blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-left:0}

/* the bar: the topic chips, and the search at the row's end (the site's pill field with the Help center's glyph:
   the same values as .og-help-search, written here so the blog does not load the Help sheet for five rules) */
.og-bl-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:56px}
.og-bl-search{flex:0 1 320px;margin:0;max-width:320px;min-width:0}
.og-bl-search>.og-field{margin:0;height:44px;min-height:0;padding:0 20px 0 18px;gap:10px;border:1px solid var(--b-line);border-radius:var(--b-pill)}   /* og-public.css carries a second, older .og-field (54px, 10px corners): every box value is set here */
.og-bl-search>.og-field>svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:var(--b-mute);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.og-bl-search>.og-field>input{padding:0 12px 0 0;font-size:16px}

/* a card: cover, label, ONE line of title, TWO lines of text, who and when. The copy is written for a 353.33px card
   (three across in the 1100px page); title and text are sized in the card's own units, so a narrower card keeps the
   same line breaks (18 / 353.33 = 5.0943, 15 / 353.33 = 4.2453). */
.og-bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px;margin-top:40px}
.og-bl-list{display:none}
.og-bl-js:not(.og-bl-ready) .og-bl-grid>:nth-child(n+7),.og-bl-js:not(.og-bl-ready) .og-bl-list>:nth-child(n+7){display:none}
.og-bl-card{display:flex;flex-direction:column;min-width:0;container-type:inline-size}
.og-bl-txt{min-width:0}
.og-bl-kick{display:flex;align-items:center;gap:6px;margin:14px 0 0;font:600 var(--b-label)/1 var(--b-font);letter-spacing:var(--b-label-ls);text-transform:uppercase;color:var(--b-blue);white-space:nowrap}
.og-bl-kick>i{font-style:normal;font-size:var(--b-micro);letter-spacing:0;line-height:1}
.og-bl-t{margin:9px 0 0;font:700 var(--b-title)/var(--b-title-lh) var(--b-font);letter-spacing:var(--b-title-ls);color:var(--b-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.og-bl-d{margin:6px 0 0;font:400 var(--b-card)/var(--b-card-lh) var(--b-font);color:var(--b-mute)}
.og-bl-card .og-bl-t{font-size:min(var(--b-title),5.0943cqw)}
.og-bl-card .og-bl-d{font-size:min(var(--b-card),4.2453cqw)}
.og-bl-meta{display:flex;align-items:center;gap:8px;margin:12px 0 0;font:400 var(--b-micro)/1 var(--b-font);color:var(--b-mute2);white-space:nowrap}
.og-bl-meta>img{flex:0 0 22px;width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--b-tile)}
.og-bl-meta>b{font-weight:600;color:var(--b-ink)}
.og-bl-meta>span:before{content:"\00b7";margin-right:8px}

/* the lead: one story, cover left and words right. Its words are written for a 463px column (the 1100px page) and
   sized in that column's units (28 / 463.16 = 6.0454, 16 / 463.16 = 3.4545). */
.og-bl-feat{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:44px;align-items:center;margin-top:var(--b-gap)}
.og-bl-feat>.og-bl-txt{container-type:inline-size}
.og-bl-big .og-bl-kick{margin-top:0}
.og-bl-big .og-bl-t{margin-top:10px;font:700 var(--b-h3)/var(--b-h3-lh) var(--b-font);font-size:min(var(--b-h3),6.0454cqw);letter-spacing:var(--b-h3-ls)}
.og-bl-big .og-bl-d{font:400 var(--b-body)/var(--b-body-lh) var(--b-font);font-size:min(var(--b-body),3.4545cqw)}

/* covers: a photograph, a video poster with the case-study play disc, or the topic's object on the wash */
.og-bl-cover{position:relative;display:block;aspect-ratio:1178/720;border:1px solid var(--b-line);border-radius:var(--b-card-r);overflow:hidden;background:var(--b-tile)}
.og-bl-cover>img{display:block;width:100%;height:100%;object-fit:cover}
.og-bl-cover>img.is-object{position:absolute;left:50%;top:50%;width:30%;height:auto;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 10px 16px rgba(1,30,60,.14))}
.og-bl-cover:has(>img.is-object){background:var(--b-wash)}
.og-bl-cover .og-cs-play{width:15%}
.og-bl-tag{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:26px;background:#fff;color:var(--b-ink);font:600 var(--b-label)/1 var(--b-font)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .og-bl-cover>img:not(.is-object){transition:transform .5s var(--b-ease)}
 a:hover>.og-bl-cover>img:not(.is-object){transform:scale(1.03)}}

/* the free guide: one wash band, the email field and one button, three of its own pages. The form is the error kit's
   (og-errors.css): its one red line opens under the field. */
.og-bl-guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:52px;align-items:center;padding:44px 48px;border-radius:var(--b-card-r);background:var(--b-wash)}
.og-bl-guide-t{--gh:.0725;min-width:0;container-type:inline-size}   /* 28 / 386: the title's one line, in its column's units */
.og-bl-guide-t>.og-eyebrow{margin-bottom:12px}
.og-bl-guide-h{margin:0;font:700 var(--b-h3)/var(--b-h3-lh) var(--b-font);font-size:min(var(--b-h3),calc(100cqw * var(--gh)));letter-spacing:var(--b-h3-ls);color:var(--b-ink);white-space:nowrap}
.og-bl-guide-p{margin:10px 0 0;font:400 var(--b-body)/var(--b-body-lh) var(--b-font);font-size:min(var(--b-body),5.5172cqw)}   /* 16 / 290: its longer line */
.og-bl-guide-p>span{display:block}
.og-bl-form{margin-top:22px}
.og-bl-pair{display:flex;gap:10px}
.og-bl-pair>.og-field{flex:1 1 auto;min-width:0;margin:0;height:var(--b-btn-h);min-height:0;padding:0 20px;border:1px solid var(--b-line);border-radius:var(--b-pill);background:#fff}
.og-bl-pair>.og-btn{flex:0 0 auto}
/* a saved address: the browser lays its own pale blue box on the input, a square inside the round field (his screenshot,
   2026-10-03). An inset shadow in the field's ground is the one thing that covers that box; two rules, because one
   selector list with a name an engine does not know drops the whole rule. */
.og-bl-pair>.og-field>input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #fff inset;box-shadow:0 0 0 100px #fff inset;-webkit-text-fill-color:var(--og-ink)}
.og-bl-pair>.og-field>input:autofill{box-shadow:0 0 0 100px #fff inset;-webkit-text-fill-color:var(--og-ink)}
/* SENTLOOK1004 (2026-10-04), his pick C: "make an animation so it's more beautiful when the email was sent. At the
   moment there is just a AI slope text under there." The form becomes its own receipt: the button's gradient takes
   the row, leaves a white pill with the brand's hairline, a ring and a tick drawn the way the error kit draws its
   ring, the address, and a way back; the guide's pages answer. ONE class starts it (is-sent, on the form and on the
   band). The rules below are the END state; each animation only says where its element comes FROM, so a plain form
   post (is-still) and a visitor who asks for less motion get the same receipt with nothing moving. Nothing changes
   height: the helper takes the note's place, on a phone it takes the button's row and the link takes the note's. */
.og-bl-pair{position:relative}
.og-bl-sent{position:absolute;left:0;top:0;width:100%;height:var(--b-btn-h);border-radius:var(--b-pill);visibility:hidden;text-align:left;outline:0}
.og-bl-sent-in{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 18px 0 13px;border:1.5px solid transparent;border-radius:inherit;background:linear-gradient(#fff,#fff) padding-box,var(--b-grad) border-box}
.og-bl-sent-g{position:absolute;inset:0;border-radius:inherit;background:var(--b-grad) right center/100% 100% no-repeat;opacity:0;pointer-events:none}
.og-bl-sent-l{position:absolute;top:0;right:0;bottom:0;width:var(--bw,100%);display:flex;align-items:center;justify-content:center;font:700 var(--b-btn-fs)/1 var(--og-font);letter-spacing:.02em;text-transform:uppercase;color:#fff;opacity:0}
.og-bl-sent-i{flex:0 0 26px;width:26px;height:26px;fill:none;stroke:url(#og-bl-sg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.og-bl-sent-i .r{stroke-dasharray:63;transform:rotate(-90deg);transform-origin:12px 12px}
.og-bl-sent-i .t{stroke-dasharray:14;stroke-width:2.3}
.og-bl-sent-w{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 16px/1.3 var(--b-font);color:var(--b-ink)}
.og-bl-sent-w>b{font-weight:600}
.og-bl-again{margin:0;padding:0;border:0;background:none;font:500 var(--b-micro)/var(--b-micro-lh) var(--b-font);color:var(--b-link);cursor:pointer}
.og-bl-sent .og-bl-again{flex:0 0 auto}
.og-bl-help,.og-bl-help2,.og-bl-again-p{display:none;margin:12px 0 0;font:400 var(--b-micro)/var(--b-micro-lh) var(--b-font);color:var(--b-mute)}
html:not(.og-bl-js) .og-bl-again{display:none}      /* without script the way back is the page's own form, a reload away */
@media(hover:hover) and (pointer:fine){.og-bl-again:hover{color:var(--b-blue)}}
.og-bl-form.is-sent .og-bl-sent{visibility:visible}
.og-bl-form.is-sent .og-bl-pair>.og-field,.og-bl-form.is-sent .og-bl-pair>.og-btn{visibility:hidden}
.og-bl-form.is-sent+.og-bl-guide-n{display:none}
.og-bl-form.is-sent~.og-bl-help{display:block}
@keyframes og-sl-in{from{opacity:0;transform:translateY(6px)}}
@keyframes og-sl-on{from{opacity:0}}
@keyframes og-sl-off{from{opacity:1}to{opacity:0}}
@keyframes og-sl-keep{from,to{visibility:visible}}
@keyframes og-sl-draw-r{from{stroke-dashoffset:63}}
@keyframes og-sl-draw-t{from{stroke-dashoffset:14}}
@keyframes og-sl-wipe{from{clip-path:inset(0 0 0 var(--bx,60%) round 999px);background-size:var(--bw,40%) 100%;opacity:1}to{clip-path:inset(0 0 0 0 round 999px);background-size:100% 100%;opacity:1}}
@keyframes og-sl-ride{from{transform:translateY(calc(var(--b-btn-h) + 10px));opacity:1}to{transform:none;opacity:1}}
@keyframes og-sl-lift{45%{transform:translateY(-12px) rotate(var(--tilt,0deg))}}
@keyframes og-sl-pop{from{opacity:0;transform:scale(.8)}}
.og-bl-form.is-sent:not(.is-still) .og-bl-sent-g{animation:og-sl-wipe 420ms cubic-bezier(.77,0,.175,1) both,og-sl-off 300ms ease 440ms both}
.og-bl-form.is-sent:not(.is-still) .og-bl-sent-l{animation:og-sl-off 140ms ease 20ms backwards}
.og-bl-form.is-sent:not(.is-still) .og-bl-pair>.og-field,.og-bl-form.is-sent:not(.is-still) .og-bl-pair>.og-btn{animation:og-sl-keep 420ms linear}
.og-bl-form.is-sent:not(.is-still) .og-bl-sent-in{animation:og-sl-on 1ms linear 420ms backwards}
.og-bl-form.is-sent:not(.is-still) .og-bl-sent-i .r{animation:og-sl-draw-r 420ms var(--ok-ease) 520ms backwards}
.og-bl-form.is-sent:not(.is-still) .og-bl-sent-i .t{animation:og-sl-draw-t 200ms var(--ok-ease) 800ms backwards}
.og-bl-form.is-sent:not(.is-still) .og-bl-sent-w{animation:og-sl-in 260ms var(--ok-ease) 560ms backwards}
.og-bl-form.is-sent:not(.is-still) .og-bl-sent .og-bl-again{animation:og-sl-on 240ms ease 700ms backwards}
.og-bl-form.is-sent:not(.is-still)~.og-bl-help{animation:og-sl-in 280ms var(--ok-ease) 640ms backwards}
.og-bl-guide-n{margin:12px 0 0;font:400 var(--b-micro)/var(--b-micro-lh) var(--b-font);color:var(--b-mute)}
.og-bl-guide-n.is-ok{font-weight:600;color:var(--b-ink)}
.og-bl-guide-n.is-bad{color:var(--ok-red)}
.og-bl-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.og-bl-pages>img{display:block;width:100%;height:auto;aspect-ratio:405/720;border:1px solid var(--b-line);border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(1,30,60,.10)}
.og-bl-pages>img{grid-row:1}                        /* each page keeps its column by name, so the badge may sit over one */
.og-bl-pages>img:nth-child(1){grid-column:1}.og-bl-pages>img:nth-child(2){grid-column:2}.og-bl-pages>img:nth-child(3){grid-column:3}
.og-bl-badge{grid-row:1;grid-column:2;justify-self:end;align-self:start;z-index:1;display:grid;place-items:center;width:34px;height:34px;margin:-12px -12px 0 0;border-radius:50%;background:var(--b-grad);box-shadow:0 6px 16px rgba(0,120,220,.28);opacity:0;pointer-events:none}
.og-bl-badge>svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.og-bl-badge path{stroke-dasharray:14}
.og-bl-guide.is-sent .og-bl-badge{opacity:1}
.og-bl-guide.is-sent:not(.is-still) .og-bl-pages>img{animation:og-sl-lift 640ms cubic-bezier(.77,0,.175,1)}
.og-bl-guide.is-sent:not(.is-still) .og-bl-pages>img:nth-child(1){--tilt:-1.4deg;animation-delay:260ms}
.og-bl-guide.is-sent:not(.is-still) .og-bl-pages>img:nth-child(2){--tilt:.6deg;animation-delay:330ms}
.og-bl-guide.is-sent:not(.is-still) .og-bl-pages>img:nth-child(3){--tilt:1.4deg;animation-delay:400ms}
.og-bl-guide.is-sent:not(.is-still) .og-bl-badge{animation:og-sl-pop 300ms var(--ok-ease) 760ms backwards}
.og-bl-guide.is-sent:not(.is-still) .og-bl-badge path{animation:og-sl-draw-t 220ms var(--ok-ease) 900ms backwards}
@media(prefers-reduced-motion:reduce){
 .og-bl-form.is-sent .og-bl-sent,.og-bl-form.is-sent .og-bl-sent *,.og-bl-form.is-sent .og-bl-pair>*,.og-bl-form.is-sent~.og-bl-help,.og-bl-form.is-sent~.og-bl-again-p,.og-bl-form.is-sent .og-bl-help2,.og-bl-guide.is-sent .og-bl-pages>*,.og-bl-guide.is-sent .og-bl-badge path{animation:none!important}
 .og-bl-form.is-sent:not(.is-still) .og-bl-sent-in{animation:og-sl-on 200ms ease!important}
}

/* 992 to 1139: the desktop, a little narrower. The cards and the lead fit themselves (container units above); the
   band gives its words the room the three pages do not need. */
@media(min-width:992px) and (max-width:1139px){
 .og-bl-guide{gap:32px;padding:40px 32px}}

/* 768 to 991: one 726px column, so two cards sit side by side at the width their copy was written for. The questions
   stack, the lead is a card laid on its side (its short words, the card's sizes), the band stacks like the phone's. */
@media(min-width:768px) and (max-width:991px){
 .og-bl>*{max-width:726px;margin-left:auto;margin-right:auto}
 .og-bl h1.og-hlaw.og-hlaw{font-size:min(var(--b-h1),calc(min(100vw - 40px,726px) * var(--hl-kd,1)))}   /* the title's one line fits the column, not the screen */
 .og-bl-qs{grid-template-columns:minmax(0,1fr)}
 .og-bl-bar{flex-wrap:wrap}
 .og-bl-search{flex:1 1 100%;max-width:none}      /* its own row: beside the chips its hint was cut ("Search guides and v") */
 .og-bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .og-bl-feat{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .og-bl-feat .og-l{display:none}
 .og-bl-feat .og-s{display:inline}
 .og-bl-big .og-bl-t{font:700 var(--b-title)/var(--b-title-lh) var(--b-font);font-size:min(var(--b-title),5.0943cqw);letter-spacing:var(--b-h3-ls)}   /* a block title at the card's size: the sheet's block-title tracking stays */
 .og-bl-big .og-bl-d{font:400 var(--b-card)/var(--b-card-lh) var(--b-font);font-size:min(var(--b-card),4.2453cqw)}
 .og-bl-guide{grid-template-columns:minmax(0,1fr);gap:28px;padding:40px 32px;text-align:center}
 .og-bl-pages{order:-1;grid-template-columns:repeat(3,minmax(0,150px));justify-content:center}
 .og-bl-form{max-width:460px;margin-left:auto;margin-right:auto}
 .og-bl-field>.ok-msg p{justify-content:center}
}

/* under 768: the phone. The questions and the stream are rows; the lead is one large card whose words are written for
   a 350px column (the 390px phone) and sized in its units below that (22 / 350 = 6.2857, 16 / 350 = 4.5714). */
@media(max-width:767px){
 .og-bl-more{margin-top:24px}
 .og-bl-quiet{margin-top:16px}
 .og-bl-top:before{height:480px}
 .og-bl-qs{display:none}
 .og-bl-qlist{display:block;margin-top:22px;text-align:left}
 .og-bl-qlist>.og-bl-vrow{padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--b-line)}
 .og-bl-qlist>.og-bl-vrow:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
 .og-bl-bar{flex-direction:column;align-items:stretch;gap:12px;margin-top:36px}
 .og-bl-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .og-bl-search{flex:0 0 auto;max-width:none}
 .og-bl-feat{grid-template-columns:minmax(0,1fr);gap:0;margin-top:20px}
 .og-bl-feat>.og-bl-txt{max-width:350px}
 .og-bl-big .og-bl-kick{margin-top:16px}
 .og-bl-big .og-bl-t{font-size:min(var(--b-h3),6.2857cqw)}
 .og-bl-big .og-bl-d{font-size:min(var(--b-body),4.5714cqw)}
 .og-bl-grid{display:none}
 .og-bl-list{display:block;margin-top:10px}       /* 10 + the row's own 14 = 24 above the first VISIBLE row, whichever it is */
 .og-bl-list>.og-bl-vrow{padding:14px 0;border-bottom:1px solid var(--b-line)}
 .og-bl-list>.og-bl-vrow:last-child,.og-bl-list>.og-bl-vrow.is-last{border-bottom:0;padding-bottom:0}
 .og-bl-guide{grid-template-columns:minmax(0,1fr);gap:22px;padding:24px 20px;text-align:center}
 .og-bl-guide-t{--gh:.083}      /* 22 / 265: the phone title's one line */
 .og-bl-pages{order:-1;grid-template-columns:minmax(0,190px);justify-content:center}
 .og-bl-pages>img:nth-child(n+2){display:none}
 .og-bl-guide-t>.og-eyebrow{margin-bottom:10px}
 .og-bl-form{margin-top:18px}
 .og-bl-pair{flex-direction:column}
 .og-bl-pair>.og-field{flex:0 0 var(--b-btn-h)}
 .og-bl-pair>.og-btn{width:100%}
 .og-bl-sent-in{padding:0 16px 0 13px}
 .og-bl-sent-l{width:100%}
 .og-bl-sent .og-bl-again{display:none}
 .og-bl-help2{position:absolute;left:0;right:0;top:calc(var(--b-btn-h) + 10px);height:var(--b-btn-h);margin:0;align-content:center;justify-items:center}
 .og-bl-help2>span{display:block}
 .og-bl-help2 b{font-weight:600;color:var(--b-ink)}
 .og-bl-form.is-sent:not(.is-still) .og-bl-sent-w>b{display:none}      /* a phone's pill is the address alone, at a size one can read; */
 .og-bl-form.is-still .og-bl-help2 b{display:none}                     /* the word Sent stands in the line under it, once */
 .og-bl-form.is-sent .og-bl-help2{display:grid}
 .og-bl-form.is-sent~.og-bl-help{display:none}
 .og-bl-form.is-sent~.og-bl-again-p{display:block}
 .og-bl-pages>.og-bl-badge{grid-column:1}
 .og-bl-form.is-sent:not(.is-still) .og-bl-sent-g{animation:og-sl-ride 420ms cubic-bezier(.77,0,.175,1) both,og-sl-off 300ms ease 440ms both}
 .og-bl-form.is-sent:not(.is-still) .og-bl-pair>.og-btn{animation:none}
 .og-bl-form.is-sent:not(.is-still) .og-bl-help2{animation:og-sl-in 280ms var(--ok-ease) 600ms backwards}
 .og-bl-form.is-sent:not(.is-still)~.og-bl-again-p{animation:og-sl-on 240ms ease 720ms backwards}
 .og-bl-field>.ok-msg p{justify-content:center}
}
/* ==== end of BLOG HOME (BLOGHOME1003) ==== */

/* TAGCOPY1005 (2026-10-05): a reader copies hashtags in one tap. Dmitry on the live guides: "Give an option to people
   actually copy the hashtags ... you have not given an option to fast, copy paste them." A row of a hashtag table is
   a pick; the picked set (5 at most, Instagram's cap, the guide's own sourced figure) is copied on every tap and
   shown in one bar. "Copy all" in a table's head takes that whole table. No script: the tables read as before.
   Three things differ from the approved prototype and nothing else: the bar sits above the cookie question (--og-consent-h,
   set by og-track.js while that question is open), the room under the page is on the root element so it adds to the
   cookie question's own, and the hover tint is for a mouse only. Script: static/js/og-blog-tags.js. */
.og-b-table tr.og-b-pick{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.og-b-table tr.og-b-pick td{transition:background-color 180ms var(--og-ease,ease)}
@media (hover:hover){.og-b-table tr.og-b-pick:hover td{background:#f7fafc}}
.og-b-table tr.og-b-pick.is-in td{background:#eef7ff}
.og-b-tag{display:inline-flex;align-items:center;gap:10px;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.og-b-tag::before{content:"";flex:0 0 20px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:1.5px solid #c3ccd2;background:#fff center/10px 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v8M1 5h8' stroke='%2398a4ab' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");transition:background-color 180ms var(--og-ease,ease),border-color 180ms var(--og-ease,ease)}
.og-b-pick.is-in .og-b-tag::before{border-color:#0098fe;background-color:#0098fe;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 5.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.og-b-tag:focus-visible,.og-b-all:focus-visible,.og-b-set button:focus-visible{outline:2px solid #0098fe;outline-offset:3px;border-radius:8px}
.og-b-table.is-full tr.og-b-pick:not(.is-in) .og-b-tag::before{opacity:.35}
.og-b-table th.og-b-allcell{text-align:right}
.og-b-table th.og-b-allcell>span{float:left}
.og-b-all{margin:-8px 0;padding:8px 0 8px 12px;border:0;background:none;font:600 13px/1 var(--og-font);letter-spacing:0;text-transform:none;color:#0098fe;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.og-b-all:hover{color:var(--og-ink)}
.og-b-all.is-done{color:var(--og-ink)}
.og-b-set{position:fixed;left:50%;bottom:calc(16px + var(--og-consent-h,0px) + env(safe-area-inset-bottom,0px));z-index:40;box-sizing:border-box;width:min(700px,calc(100vw - 24px));display:flex;align-items:center;gap:10px 14px;padding:10px 10px 10px 16px;background:#fff;border:1px solid var(--og-line);border-radius:22px;box-shadow:0 12px 34px rgba(1,1,1,.14);opacity:0;visibility:hidden;transform:translate(-50%,14px);transition:opacity 280ms cubic-bezier(.25,.8,.25,1),transform 280ms cubic-bezier(.25,.8,.25,1),visibility 0s linear 280ms}
.og-b-set.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.og-b-set-tags{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0;margin:0;padding:0;list-style:none}
.og-b-set-tags button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 12px;border:0;border-radius:999px;background:#eef7ff;font:600 13px/1 var(--og-font);color:var(--og-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.og-b-set-tags button::after{content:"";width:8px;height:8px;background:center/8px 8px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1l6 6M7 1L1 7' stroke='%2366717b' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.og-b-set-side{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.og-b-set-n{font:600 13px/1 var(--og-font);color:var(--og-mute2,#66717b);white-space:nowrap;font-variant-numeric:tabular-nums}
.og-b-set-n.is-bump{color:var(--og-ink)}
.og-b-set-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:112px;height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--og-grad);font:700 13px/1 var(--og-font);letter-spacing:.02em;text-transform:uppercase;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.og-b-set-go.is-done::before{content:"";width:12px;height:12px;background:center/12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 5.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.og-b-set-x{padding:8px 0;border:0;background:none;font:400 13px/1 var(--og-font);color:var(--og-mute2,#66717b);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.og-b-set-x:hover{color:var(--og-ink)}
.og-b-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.og-b-has-set{padding-bottom:var(--og-b-pad,0px)}
@media (max-width:767px){
 .og-b-table tr.og-b-pick td{padding-top:12px;padding-bottom:12px}
 /* the mark may not make a table wider than it was: it takes its 26px back from the gaps and the tag's size */
 .og-b-table.has-all td,.og-b-table.has-all th{padding-left:8px;padding-right:8px}
 .og-b-table.has-all td:first-child,.og-b-table.has-all th:first-child{padding-left:12px}
 .og-b-table.has-all td:last-child,.og-b-table.has-all th:last-child{padding-right:12px}
 .og-b-table.has-all td:first-child{font-size:14px}
 .og-b-tag{gap:8px}
 .og-b-tag::before{flex-basis:18px;width:18px;height:18px}
 /* TAGCOPY1005b (BLOGPOST1005, 2026-10-05): the foot row keeps its hairline on the table's own box (it was the full-width button's top border) */
 .og-b-table.has-all{position:relative;padding-bottom:56px;background:linear-gradient(var(--og-line),var(--og-line)) 0 calc(100% - 55px)/100% 1px no-repeat}
 .og-b-table th.og-b-allcell{text-align:left}
 .og-b-table th.og-b-allcell>span{float:none}
 /* TAGCOPY1005b: "Copy all N" on a phone is the sheet's 36px chip, centred in its 56px row (it was a 56px square row of
    13px words: brand_gate R8, one button family, counted two findings a table). The whole row still answers a finger:
    the chip's own slab is the row's 56px. */
 .og-b-all{position:absolute;left:50%;right:auto;bottom:10px;transform:translateX(-50%);height:36px;margin:0;padding:0 14px;border:1px solid var(--og-line);border-radius:999px;background:#fff;font:600 14px/1 var(--og-font);color:var(--og-ink);white-space:nowrap;text-align:center}
 .og-b-all::after{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px}
 .og-b-all:focus-visible{border-radius:999px}
 .og-b-set{flex-wrap:wrap;padding:12px;border-radius:20px;bottom:calc(12px + var(--og-consent-h,0px) + env(safe-area-inset-bottom,0px))}
 .og-b-set-tags{flex:1 1 100%}
 .og-b-set-side{flex:1 1 100%;justify-content:space-between}
 .og-b-set-go{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){.og-b-set,.og-b-table tr.og-b-pick td,.og-b-tag::before{transition:none}}