/* Formatting pass (owner 2026-10-08 18:1xZ, 15:1x SP: "formatting issues, issues with the lines, the vision part needs to be completely reformatted").
   Loaded last. One line between blocks, never two; links in a row line up; the vision steps read as one list. */

/* ── 1. Lines: a fold's closing line never sits on top of the next block's opening line ── */
.ed .card > details.fold:last-child,
.ed .card > .body > details.fold:last-child,
.ed details.fold:has(+ :is(.card, section, .gaps-more, .acct-sub, .rail, .glance, .real-more, hr)),
.ed details.fold:has(+ * > :is(.card, section):first-child) { border-bottom: 0; }
.ed .gaps-more > .card:first-child { margin-top: 0; }
.ed .acct-sub + details.fold, .ed .acct-sub > details.fold:first-child { border-top: 0; }

/* ── 2. Links in a row: the second link is not pushed in when the row wraps ── */
#app :is(.jacts, .gl-l, .rail-acts, .bar, .rc-links, .sup-acts) > .link + .link { margin-left: 0; }

/* ── 3. Home: Now · For you · Evorrah is handling · Next — two columns until there is room for four ── */
.ed .rail-sum.has-hand { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 32px; }
.ed .rail-sum .rail-acts { flex-direction: column; align-items: flex-start; gap: 4px; }

/* ── 4. Your plan (suppliers): every row has the same columns; actions stack on the right ── */
.sup-cat { align-items: start; }
.sup-cat .jacts { flex-direction: column; align-items: flex-end; gap: 6px; }
.sup-cat .jacts > * { margin: 0; }

/* ── 5. Who does it (Yours · Evorrah · Both): the portal's normal pill, never an outlined capital tag ── */
.pl-who, .pl-step .t .po-tag { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 2px 9px; border: 0; border-radius: var(--m-r-none, 0); background: var(--alab); color: var(--onyx); line-height: 1.5; }
/* The portal (body.d6, loads portal.css: --r-pill 2px) shows these at the brand input radius; the CRM never had --r-pill, so they stay square there. :where() keeps the specificity of the rule above. */
:where(body.d6) .pl-who, :where(body.d6) .pl-step .t .po-tag { border-radius: var(--m-r-input, 2px); }
.pl-who-you, .pl-step .t .po-you { background: var(--next-soft); color: var(--next); }
.pl-who-ev, .pl-step .t .po-ev { background: var(--alab); color: var(--onyx); }
.pl-who-both { background: var(--wait-soft); color: var(--wait); }
.pl-pwg .pl-who-line { margin: -2px 0 6px; }
.pl-done > summary { list-style: none; display: inline-flex; gap: 6px; align-items: center; padding: 6px 0; }
.pl-done > summary::-webkit-details-marker { display: none; }
.pl-done > summary::after { content: "+"; font-size: 15px; }
.pl-done[open] > summary::after { content: "–"; }

/* ── 6. Locked tabs and menu rows: a muted label and the drawn lock; the words "Opens after your vision" come on hover (title), never as text laid over the next tab ── */
.ed .lock .lk-t { display: none !important; }
.ed :is(.side, .rail-nav, nav:not(.sectabs)) > a:has(> .lock) { display: flex; align-items: center; }
.ed :is(.side, .rail-nav, nav:not(.sectabs)) > a > .lock { margin-left: auto; flex: none; }

/* ── 7. Your invitation sections: the same columns on every row ── */
.sec-row { grid-template-columns: 28px minmax(0, 1fr) 84px 96px; }
.sec-row > .sec-mv { justify-self: end; }
.sec-row > :last-child:not(.sec-mv):not(.sec-n) { justify-self: end; }
.sec-lock { display: inline-flex; align-items: center; gap: 2px; }

/* ── 8. Decor kit: the moodboard reads as one colour strip with its name ── */
.pl-block .mb .sw { display: flex; aspect-ratio: auto; height: 56px; }
.pl-block .mb .sw i { flex: 1; width: auto; height: auto; border: 0; border-radius: 0; }

