/* og-help.css: the Help center (/help), the public library of every answer, in the landing's polished system A "Paper".
   Built 2026-09-12 from the sheet's own devices and nothing new: the section header anatomy (og-public.css), the 52px
   pill field (the contact page), the 36px chip row (the case-studies filter), the F1 question tile with the board's F2
   toggle on phones (tools/skeleton/polish/faq_toggle.py, Dmitry 2026-09-08: toggles on phones only), the manager card
   (the /how-it-works/ hero, values read off the served page), and the landing's "Still have a question? Book a call"
   chip state (faq_more.py). Every value cites the sheet's tokens; nothing here is sampled off a screenshot.
   Loaded after og-public.css on /help only. Never on a signed-in page. */

/* ---- hero: the case-studies head, centred, the search pill under the one line ---- */
.og-help-hero{position:relative}
.og-help-hero .og-sub{text-wrap:balance}
.og-help-search{position:relative;margin:28px auto 0;max-width:640px}
.og-help-search .og-field{padding-left:18px;gap:10px}
.og-help-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-help-search .og-field input{font-size:16px}
.og-help-search .og-field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.og-help-clear{display:none;flex:0 0 auto;height:32px;padding:0 12px;margin-right:-8px;border:0;border-radius:999px;background:var(--b-tile);color:var(--b-ink);font:600 13px/1 var(--b-font);cursor:pointer}
.og-help-clear:hover{background:#e9eef3}
.og-help-search.has-q .og-help-clear{display:inline-flex;align-items:center}
.og-help-hint{margin:10px 0 0;font:400 var(--b-small)/var(--b-small-lh) var(--b-font);color:var(--b-mute);text-align:center}

.og-help-library .og-help-hero{text-align:center}
.og-help-library .og-help-hero .og-sub{margin-left:auto;margin-right:auto}

/* ---- category chips: the case-studies filter row, one category at a time on desktop ---- */
.og-help-chips{margin-top:28px}
.og-help-library .og-help-chips{margin-top:var(--b-gap)}
@media(max-width:767px){
 .og-help-chips.og-cs-filter{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:20px;padding:2px 20px 10px;margin-left:-20px;margin-right:-20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .og-help-chips.og-cs-filter::-webkit-scrollbar{display:none}
 .og-help-chips .og-cs-chip{flex:0 0 auto;scroll-snap-align:start;width:auto}
}

/* ---- the body: one section per category; JS shows one at a time, the no-script page shows them all ---- */
.og-help-body{margin-top:var(--b-gap)}
.og-help-sec+.og-help-sec{margin-top:40px}
.og-help-h2{margin:0;font:700 var(--b-h3)/var(--b-h3-lh) var(--og-font);letter-spacing:var(--b-h3-ls);color:var(--og-ink)}
.og-help-h2 small{display:block;margin-top:4px;font:400 var(--b-small)/var(--b-small-lh) var(--og-font);letter-spacing:0;color:var(--og-mute)}
.og-help-sec .og-faq-grid{margin-top:16px;align-items:start}   /* an open answer lengthens ITS tile only, never the closed one beside it (the landing's gate T10) */
/* every closed tile is ONE height on desktop (his "every element is balanced"): a one-line and a two-line question sit in the
   same 77px row, the question centred, so the rows stay level whether or not an answer is open somewhere else */
@media(min-width:768px){.og-help .og-faq-btn{min-height:77px}}
.og-help-js .og-help-sec[hidden]{display:none}
.og-help-js.og-help-one .og-help-sec .og-help-h2{display:none}   /* the chip names the set; the same words twice is noise */
.og-help-js.og-help-one .og-help-sec .og-faq-grid{margin-top:0}
.og-help-js.og-help-one .og-help-line{margin:0 0 16px}   /* round 4: the caption names who the set is for; the chip names the set */
.og-help-line{margin:0 0 4px;text-align:center;text-wrap:balance;font:400 var(--b-small)/var(--b-small-lh) var(--og-font);color:var(--og-mute)}
.og-help-line b{color:var(--og-ink);font-weight:600}
.og-help-line[hidden]{display:none}
.og-faq-t[hidden]{display:none}
.og-faq-t mark{background:var(--b-wash);color:inherit;border-radius:3px;padding:0 1px}

/* the question tile: the F1 tile, the F2 toggle on phones (faq_toggle.py, ported; the switch is the sheet's 768 regime line) */
.og-help .og-faq-t{padding:0}
.og-help .og-faq-t .og-faq-q{display:block;margin:0}
.og-faq-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:14px 18px;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;border-radius:16px}
.og-faq-btn:focus-visible{outline:2px solid #0098fe;outline-offset:-2px}
.og-faq-btn>span{flex:1 1 auto;min-width:0}
.og-faq-chev{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:#676767;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--b-ease),stroke 160ms var(--b-ease)}
.og-faq-open .og-faq-chev{transform:rotate(180deg)}
.og-faq-panel{overflow:hidden;padding:0 18px 16px}
.og-faq-panel[hidden]{display:none!important}
.og-faq-panel .og-faq-a{margin-top:0}
@media(prefers-reduced-motion:reduce){.og-faq-chev{transition:none}}
@media(max-width:767px){
 .og-faq-btn{padding:13px 14px;gap:8px}
 .og-faq-panel{padding:0 14px 14px}
}
/* TOGGLES AT EVERY WIDTH ON THIS PAGE (Dmitry 2026-09-12: "don't show all the questions and answers at the same time").
   His 2026-09-08 "no toggle on desktop" stays on the landing's questions section; the Help center is a library and reads
   one answer at a time. The row is a control everywhere: chevron, pointer, in the tab order. Nothing is open on arrival;
   the open tile takes the recess ground so the state is visible from across the page. */
.og-faq-t.og-faq-open{background:var(--b-tile)}
.og-faq-panel .og-faq-a{margin-top:2px}
@media(prefers-reduced-motion:no-preference){.og-faq-t{transition:background-color 160ms var(--b-ease),border-color 160ms var(--b-ease)}}

/* ---- nothing found ---- */
.og-help-none{margin-top:8px;padding:28px 20px;border:1px dashed var(--og-line);border-radius:var(--og-tile-r);text-align:center}
.og-help-none[hidden]{display:none}
.og-help-none b{display:block;font:700 var(--b-title)/var(--b-title-lh) var(--og-font);letter-spacing:var(--b-title-ls);color:var(--og-ink)}
.og-help-none p{margin:6px 0 0;font:400 var(--b-small)/var(--b-small-lh) var(--og-font);color:var(--og-mute)}

/* ---- the close: the landing's ask state of the questions chip, then the quiet contact line ---- */
.og-help-close{margin-top:var(--b-gap);text-align:center}
.og-help-ask{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 18px;border:1px solid var(--b-line);border-radius:999px;background:var(--b-paper);font:600 14px/1 var(--b-font);text-decoration:none;transition:background 160ms var(--b-ease),border-color 160ms var(--b-ease)}
.og-help-ask:hover,.og-help-ask:focus-visible{background:var(--b-tile);border-color:#d3dbe3;text-decoration:none}
.og-help-ask:active{transform:scale(.97)}
.og-help-ask .og-ask-q{color:var(--b-mute)}
.og-help-ask .og-ask-a{color:var(--b-ink)}
.og-help-ask svg{flex:0 0 12px;width:12px;height:12px;opacity:.55;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:374px){.og-help-ask svg{display:none}}
.og-help-close .og-note{margin-top:12px}

/* ---- the glyphs (Dmitry 2026-09-12, on the library pick: "more creative emojis here and there"): the landing's own tile
   glyph, 19px in a 24px slot, read off the served page; one per chip; one on the close. THE MOSAIC THAT CAME WITH IT
   (a big first tile, a small second) WAS REJECTED the same day: "Every element should be equal." Every tile is the same
   size, two across, one closed height, and a question never takes a second line on desktop (og-help.js fits it). ---- */
.og-help-fun .og-faq-btn i,.og-help-fun .og-help-ask i{font-style:normal;font-size:19px;line-height:21px;flex:0 0 24px;width:24px;text-align:center}
.og-help-fun .og-help-ask i{font-size:16px;flex-basis:20px;width:20px;margin-left:-4px}
.og-help-fun .og-help-chips .og-cs-chip i{font-style:normal;font-size:15px;line-height:1;margin-right:7px}
/* eight chips with a glyph each measure ~1270px, over the 1140px shell: two rows of four, on purpose, never six and two */
.og-help-chips-br{display:none}
@media(min-width:768px){.og-help-fun .og-help-chips-br{display:block;flex-basis:100%;height:0}}
/* the question is ONE line on desktop: the script shrinks it (18px down to 14px) before it may wrap; the span never wraps on its own */
@media(min-width:768px){.og-faq-btn>span{white-space:nowrap;overflow:hidden;text-overflow:clip}}
/* phones: a question may take two lines, balanced, so the second line never ends on one word (the sheet's orphan rule) */
@media(max-width:767px){.og-faq-btn>span{text-wrap:balance}}
@media(max-width:359px){.og-faq-btn>span{font-size:16px}}
.og-q-xs{display:none}
@media(max-width:359px){.og-q-full{display:none}.og-q-xs{display:inline}}   /* the six questions with a 280px form (config.HELP_Q_XS) */   /* the 280px column: at 18px eleven questions took three lines; at 16px every one is two or one (measured 320, both engines) */
.og-faq-a{text-wrap:pretty}
/* Dmitry 2026-09-12, on the phone: "Make sure the text is fully covering the box, filling out." The open answer fills its
   column edge to edge: justified with hyphenation (html lang="en"), the last line left as it falls. */
.og-help .og-faq-a{text-align:justify;text-align-last:start;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3}

/* ---- ROUND 4 (Dmitry 2026-09-12, after the deploy: "more professional looking and more like a complete page") ---- */
/* the "Most asked" line under the search: the note's underlined link, four of them, dots between */
.og-help-top{margin:14px auto 0;max-width:640px;text-align:center;text-wrap:balance}   /* balanced: 2 + 2 on a phone, never 3 + 1 (seen on the iPhone 17 Pro Max at 440) */
.og-help-top span{margin-right:8px}
.og-note.og-help-top a{color:var(--b-ink);text-decoration:underline;text-decoration-color:#c9d3dc;text-underline-offset:3px}   /* two classes: og-public's `.og-note a:not(.og-btn)` (0,2,1) sets the shorthand and would reset the underline colour to ink */
/* the fork above the close: two equal tiles on the F1 tile's ground, a buyer's next pages and a client's own controls */
.og-help-fork{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--b-gap)}   /* polish: one separation value between the page's blocks (44 desktop, 24 phones), the same as chips to caption */
.og-help-fork-t{background:#fff;border:1px solid var(--og-line);border-radius:var(--og-tile-r);padding:22px 24px 24px;min-width:0}
.og-help-fork-h{display:flex;align-items:center;gap:10px;margin:0;font:700 var(--b-title)/var(--b-title-lh) var(--og-font);letter-spacing:var(--b-title-ls);color:var(--og-ink)}
.og-help-fun .og-help-fork-h i{font-style:normal;font-size:19px;line-height:21px;flex:0 0 24px;width:24px;text-align:center}
.og-help-fork-p{margin:6px 0 0;font:400 var(--b-small)/var(--b-small-lh) var(--og-font);color:var(--og-mute)}
.og-help-fork-l{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--og-line);display:grid;gap:9px}
.og-help-fork-l a{display:inline-flex;align-items:center;gap:8px;font:600 15px/1.4 var(--og-font);color:var(--og-ink);text-decoration:none}
.og-help-fork-l a:hover{text-decoration:underline;text-underline-offset:3px}
.og-help-fork-l svg{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
@media(min-width:768px){.og-help-fork-l{grid-template-columns:1fr 1fr;gap:10px 18px}}   /* Dmitry 2026-09-12: "a lot of negative space ... make it two columns": the four links two by two, so the tile is filled and short */
@media(max-width:991px){.og-help-fork{grid-template-columns:1fr;gap:10px}}
@media(max-width:767px){.og-help-fork-t{padding:18px 16px 20px}}

/* ---- POLISH PASS (impeccable + impeccable-extras, 2026-09-12, his "go"; refinement only, the world stays) ----
   Measured on the live page first: the question row, the chips and the Most asked links answered the pointer with
   nothing; the fork links had no transition of their own; fork links were 21px tall under a thumb; the blocks were
   separated by 40, 36 and 44. Every control now has a hover, every transition names its property, one separation
   value, 44px tap targets on phones without changing a drawn size, and print shows every category and every answer. */
@media(hover:hover){
 .og-help .og-faq-t:not(.og-faq-open):hover{border-color:#d3dbe3}            /* the row wakes like the ask chip; the ground stays the open state's */
 .og-help .og-faq-t:hover .og-faq-chev{stroke:var(--og-ink)}
 .og-help-chips .og-cs-chip:not(.is-on):hover{background:var(--b-tile);border-color:#d3dbe3;color:var(--og-ink)}
 .og-note.og-help-top a:hover{text-decoration-color:var(--b-ink)}
 .og-help-fork-l a:hover svg{opacity:1}
}
.og-help-top a,.og-help-fork-l a{transition:text-decoration-color 160ms var(--b-ease),color 160ms var(--b-ease)}
.og-help-fork-l svg{transition:opacity 160ms var(--b-ease)}
@media(max-width:767px){
 .og-help-chips.og-cs-filter{padding-top:6px}
 .og-help-chips .og-cs-chip{position:relative}
 .og-help-chips .og-cs-chip:before{content:"";position:absolute;inset:-6px 0}   /* a 48px thumb target on a 36px chip, nothing drawn */
 .og-help-fork-l{gap:0}
 .og-help-fork-l a{min-height:44px;display:flex;align-items:center}
}
@media print{
 .og-help-js .og-help-sec[hidden]{display:block}
 .og-help-js.og-help-one .og-help-sec .og-help-h2{display:block}
 .og-help-js.og-help-one .og-help-sec .og-faq-grid{margin-top:16px}
 .og-help-sec+.og-help-sec{margin-top:28px}
 .og-faq-panel[hidden]{display:block!important}
 .og-help-search,.og-help-top,.og-help-chips,.og-help-line,.og-help-fork,.og-help-close,.og-faq-chev,.og-help-none{display:none!important}
 .og-faq-grid{grid-template-columns:1fr;gap:8px}
 .og-faq-t{break-inside:avoid;background:#fff!important}
 .og-help .og-faq-btn{min-height:0;padding:10px 14px 4px}
 .og-help .og-faq-a{text-align:left}
}