/* /services/<service>/, the Service template (research/service/design/spec.md, docs/35-service.md once written). The
   template's own stylesheet, loaded after src/styles/index.css on the service pages only, then each service's own
   (./<id>/<id>.css, se-br-, se-web-, se-ec-, se-seo-, se-ads-, se-soc-, se-crm-, se-host-). Classes se- only, never
   .sv or .svc (the homepage's services shelf and card) or sp- (the System template's). It holds the frame block every
   inner page copies, the head in its eight compositions and its type only fallback, the shared parts' styles, the
   type levels by name and the start states behind the guard. It reuses the site's .sec, .sec-h, .lbl, .h2, .line,
   .btn and .btn-big, and none of the homepage's set pieces (no orb, no pinned track, no painted card, no counter).
   Every value is the site's or docs/14's unless a comment gives the reason. Responsive rules sit at the end, in the
   order of the parts. */

/* ---------- the page ---------- */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* without JavaScript the page reads whole, as on the other inner pages (docs/14, The dot on every page, point 7) */
html:not(.js) .dot-anchor::before{transform:scale(1)}
.rm .dot-anchor::before{transform:scale(1)}
html:not(.js) .loader,.loader-seen .loader{display:none}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px)}
/* a placeholder's panel follows the ground, graphite on ink, mist on paper (rubric.json, recipe 2), from the tokens */
:root{--se-panel:var(--graphite)}
body[data-bg="paper"]{--se-panel:var(--mist)}

/* The arrivals of arrivals.ts, hidden only behind the guard. The title's lines rise, the head's side, words and loop
   fade up, text fades up, a list fills by visible row (each .se-c from 28px lower, its delay --d reset for that row),
   a picture rises (--ry, 40px when unset), the band's chip prints its dot. */
.js:not(.no-libs):not(.rm) .se-head .line-in{transform:translateY(112%)}
.js:not(.no-libs):not(.rm) .se-head .se-side,.js:not(.no-libs):not(.rm) .se-head .se-words,.js:not(.no-libs):not(.rm) .se-head .se-head-motion{opacity:0;transform:translateY(14px)}
.js:not(.no-libs):not(.rm) .se-x:not(.in){opacity:0;transform:translateY(14px)}
.js:not(.no-libs):not(.rm) [data-se-fill] .se-c:not(.in){opacity:0;transform:translateY(28px)}
.js:not(.no-libs):not(.rm) .se-rise:not(.in){opacity:0;transform:translateY(var(--ry,40px)) scale(.99)}
.js:not(.no-libs):not(.rm) .se-chip.is-on:not(.in)::before{transform:scale(0)}
.se-c{transition:opacity 1s cubic-bezier(.215,.61,.355,1) var(--d,0s),transform 1.25s cubic-bezier(.215,.61,.355,1) var(--d,0s)}
.se-rise{transition:transform 1.4s cubic-bezier(.23,1,.32,1),opacity 1.15s cubic-bezier(.23,1,.32,1)}