/* ── 9. Guest list: each need on its own line; table names never split ── */
.g-needs { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.g-r td.g-tbl { white-space: nowrap; }

/* ── 10. Your vision (set-up section C): one panel with its eleven parts as a quiet list ── */
.stepnav .vsteps { list-style: none; margin: 0 0 -1px; padding: 6px 14px 12px 52px; border: var(--hair); border-top: 0; background: var(--paper); counter-reset: none; }
.stepnav .vsteps li { margin: 0; }
.stepnav .vsteps a { display: flex; align-items: baseline; gap: 12px; min-height: 0; padding: 7px 0 7px 14px; margin: 0; border: 0; border-left: 1px solid var(--o20); background: none; box-shadow: none; font-size: 14px; font-weight: 400; color: var(--o78); }
.stepnav .vsteps a small { display: inline; flex: none; width: 18px; font-size: 12px; color: var(--o62); font-variant-numeric: tabular-nums; }
.stepnav .vsteps a:hover { color: var(--ink); }
.stepnav .vsteps a.on { color: var(--ink); font-weight: 600; border-left: 2px solid var(--next); padding-left: 13px; }
.stepnav .vsteps a.on small { color: var(--next); }
.stepnav .vsteps li.last { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--o20); }
/* Phone: the open section spans the width and its parts become one swipe strip, so the questions still start near the top. */
@media (max-width: 760px) {
  .ed .setup-grid .stepnav > a.on:has(+ .vsteps) { grid-column: 1 / -1; }
  .ed .setup-grid .stepnav > .vsteps { position: relative; grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; margin: -7px 0 0; padding: 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .ed .setup-grid .stepnav > .vsteps::-webkit-scrollbar { display: none; }
  .stepnav .vsteps li { flex: none; scroll-snap-align: start; }
  .stepnav .vsteps li.last { margin: 0; padding: 0; border: 0; }
  .stepnav .vsteps a, .stepnav .vsteps a.on { align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: var(--hair); border-radius: var(--m-r-input, 2px); background: var(--paper); font-size: 13px; white-space: nowrap; }
  .stepnav .vsteps a small { width: auto; font-size: 12px; }
  .stepnav .vsteps a.on { border-color: var(--next); background: var(--next-soft); color: var(--next); }
}

/* Phone: supplier actions sit in one row under the price, from the left. */
@media (max-width: 760px) {
  .sup-cat .jacts { flex-direction: row; flex-wrap: wrap; align-items: center; justify-self: start; text-align: left; gap: 8px 18px; margin-top: 4px; }
  .sup-cat .jacts > * { margin: 0 !important; }
}

/* Phone: each invitation section stays one row (handle · name · arrows · switch), same columns on every row. */
@media (max-width: 760px) {
  .sec-row { grid-template-columns: 22px minmax(0, 1fr) 70px 80px; grid-template-areas: none; gap: 8px; padding: 6px 0; }
  .sec-row > * { grid-area: auto !important; padding-bottom: 0 !important; }
  .sec-row .sec-mv .ib { width: 32px; height: 32px; }
  .sec-row .sec-mv.small { font-size: 12px; text-align: right; }
}

/* Plan steps: the step's own link keeps a little air from the who-does-it line above it. */
.pl-step > .link { margin-top: 6px; }
.po-line { row-gap: 6px; }

/* Formatting rerun (owner 2026-10-08: "rerun a formatting analysis in crm prototype and client portal prtotoype").
   A badge beside text that wraps sits level with the first line, never halfway down: Bryan's initial beside "Sent to you by Bryan" (Plan),
   the A–F letters beside "Your answers" (Set-up). */
.pl-rev { align-items: flex-start; }
.pl-rev > .av { flex: none; margin-top: -6px; }
.bl-grid .card > .row:not(:has(> .av)) { align-items: baseline; }

/* Phone check after the rerun (owner 2026-10-08: "check it on phone width too"): in the set-up section list the ✓ or letter sits level with
   the section's first line, never halfway down a name that wraps to two or three lines. */
.ed .stepnav > a:has(> b + span) { align-items: flex-start; }
.ed .stepnav > a > b:first-child { flex: none; margin-top: -4px; }
/* The two links under the list ("How to use this · See what this set up") stay plain links on one line; the section-card look is for A–F only. */
#app .stepnav > p a.link { display: inline; min-height: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
/* RCL-D108 (desk 10-24): on a phone or touch screen those two links still take a 44 × 44 tap, the same way a link inside running text does
   (portal.css RCL-D108): the box grows to 44, the negative block margin hands the extra height back so the line keeps its place, and the link
   sits above its neighbours. Two links in the line: each keeps its own 44 band. The desk (a mouse, wider than 640) is untouched. */
@media (max-width:640px),(orientation:landscape) and (max-height:500px),(hover:none) and (pointer:coarse){
  #app .stepnav > p a.link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin-block: calc((1lh - 44px) / 2); position: relative; z-index: 1; }
  #app .stepnav > p:has(.link ~ .link) a.link { margin-block: 0; }
}
/* Top of a room: the stage line and the date line keep air under them before the room's label (they sat 3px above it);
   the date starts at the left edge when there is no stage line before it, and on a phone it takes its own line under the stage line. */
#app .page > .evclock + .eyebrow, #app .page > .stmark + .eyebrow { margin-top: 10px; }
#app .page > .evclock:not(.stmark + .evclock) { margin-left: 0; }
@media (max-width: 760px) { #app .page > .stmark + .evclock { display: block; margin: 4px 0 0; } }
/* Home: the plan meters open the page without a rule floating in empty space above them. */
#app .page > .card:is(.band, .up-meters):first-child { margin-top: 0 !important; border-top: 0; padding-top: 0; }
/* Phone: the folded tracker tab ("12 to look at · …") stays inside the empty margin at the left edge, so it never covers the first letters of a line as the page scrolls under it;
   it is taller to stay easy to tap (owner 2026-10-08: "fix the search hint and the ribbon too" · "check it on phone width too"). */
@media (max-width: 760px) { body > .pxl-pill { max-width: 12px !important; padding: 18px 0 !important; color: transparent !important; } }
/* Formatting rerun 2 (owner 2026-10-08: "rerun a formatting analysis in crm prototype and client portal prototype"): two links side by side in a list row
   ("Share again with the new date · Keep as shared") keep their space as a gap, so when they wrap on a phone the second starts at the same left edge as the first. */
#app span.k:has(> .link + .link) { flex-wrap: wrap; column-gap: 16px; row-gap: 4px; }
#app span.k > .link + .link { margin-left: 0; }
/* Formatting rerun 3 (owner 2026-10-08: "rerun a formatting analysis in crm prototype and client portal prototype"): Designs, the twelve pieces —
   a status that takes two lines ("Needs you · approval withdrawn") gets a taller row, so its second line never sits on the Open link under it. */
.plan12 .slot { grid-template-rows: auto 22px minmax(26px, auto) 34px 20px; }
/* Formatting rerun 4 (owner 2026-10-08: "rerun a formatting analysis in crm prototype and client portal prototype"): tablet width (761–980px, an iPad held upright).
   The 232px menu down the left left each room 440px, narrower than its layout: the timeline's step names ran into each other, the guest table ran 229px past the screen,
   supplier names sat on their pills and "Included" spilled out of its line. There the portal moves to the phone's way round: the left menu folds away (the event switcher
   stays in the top bar) and the five tabs sit along the bottom; each room keeps its own desktop layout at full width (about 670px, close to what 1024 gives it). */
@media (min-width:761px) and (max-width:980px) {
  .shell { grid-template-columns: 1fr; } .side { display: none; }
  .page { padding-bottom: 110px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: var(--hair); z-index: 20; }
  .tabbar a { min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; text-decoration: none; color: var(--o62); }
  .tabbar a.on { color: var(--next); font-weight: 600; }
  body.shot .tabbar { position: absolute; }
  .proposal-flag, body:has(.panel) .proposal-flag, body:has(.menu) .proposal-flag { bottom: 72px; }
  body > .pxl-pill, body > .pxl-panel { bottom: 72px; }
}

/* Stress 10-08 CP-346 (owner 2026-10-08 "fix all in the prototypes"): at 375 px the guest list ran 660 px wide.
   The filter chips scroll inside their own row (a flex item needs min-width:0 for that), and a long name or note wraps inside the card. */
@media (max-width:760px){
  #app .bar, #app .bar .chips { min-width: 0; max-width: 100%; }
  #app .bar .chips { flex: 1 1 100%; overflow-x: auto; }
  #app .tbl, #app .tbl tr { max-width: 100%; }
  #app .tbl tr { grid-template-columns: minmax(0,1fr) auto; }
  #app .tbl td { min-width: 0; overflow-wrap: anywhere; }
  #app .g-m { flex-wrap: wrap; min-width: 0; }
  #app .tbl td a, #app .tbl td span, #app .tbl td b { min-width: 0; }
  #app .tbl td b { white-space: normal; overflow-wrap: anywhere; }
}

/* Proto-loop round 3 layout pass (owner 2026-10-08: "yes do both, build it").
   A round initial (.av) beside a name sits on the name's line, whether the words under it take one line or three:
   People (who can see the event), the guest list, Bryan's note on Set-up. The row lines up on the text baseline, so a link at the end of the row sits on that line too. */
#app :is(.row, a):has(> .av:first-child + * > b:first-child) { align-items: baseline !important; }
/* People on a phone: the name and role keep the full width beside the initial; "Send again · Change access · Remove" drop to their own line under the name. */
@media (max-width: 760px) {
  #app .pp-list .row { flex-wrap: wrap; column-gap: 14px; row-gap: 0; }
  #app .pp-list .row > .t { flex: 1 1 calc(100% - 58px); }
  #app .pp-list .row > .t + .link { margin-left: 58px; }
}
/* The event band at the top of each room: the monogram sits on the couple's names line, also when the place line wraps under them. */
.ed .evband { align-items: baseline; }
/* The guest list: the select box sits on the guest's name line too, when the party line under the name wraps. */
#app span:has(> .g-ck + a > .av:first-child) { align-items: flex-start !important; }
#app span:has(> .g-ck + a > .av:first-child) > .g-ck { margin-top: 6px; }
/* Files: the menu shown in the 3:4 file tile is full from its title to the couple's names, so its "Sample" mark sits as a small tab in the top corner, above the title. */
@container (min-width: 111px) { .ed .fstrip .fs > .pp.men .smp { top: 0; right: 0; border-radius: 0 0 0 6px; } }

/* The portal's marks are drawn, never typed as symbols, so they look the same on every phone and computer:
   the tick (approved, answered, chosen) and the seating marks (step-free route, needs a ride). They take the colour of the words beside them. */
:root {
  --ic-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3.1L13 4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-step: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='2.4' r='1.6'/%3E%3Cpath d='M7 5.2v4.3h4.2l1.6 3.8M7 7.4h3.4M4.6 7.9a3.9 3.9 0 1 0 5.6 4.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-ride: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 11V8.6L3.9 5h8.2L14 8.6V11z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='5' cy='11.6' r='1.5'/%3E%3Ccircle cx='11' cy='11.6' r='1.5'/%3E%3C/svg%3E");
}
.ok-ic, .mk { display: inline-block; width: .95em; height: .95em; vertical-align: -.12em; background: currentColor; -webkit-mask: var(--ic-tick) center / contain no-repeat; mask: var(--ic-tick) center / contain no-repeat; }
.ok-ic { margin-right: .3em; }
.mk.mk-step { -webkit-mask-image: var(--ic-step); mask-image: var(--ic-step); }
.mk.mk-ride { -webkit-mask-image: var(--ic-ride); mask-image: var(--ic-ride); }
/* A design still being drawn (Designs, the twelve pieces): a drawn pen in its empty frame. */
:root { --ic-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13l.7-2.9L10.6 3.2l2.2 2.2-6.9 6.9zM9.3 4.5l2.2 2.2' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mk.mk-pen { -webkit-mask-image: var(--ic-pen); mask-image: var(--ic-pen); }
:is(.g-ck, .stepnav a b, .check i) > .ok-ic { margin: 0; width: 12px; height: 12px; vertical-align: 0; }
/* A tick box (.check): the box draws its own tick when it is on, whatever the markup or a click put inside it. */
.check > i { font-size: 0; }
.check.on > i::after { content: ''; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ic-tick) center / contain no-repeat; mask: var(--ic-tick) center / contain no-repeat; }
/* A control the page scrolls to (a tap target, a keyboard focus, a link into a room) stops clear of the bars that stay on screen:
   the sticky top bar, and on a phone or tablet the five tabs along the bottom, so a thumb or a click always reaches it. */
html { scroll-padding-top: 80px; scroll-padding-bottom: 64px; }
/* On a phone the top bar wraps to 114-162px, more than the 80px the page leaves clear above a control it scrolls to, so a tab or button scrolled to
   the top edge sat under it and a click or a thumb could not reach it (proto-loop round 10, F326/F328). Below 700px the bar scrolls away with the page;
   the five tabs along the bottom stay on screen. */
@media (max-width: 700px) { header.top { position: static; } }
@media (max-width: 980px) { html { scroll-padding-bottom: 84px; } }
/* Live "Portal on every screen" (portal-mobile-100, P-038/P-056): nothing runs off the right edge of a phone. A ticked line with its
   right-hand note ("Included") wraps the note under the words instead of pushing the page 10px wider than the screen. */
@media (max-width: 760px) { .ticks li { flex-wrap: wrap; } .ticks li span { white-space: normal; } }
/* Live "Portal on every screen" rounds 1-2 (dd73d0f635, 0e9fe896fa; P-055/P-056): a disclosure is at least 24px at every width (WCAG 2.2 2.5.8);
   where there is a finger the house floor is 44px (owner 2026-09-07), and it only ever RAISES a box; every field is 16px on a touch screen
   so iPhone/iPad Safari never zooms into it. */
#app summary, header.top summary, .tour button { min-height: 24px; }
@media (hover: none) and (pointer: coarse) {
  #app summary, header.top summary, #app .btn, #app button:not(.sw):not(.link), header.top .btn, header.top .ib, #app select,
  #app label:has(> input[type="checkbox"]), #app label:has(> input[type="radio"]), .tour button { min-height: 44px !important; }
  header.top summary, header.top .ib { min-width: 44px !important; display: inline-flex; align-items: center; justify-content: center; }
  #app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  #app select, #app textarea, header.top input, header.top select { font-size: 16px !important; }
}
/* Live round 1 "320px overflow" (dd73d0f635): at 320 wide the readiness card's longest link ("Are we ready? · checks on …") ran 24px off the screen. */
@media (max-width: 420px) { #app .rc-links a, #app a.link { white-space: normal; } }
/* proto-loop round 4 (F379-F388): the plan compare table on a phone stacks each row (the row name, then one line per plan, named),
   and the "Included" note after a ticked line keeps its own width instead of being squeezed under its words. */
@media (max-width:760px), (max-height:500px) and (orientation:landscape) and (max-width:960px) {
  #app [data-plan-compare] .tbl tr { display: block; }
  #app [data-plan-compare] .tbl td { display: block; padding: 3px 0; }
  #app [data-plan-compare] .tbl td:first-child { padding-bottom: 4px; }
  #app [data-plan-compare] .tbl td[data-p]::before { content: attr(data-p) ": "; color: var(--o62); }
}
#app [data-plan-after] .ticks li > span { flex: none; max-width: 100%; }
/* proto-loop round 4 (F228): on a phone the side sheet covers the whole width, so the dimmed backdrop behind it (also a "Close" link)
   cannot be tapped; it steps out of the way and the sheet's own Close (✕, named "Close") is the one close control. */
@media (max-width:520px) { a.scrim:has(+ aside.panel) { visibility: hidden; } }
@media (max-width:580px) { .ed a.scrim:has(+ aside.panel) { visibility: hidden; } }
/* proto-loop round 7 (S27 F175): on a wide screen a side panel leaves the page beside it usable. The dim area is the panel's own shadow, which
   takes no clicks, so "+ Add guests" or another guest's name works in one click; a click on empty page space still closes the panel
   (actions.js, the same as the dim area did). */
@media (min-width:900px) { #app a.scrim:has(+ aside.panel) { visibility: hidden; } #app a.scrim + aside.panel { box-shadow: 0 0 0 200vmax rgba(20,20,20,.28); } }
/* proto-loop round 10 (S38 F248, S29 F185): on a phone a side panel covers the whole screen, so the page and the tab bar behind it step out of the way
   (hidden, same look): nothing behind the panel can be tapped or reached by Tab, and the only controls left are the panel's own. */
@media (max-width: 520px) { #app:has(> aside.panel) > .shell, #app:has(> aside.panel) > nav.tabbar { visibility: hidden; } }
/* 10-15 role walks (client F5, planner step 26): at phone width every text action is at least 24px tall (WCAG 2.2 2.5.8; the touch rules above
   already give buttons 44px). The tap box grows by padding and the same negative margin gives the space back, so no line moves (content-box:
   a link that already has a 44px floor keeps its size). Links the rules in ux-a..ux-e and consolidate already give a 44px floor at this width are
   left out, so their tap boxes never reach over the next line. The lines after the first put back the few links whose own margin or box rule wins. */
@media (max-width: 760px) {
  :where(#app) :where(.link:not(summary), .gx-versions a):not(:where(.ed :is(.rc-links a, .rail-acts a, .rail-h a, .gl-l a, a.rail-all,
    .waiting-on-you p.small a.link, .hx-list .row > a.link, .bl-grid .row > a.link, .pp-list .row > a.link, .hx-list .row .t a.link, .sx-locked .k a.link,
    .moment .mo-acts .link, .fl .link, .jacts .link, .attn .g-fix .link, .m-ra .link, .m-dl .link, .m-inv .link, .pcard .pl .link,
    .main:has(.af-keep) .feature-list .link), .ed .page:is(:has(.dsx-suite), :has(.webpv), :has(.sup-plan)) :is(.feature-list a, .jacts a, .planfoot a,
    .slot > a.link, .bar > a, .card > div > a, .card > p > a, .dsx-other a, .sup-other a, p.small > a.link, .field > a, .field a.link, details > div > a, .band > a)))
    { box-sizing: content-box; padding-block: 5px; margin-block: -5px; }
  #app .pl-step > .link { margin-top: 1px; }
  #app .sup-cat .jacts > .link, #app .feature-list.decide li .k .link { box-sizing: border-box; }
  .ed .page a.stmark { padding-block: 3px; margin-top: -3px; margin-bottom: 1px; }
  header.top a.pn-ev { line-height: 24px; }
  header.top summary { min-width: 24px; }
  #app .search input, #app button.sec-lock { min-height: 24px; }
  #app .g-ck { width: 24px; height: 24px; margin-right: 6px; }
  #app span:has(> .g-ck + a > .av:first-child) > .g-ck { margin-top: 4px; }
}