/* ---------- the type levels of docs/14, by name ---------- */
.se-t-statement{font:700 clamp(30px,4.35vw,74px)/1.06 var(--display);letter-spacing:-.038em}
.se-t-title{font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em}
.se-t-lead{font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em}
.se-t-brief{font:500 clamp(26px,2.6vw,40px)/1.25 var(--text);letter-spacing:-.012em}
.se-t-number{font:800 clamp(56px,6vw,104px)/.9 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.se-t-body{font-size:17px;line-height:1.55}
.se-t-small{font-size:15.5px;line-height:1.5}
/* a drawn full stop, for a line that is not a station, a piece's last beat or a decision, never the dot (kit, CSS) */
.se-stop{display:inline-block;width:.2em;height:.2em;margin-left:.04em;border-radius:50%;background:var(--red);vertical-align:baseline}

/* ---------- a chapter word (parts/Chapter.astro) ---------- */
/* its size from the order pass, headline the .h2 size, name a step smaller (spec.md, Chapter.astro) */
.se-ch{margin:clamp(28px,5vh,56px) 0 0;font-family:var(--display);font-weight:800;text-wrap:balance}
.se-ch:focus{outline:none}
.se-lv-headline{font-size:clamp(52px,9vw,164px);line-height:.86;letter-spacing:-.052em}
.se-lv-name{font-size:clamp(46px,5.6vw,100px);line-height:.88;letter-spacing:-.052em}
.se-ch .line{display:block;width:max-content;max-width:100%}
.se-ch .line+.line{margin-top:-.12em}
.se-al-center{text-align:center}
.se-al-center .line{margin-inline:auto}
.se-al-end{text-align:end}
.se-al-end .line{margin-left:auto}

/* ---------- a motion placeholder (parts/Motion.astro) ---------- */
/* before the parts that place one, so their margins win over the reset here. Its shape held (--se-r), a panel on the
   ground's colour with a 1px ring (or bare, drawn on the ground), its note the dev server's only. Never red, never a
   circle the size of the dot */
.se-motion{position:relative;margin:0;aspect-ratio:var(--se-r,16 / 9);border-radius:10px;background:var(--se-panel);transition:background-color .8s var(--e-out)}
.se-motion::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.se-motion--r-panel{border-radius:18px}
.se-motion--r-picture{border-radius:10px}
.se-motion--bare{background:none}
.se-motion--bare::after{content:none}
.se-motion-in{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.se-motion-note{position:absolute;left:16px;bottom:14px;right:16px;max-width:44ch;max-height:calc(100% - 28px);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:13.5px;line-height:1.4;color:var(--fg-2);overflow-wrap:anywhere}
/* the note kept inside its frame, three lines at most and never past the frame's height, so a small sign vignette
   never spills its caption over the rows around it, and an unfilled bare placeholder drawn as a slot, a dashed ring
   (the reviews' requests, 3 October 2026, the dev server's only, a build renders no unfilled placeholder) */
.se-motion--bare[data-se-dev]::after{content:"";box-shadow:none;border:1px dashed var(--line)}

/* ---------- the head (parts/Head.astro) ---------- */
/* its own section on ink, its top clearing the nav, its foot --gap-h, the step to a block on another ground, never a
   margin (docs/14, The page head). Twelve columns as /work/'s head, each variant placing the title, the words and the
   loop (spec.md, Head.astro, Variants) */
.se-head-s{padding-top:calc(env(safe-area-inset-top,0px) + 108px);padding-bottom:var(--gap-h)}
.se-head{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.se-head>.se-head-h{grid-column:1/-1;grid-row:1;margin-bottom:clamp(28px,5vh,56px)}
.se-title{grid-column:1/span 8;grid-row:2;margin:0}
.se-title:focus{outline:none}
.se-title .line{display:block;width:max-content;max-width:100%}
.se-title .line+.line{margin-top:-.12em}
/* the breadcrumb in the label's place (the project page's .pj-crumbs), its link's hit area 10px out */
.se-crumbs ol{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45em;margin:0;padding:0;list-style:none}
.se-crumbs li+li::before{content:"/" / "";margin-right:.45em;color:var(--fg-3)}
.se-crumbs a{position:relative;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}
.se-crumbs a::after{content:"";position:absolute;inset:-10px -6px}
.se-crumbs a:hover{border-color:var(--red)}
.se-crumbs a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* the words, the promise at the Lead level, who it is for in --fg-2, the plan button, a text link */
.se-words{display:flex;flex-direction:column;gap:22px;min-width:0}
.se-promise{margin:0;max-width:24ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty}
.se-to{display:flex;flex-direction:column;align-items:flex-start;gap:22px;min-width:0}
.se-who{margin:0;max-width:36ch;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-more{margin:0}
.se-head-motion{width:100%}
/* the signs, inside the head's section, 99px under the head's floor at 900px tall (spec.md, Head.astro) */
.se-signs{margin-top:clamp(70px,11vh,130px)}

/* cover, centred like a book cover, the title on one line across 12, the loop in 4 to 9, the promise in 1 to 3 and who
   with the action in 10 to 12, both standing on the loop's foot */
.se-head--cover .se-title{grid-column:1/-1;text-align:center}
.se-head--cover .se-title .line{margin-inline:auto}
.se-head--cover .se-head-motion{grid-column:4/span 6;grid-row:3;margin-top:32px}
.se-head--cover .se-words{display:contents}
.se-head--cover .se-promise{grid-column:1/span 3;grid-row:3;align-self:end}
.se-head--cover .se-to{grid-column:10/span 3;grid-row:3;align-self:end}
/* grid, the title over the work, the loop in 5 to 12, the words in 1 to 4 on its foot */
.se-head--grid .se-head-motion{grid-column:5/span 8;grid-row:3;margin-top:24px}
.se-head--grid .se-words{grid-column:1/span 4;grid-row:3;align-self:end;padding-right:12px}
/* over, the title over the work, the loop in 1 to 8, the words in 9 to 12 on its foot */
.se-head--over .se-head-motion{grid-column:1/span 8;grid-row:3;margin-top:24px}
.se-head--over .se-words{grid-column:9/span 4;grid-row:3;align-self:end}
/* columns, the title in 1 to 3, a tall loop in 4 to 7 from the title's cap line, column 8 air, the words in 9 to 12 */
.se-head--columns .se-title{grid-column:1/span 3}
.se-head--columns .se-head-motion{grid-column:4/span 4;grid-row:2;margin-top:.12em}
.se-head--columns .se-words{grid-column:9/span 4;grid-row:2;align-self:end}
/* mirror, the loop in 1 to 5 from the title's cap line, the title and the words in 6 to 12, seven columns so a two
   line title (Google and, Meta Ads) holds two lines at 1440 (the ads review, 3 October 2026, the spec's 1 to 6 and 7
   to 12 wrapped it to three) */
.se-head--mirror .se-head-motion{grid-column:1/span 5;grid-row:2/span 2;margin-top:.12em}
.se-head--mirror .se-title{grid-column:6/span 7}
.se-head--mirror .se-words{grid-column:6/span 7;grid-row:3;margin-top:clamp(24px,4vh,44px)}
/* portrait, a tall 9 to 16 frame in 10 to 12 from the label row's rule, which stops at 8, column 9 air */
.se-head--portrait>.se-head-h{grid-column:1/span 8}
.se-head--portrait .se-head-motion{grid-column:10/span 3;grid-row:1/span 3}
.se-head--portrait .se-words{grid-column:1/span 6;grid-row:3;margin-top:clamp(24px,4vh,44px)}
/* wide, the words in 9 to 12 from the title's cap line, a low wide loop across 12 under it, inside the content edge
   with 18px corners, never full bleed */
.se-head--wide .se-words{grid-column:9/span 4;grid-row:2;align-self:start;padding-top:.6em}
.se-head--wide .se-head-motion{grid-column:1/-1;grid-row:3;margin-top:40px;border-radius:18px}
/* beside, the title and the words in 1 to 6, the loop in 7 to 12 from the title's cap line */
.se-head--beside .se-title{grid-column:1/span 6}
.se-head--beside .se-words{grid-column:1/span 5;grid-row:3;margin-top:clamp(24px,4vh,44px)}
.se-head--beside .se-head-motion{grid-column:7/span 6;grid-row:2/span 2;margin-top:.12em}
/* h0, type only, every head's build fallback while its loop is unfilled, the title in 1 to 8 standing on a 1px floor
   that runs off the right edge (docs/22), the words in 9 to 12 on its bottom line, the signs hanging under the floor */
.se-head--h0 .se-words{grid-column:9/span 4;grid-row:2;align-self:end}
.se-head--h0::after{content:"";grid-column:1/-1;grid-row:3;height:1px;margin:clamp(24px,4vh,40px) calc(var(--pad) * -1) 0 0;background:var(--line);transition:background-color .8s var(--e-out)}
/* when the signs open with their own label row, its rule is the head's floor, so the floor is kept in place (the
   stations' distances unchanged) but not drawn, one rule at the head's foot, never two parallel (the brand review) */
.se-head-s:has(.se-signs .sec-h) .se-head--h0::after{background:transparent}
/* the station guard of a type only head. Without its loop and its sign vignettes the head is short, and on a taller
   screen the title's full stop came within a screen of the first chapter word's (1440 x 900 on ads, every page but
   two at 1920 x 1080, measured after the rise, design lead, 3 October 2026). The head keeps the difference under its
   signs, so the two stations stay a screen apart at any height, nothing added at 840px high or less */
.se-head-s:has(.se-head--h0){padding-bottom:calc(var(--gap-h) + max(0px,100svh - 840px))}

/* ---------- a block ---------- */
/* each block a section on its ground, --gap-s from the next (padding-block --gap-h on each) */
.se-b{padding-block:var(--gap-h)}
/* a section's label row (parts/SecHead.astro), its label an h2 when the section has no chapter word */
.se-sh{position:relative;flex-wrap:wrap;row-gap:8px}
.se-sh-l{margin:0}
.se-sh-act{margin-left:auto}
/* a narrow phone puts the link under the label, at the right, rather than breaking it over two lines */
/* websites' ruler, 13 ticks on the column edges over the rule, desktop only */
.se-ruler{position:absolute;left:0;right:0;top:-5px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;pointer-events:none}
.se-ruler i{height:9px;border-left:1px solid var(--line)}
.se-ruler::after{content:"";position:absolute;right:0;top:0;height:9px;border-left:1px solid var(--line)}

/* ---------- a text link (parts/Act.astro), process's .pr-act ---------- */
.se-act{position:relative;display:inline-block;padding:0 0 2px;border-bottom:1px solid var(--line);font:600 17px/1.4 var(--text);color:var(--fg);text-decoration:none;transition:border-color .3s}
.se-act::after{content:"";position:absolute;inset:-10px -6px}
.se-act:hover{border-bottom-color:var(--red)}
.se-act:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ---------- a tool's render in a line (parts/Tool.astro) ---------- */
.se-tool{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.se-tool img{display:block}
.se-tool-n{font-weight:500}

/* ---------- a rolling figure (parts/Digits.astro) ---------- */
/* each digit a column 0 to 9 moved by --v, settling .045s after the one before it (spec.md, Digits.astro) */
.se-digits,.se-dgs{display:inline-flex;align-items:flex-end;font-variant-numeric:tabular-nums}
.se-dg{display:inline-block;height:1em;line-height:1;overflow:hidden}
.se-dg-in{display:flex;flex-direction:column;transform:translateY(calc(var(--v,0) * -1em));transition:transform .55s var(--e-out) calc(var(--i,0) * .045s)}
.se-dg-in i{display:block;height:1em;font-style:normal;line-height:1}
.se-ds{line-height:1}
/* a separator drawn from data-ch, so the strips' hidden text never reads as a clock or a sentence to the copy checker */
.se-ds::before{content:attr(data-ch)}
/* rollTo(el, value, label, true), set at once (motion.ts) */
.se-digits.is-instant .se-dg-in{transition:none}
.rm .se-dg-in{transition:none}

/* ---------- asked first (parts/Questions.astro) ---------- */
/* industry's questions, two up and always open, no rules, an odd last answer in the second column */
.se-qs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:48px;margin:clamp(70px,11vh,130px) 0 0;padding:0;list-style:none}
.se-qs-it{min-width:0;padding-right:clamp(0px,4vw,72px)}
.se-qs-list>.se-qs-it:last-child:nth-child(odd){grid-column:2}
.se-q{margin:0;max-width:22ch;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em}
.se-a{margin:16px 0 0;max-width:46ch;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-a-link{margin:14px 0 0}

/* ---------- start here, the band (parts/Band.astro) ---------- */
/* templates/industry/industry.css's band, with the se- prefix (the part proposed as shared, docs/31), the often line
   and SEO's audit above its label row */
.se-often{margin:0 0 clamp(70px,11vh,130px);padding-top:15px;max-width:calc((100% - 11 * 24px) / 12 * 8 + 7 * 24px);border-top:1px solid var(--line);font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;transition:border-color .8s var(--e-out)}
.se-often-a{color:var(--fg);text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--line);transition:border-color .3s}
.se-often-a:hover{border-bottom-color:var(--red)}
.se-often-a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.se-audit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-bottom:clamp(70px,11vh,130px)}
.se-audit-ask{grid-column:1/span 5;display:flex;flex-direction:column;gap:18px}
.se-audit-ask p{margin:0}
.se-audit-q{max-width:20ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em}
.se-audit-l{max-width:40ch;color:var(--fg-2)}
.se-audit-motion{grid-column:7/span 6}
.se-band-s .sec-h h2{margin:0}
.se-band{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-top:clamp(28px,5vh,56px)}
.se-host{grid-column:1/span 3;justify-self:start;width:clamp(72px,14vw,200px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--mist)}
.se-host img{display:block;width:146%;max-width:none;height:auto;margin:3.8% 0 0 -23%}
.se-ask{grid-column:5/span 8}
.se-say{margin:0;max-width:22ch;font:500 clamp(26px,2.6vw,40px)/1.25 var(--text);letter-spacing:-.012em;color:var(--fg)}
.se-chips{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.se-chip{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:16px;font-weight:500;line-height:1.2;color:var(--fg);text-decoration:none;transition:box-shadow .3s}
.se-chip:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.se-chip:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* this page's service, ticked, the current choice's 6px red dot (docs/14, Tags and pills, the language picker), printing
   once with the landing curve (rubric.json, a full stop printing) */
.se-chip.is-on{box-shadow:inset 0 0 0 1px var(--fg)}
.se-chip.is-on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.se-note{margin:0;max-width:44ch;font-size:17px;line-height:1.55;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-band .se-note{margin-top:24px}

/* ---------- the nav over the page ---------- */


/* ---------- the built marks ---------- */
/* a claim still to confirm keeps its mark in a build until the studio decides it (docs/14, Samples), its black and
   white hard coded, as on the other inner pages */
.pv-tag{display:inline-block;margin-left:2px;padding:4px 10px;border-radius:999px;background:#000;color:#fff;font:600 12px/1.3 var(--text);letter-spacing:.02em;vertical-align:middle;white-space:nowrap}
.sec-h>.pv-tag{margin-right:auto}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* the head, the eight compositions kept, their narrow columns widened */
  .se-head--cover .se-head-motion{grid-column:3/span 8}
  .se-head--cover .se-promise{grid-column:1/span 4;grid-row:4;margin-top:32px;align-self:start}
  .se-head--cover .se-to{grid-column:7/span 6;grid-row:4;margin-top:32px;align-self:start}
  .se-head--grid .se-title,.se-head--over .se-title,.se-head--portrait .se-title{grid-column:1/-1}
  .se-head--grid .se-head-motion{grid-column:1/-1}
  .se-head--grid .se-words,.se-head--over .se-words{grid-column:1/span 8;grid-row:4;margin-top:32px;align-self:start}
  .se-head--over .se-head-motion{grid-column:1/-1}
  .se-head--columns .se-title{grid-column:1/span 5}
  .se-head--columns .se-head-motion{grid-column:6/span 4}
  .se-head--columns .se-words{grid-column:1/span 5;grid-row:3;margin-top:32px}
  .se-head--mirror .se-head-motion,.se-head--beside .se-head-motion{grid-column:1/span 6;grid-row:3;margin-top:32px}
  .se-head--mirror .se-title,.se-head--beside .se-title{grid-column:1/-1}
  .se-head--mirror .se-words,.se-head--beside .se-words{grid-column:8/span 5;grid-row:3;margin-top:32px;align-self:end}
  .se-head--portrait .se-head-motion{grid-column:9/span 4;grid-row:3;margin-top:32px}
  .se-head--portrait .se-words{grid-column:1/span 7;align-self:end}
  .se-head--wide .se-title{grid-column:1/-1}
  .se-head--wide .se-words{grid-column:1/span 8;grid-row:4;margin-top:32px;padding-top:0}
  .se-head--h0 .se-title{grid-column:1/-1}
  .se-head--h0 .se-words{grid-column:1/span 8;grid-row:4;margin-top:32px;align-self:start}
  .se-head--h0::after{grid-row:3}
  /* the band */
  .se-host{grid-column:1/span 3}
  .se-ask{grid-column:4/span 9}
  .se-often{max-width:none}
}
@media (max-width:760px){
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
  .se-head-s{padding-top:calc(env(safe-area-inset-top,0px) + 90px)}
  /* the head in one column, the title, the loop in its phone shape, the words */
  .se-head{display:flex;flex-direction:column;align-items:stretch}
  /* every part full width, a variant's align-self:end would push it right in a column (as specific as the variants' rules,
     and later) */
  .se-head .se-head-h,.se-head .se-title,.se-head .se-words,.se-head .se-head-motion{align-self:stretch}
  .se-head .se-head-h{order:0;align-items:flex-start}
  .se-head .se-title{order:1}
  .se-head .se-head-motion,.se-head--h0::after{order:2;margin-top:clamp(28px,4vh,40px)}
  .se-head .se-words,.se-head--cover .se-words{order:3;display:flex;margin-top:28px}
  .se-head--cover .se-promise,.se-head--cover .se-to{margin-top:0}
  .se-head--h0::after{margin-right:calc(var(--pad) * -1)}
  .se-head--portrait .se-head-motion{width:min(252px,70%)}
  /* a phone's placeholder is recomposed for portrait, its own shape (placeholders.json, phone) */
  .se-motion{aspect-ratio:var(--se-rp,4 / 5)}
  .se-ruler{display:none}
  .se-qs-list{grid-template-columns:minmax(0,1fr)}
  .se-qs-list>.se-qs-it:last-child:nth-child(odd){grid-column:auto}
  .se-qs-it{padding-right:0}
  .se-audit{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .se-audit>*{grid-column:1/-1}
  .se-band{grid-template-columns:minmax(0,1fr)}
  .se-band>*{grid-column:1/-1}
  .se-ask{margin-top:20px}
}
@media (max-height:560px){
  .se-head-s{padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
}
@media (forced-colors:active){
  .se-motion::after{box-shadow:none;border:1px solid CanvasText}
  .se-chip{border:1px solid CanvasText;box-shadow:none}
  .se-chip.is-on::before,.se-stop{background:CanvasText}
}