/* ==========================================================
   BLOCK TEN, MASTERCLASS LANDING PAGE
   Matched to reference two: white ground, black uppercase
   headline, gold highlights set italic and underlined,
   video first, soft pill CTA in title case.
   Fitted to Block Ten: Geist, evidenced numbers only.
   ========================================================== */

@font-face{font-family:"Geist";src:url("assets/geist-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("assets/geist-mono-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#ffffff; --fg:#101010;
  --dim:#5a5a5a;
  --hair:#e6e4e0;
  --panel:#f7f6f4;
  --gold:#c9a24a;         /* the reference accent */
  --gold-ink:#101010;     /* white on this gold measures 2.4:1, which fails AA */
  --body:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --display:"Poppins","Geist",ui-sans-serif,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --pad:clamp(20px,4vw,56px);
  --max:1440px;
  --col:1320px;           /* wide: the page fills the screen */
}
body[data-accent="gold"]{--accent:var(--gold);--accent-ink:var(--gold-ink)}
body[data-accent="mono"]{--accent:#101010;--accent-ink:#ffffff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rail{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.col{max-width:var(--col);margin:0 auto;padding-inline:var(--pad);text-align:center}
.hero .col{max-width:none;padding-inline:clamp(20px,6vw,120px)}
.band{padding-block:clamp(44px,6vw,88px)}
.panel{background:var(--panel)}
.mid{max-width:900px;margin-inline:auto}
/* ---- masthead ---- */
.masthead{display:flex;align-items:center;justify-content:center;gap:12px;padding:22px var(--pad) 4px}
.logo{height:26px;width:auto}
.masthead-note{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
/* ---- hero, reference two ---- */
.hero{padding:clamp(18px,2.4vw,30px) 0 clamp(30px,4vw,48px)}
.voice{
  margin:0 auto 16px;max-width:78ch;
  font-size:clamp(13.5px,1.5vw,15.5px);line-height:1.45;
  font-style:italic;font-weight:500;color:var(--fg);
}
h1{
  margin:0 auto;max-width:26ch;
  font-family:var(--display);
  font-weight:800;text-transform:uppercase;
  /* Capped at 62px. At 92px the headline alone took four lines and pushed
     the date strip and the button below the fold on a 900px laptop. */
  font-size:clamp(30px,4.6vw,66px);line-height:1.02;letter-spacing:-.02em;
  text-wrap:balance;
}
h1 mark{
  background:none;color:var(--accent);
  /* The italic slant closes the gap to the next word, so DONE-FOR-YOU read as
     one word with SYSTEM. A hair of trailing space buys it back. */
  margin-right:.12em;
  font-style:italic;
  /* A highlighted phrase split across two lines loses the emphasis and the
     underline reads as two unrelated marks. Keep each one whole. */
  white-space:nowrap;
  text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.12em;
}
/* Keep every marked phrase whole. The two on this page are twelve characters
   each and fit at every width. A LONGER marked phrase, roughly twenty
   characters or more, will not fit below about 1100px and nowrap pushes it off
   the right edge: if you swap in a headline like that, either shorten the
   marked span or add
     @media(max-width:1100px){h1 mark{white-space:normal;box-decoration-break:clone}}
   and accept the mark breaking across lines. */
.callout{
  margin:14px 0 0;font-size:clamp(16px,1.75vw,17px);line-height:1.45;
  border-left:3px solid currentColor;padding-left:14px;opacity:.9;
}
.callout strong{font-weight:700}
/* The market callout is the first thing a reader from an ad has to recognise
   themselves in, and as a hairline note on white it disappeared. Inverted to
   a filled band: the segment names in gold carry the recognition, the rest of
   the sentence sits quieter in white so the band is not shouting. */
.callout-top{
  display:inline-block;margin:0 auto 18px;max-width:62ch;
  background:var(--fg);color:#fff;opacity:1;border-left:0;
  padding:11px 22px;border-radius:999px;
  font-size:clamp(15px,1.55vw,16.5px);line-height:1.4;text-align:center;
}
.callout-top strong{color:var(--accent);font-weight:700}
@media(max-width:640px){
  .callout-top{border-radius:14px;padding:11px 16px;max-width:none;display:block}
}
@media(max-width:640px){.callout{font-size:16px;padding-left:11px}}
.sub{
  margin:18px auto 0;max-width:74ch;
  /* 16px floor. Below it iOS zooms on focus and the text stops being body copy. */
  font-size:clamp(16px,1.7vw,18px);line-height:1.55;font-weight:500;color:var(--fg);
}
.sub em{font-style:italic;font-weight:700;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
.sub u{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em;font-weight:700}
.deck{
  margin:12px auto 0;max-width:40ch;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,2.1vw,29px);line-height:1.12;letter-spacing:-.01em;
  color:var(--dim);text-wrap:balance;
}

/* ---- mobile running order ----
   On a phone the video moves up under the deck, then the two time elements and
   the button, and the proof line reads last. Grouping the date with the
   countdown puts both "when" answers together, and the button directly after
   them, which also lifts it back above the fold on a small screen.
   Done with flex order so the DOM keeps its desktop sequence and the two
   layouts cannot fall out of step.
   One button only. The hero holds a single .cta-wrap and order moves it, so
   there is no second copy to fall out of sync or show twice. */
@media(max-width:640px){
  .hero .col{display:flex;flex-direction:column}
  .hero .callout-top              {order:1}
  .hero h1                        {order:2}
  .hero .deck                     {order:3}
  .hero .vid                      {order:4;margin-top:20px}
  .hero .when-hero                {order:5;margin-top:18px}
  .hero .countdown                {order:6;margin-top:14px}
  .hero .cta-wrap                 {order:7;margin-top:clamp(16px,1.9vw,22px)}
  .hero .sub                      {order:8;margin-top:18px}
}

/* ---- date and times, above the video ---- */
.when-hero{margin:20px auto 0;max-width:70ch}
.when-hero[hidden]{display:none}
.when-date{
  margin:0;font-family:var(--mono);font-size:clamp(11px,1.2vw,12.5px);
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg);font-weight:600;
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-items:baseline;
}
.when-dot{color:var(--hair)}
/* The strip wraps to two lines on a phone, which strands the separator at the
   end of the first line. The line break is doing its job by then. */
@media(max-width:640px){.when-dot{display:none}}
.when-dur{color:var(--dim);font-weight:500}
.when-tz{
  margin:7px 0 0;font-size:clamp(13px,1.4vw,14.5px);line-height:1.45;color:var(--dim);
}
.when-tz:empty{display:none}

/* video frame */
.vid{position:relative;width:100%;margin:clamp(22px,2.8vw,34px) auto 0;max-width:min(1100px,86vw);border-radius:14px;overflow:hidden;background:#0c0c0c}
/* width:100% matters. The hero column shrink-wraps its children, so with
   only an iframe inside (no intrinsic width like an img has) the figure
   collapsed to 0 and the player rendered at 0x0. */
.vid img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.vid .vid-hint{
  position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px;
  background:rgba(12,12,12,.76);color:#fff;border-radius:7px;padding:7px 11px;
  font-size:12px;font-weight:500;
}
/* Click to play. The iframe is only fetched once someone asks for it, so the
   hero stays fast and no third party is contacted on page load. */
.vid-play,.vid-fallback{display:block;position:relative;width:100%;padding:0;border:0;background:#0c0c0c;cursor:pointer}
.vid-play[hidden],.vid-fallback[hidden]{display:none}
.vid-btn{
  position:absolute;inset:0;margin:auto;width:74px;height:74px;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--accent);color:var(--accent-ink);
  box-shadow:0 8px 30px rgba(0,0,0,.34);
  transition:transform .16s cubic-bezier(.2,.8,.25,1),filter .16s;
}
.vid-btn svg{margin-left:4px}
.vid-play:hover .vid-btn{transform:scale(1.07);filter:brightness(1.06)}
.vid-play:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.vid-frame{width:100%;aspect-ratio:16/9;display:block;border:0}
.vid img{aspect-ratio:16/9}
/* ---- CTA, soft pill, title case ---- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--accent-ink);
  border:0;cursor:pointer;text-decoration:none;
  padding:16px 34px;min-height:56px;border-radius:999px;
  font-family:var(--body);font-weight:600;font-size:clamp(15px,1.7vw,17px);
  transition:transform .16s cubic-bezier(.2,.8,.25,1),filter .16s;
}
.cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.cta.full{width:100%}
/* A centred pill on a phone wastes the easiest third of the screen to tap.
   Scoped to the hero so the buttons further down keep their shape. */
@media(max-width:640px){.hero .cta{width:100%}.hero .cta-wrap{padding-inline:2px}}
.cta-wrap{margin-top:clamp(26px,3.6vw,38px);text-align:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* secondary calendar button: same shape, quieter, so Google Calendar leads */
.cta-alt{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.cta-alt:hover{filter:none;background:rgba(0,0,0,.04)}
/* required marker on form labels */
.req{font-weight:400;font-size:.82em;letter-spacing:.06em;text-transform:uppercase;opacity:.62;margin-left:.45em}
/* ---- when strip ---- */
.when{display:flex;flex-wrap:wrap;justify-content:center;margin:26px auto 0;max-width:600px;border:1px solid var(--hair);border-radius:10px;overflow:hidden}
/* ---- numbers ---- */
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
@media(min-width:860px){.nums{grid-template-columns:repeat(4,1fr)}
}
.nums div{background:var(--bg);padding:clamp(22px,3vw,36px) clamp(14px,2vw,26px);text-align:center}
.nums b{display:block;font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1}
.nums span{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
/* ---- section heads ---- */
.lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.tz{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--dim);margin:10px 0 16px;line-height:1.6}
.hero .tz{margin:16px 0 18px}
dialog.optin .tz{font-size:11px;margin:4px 0 0}
h2{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(24px,3.4vw,42px);line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
h2 mark{background:none;color:var(--accent);font-style:italic;text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.12em}
.lede{margin:16px 0 0;max-width:64ch;font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.55;color:var(--dim)}
/* ---- rows ---- */
.rows{margin-top:clamp(26px,3.6vw,42px);border-top:1px solid var(--hair);text-align:left}
.rows>div{display:grid;gap:6px 26px;padding:clamp(18px,2.6vw,26px) 0;border-bottom:1px solid var(--hair)}
@media(min-width:820px){.rows>div{grid-template-columns:60px 1fr}
}
.no{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent);padding-top:5px;font-weight:600}
.rows h3{margin:0 0 5px;font-size:clamp(16.5px,1.9vw,20px);font-weight:700;letter-spacing:-.01em}
.rows p{margin:0;color:var(--dim);font-size:15.5px;max-width:70ch}
/* ---- dashboards ---- */
.arte{display:grid;gap:clamp(16px,2.4vw,26px);margin-top:clamp(26px,3.6vw,42px)}
@media(min-width:900px){.arte{grid-template-columns:1fr 1fr}
}
/* ---- quotes ---- */
.qmain{display:grid;margin-top:clamp(26px,3.6vw,42px);border:1px solid var(--hair);border-radius:14px;overflow:hidden;text-align:left}
@media(min-width:900px){.qmain{grid-template-columns:1fr 1fr}
}
@media(min-width:820px){.qpair{grid-template-columns:1fr 1fr}
}
/* ---- gallery ---- */
.gal{display:grid;gap:clamp(12px,1.6vw,18px);margin-top:clamp(26px,3.6vw,42px)}
@media(min-width:820px){.gal{grid-template-columns:repeat(12,1fr)}
}
/* ---- form ---- */
.fgrid{display:grid;gap:clamp(26px,3.6vw,56px);align-items:center;text-align:left}
@media(min-width:920px){.fgrid{grid-template-columns:1fr .82fr}
}
form{background:var(--bg);border:1px solid var(--hair);border-radius:14px;padding:clamp(22px,2.8vw,36px)}
form>label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
/* Every text-entry input, not a hand-listed few. Leaving tel off this list is
   what left the phone field at its intrinsic width with no bottom margin. */
input[type=text],input[type=email],input[type=tel]{width:100%;box-sizing:border-box;padding:14px 15px;margin-bottom:15px;border:1px solid var(--hair);border-radius:8px;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px}
input::placeholder{color:#9a9a9a}
.consent{display:grid;grid-template-columns:19px 1fr;gap:11px;align-items:start;margin-bottom:12px}
.consent input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--accent)}
.consent label{font-size:12.5px;line-height:1.5;color:var(--dim);font-weight:400;margin:0}
.fine{margin:13px 0 0;font-size:12px;color:var(--dim);text-align:center}
/* ---- faq ---- */
.faq{margin-top:24px;text-align:left}
/* ---- close + footer ---- */
.close{background:var(--panel);text-align:center}
footer{padding-block:clamp(36px,4.6vw,58px);border-top:1px solid var(--hair);text-align:center}
footer .logo{margin:0 auto 14px}
.legal{display:flex;justify-content:center;gap:10px;font-size:12.5px;color:var(--dim);margin:0 0 14px}
.legal a{text-decoration:none;color:var(--dim)}
.legal a:hover{color:var(--fg)}
.disc{max-width:74ch;margin:0 auto 9px;font-size:11.5px;line-height:1.65;color:#8a8a8a}
/* The hero has to land the CTA above a 844px fold on a 390px screen.
   Every value below is buying that space back. */
@media(max-width:620px){
  .masthead{padding-top:14px}
.hero{padding:10px 0 30px}
.voice{margin-bottom:14px;font-size:13px}
h1{font-size:clamp(23px,6.2vw,27px);line-height:1.08}
.sub{margin-top:14px;font-size:16px}
.vid{margin-top:18px;border-radius:11px}
.vid img{aspect-ratio:16/9}
.cta-wrap{margin-top:18px}
.cta{min-height:52px;padding:14px 26px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}
}

/* Single testimonial, compact. No photo, no card, just the words. */
.solo{
  margin:0 auto;max-width:26ch;
  font-family:var(--display);font-weight:800;
  font-size:clamp(22px,3vw,38px);line-height:1.18;letter-spacing:-.02em;
}
.solo-who{margin:18px 0 0}
.solo-who b{display:block;font-size:15.5px;font-weight:700}
.solo-who span{display:block;font-size:13.5px;color:var(--dim)}

/* Centred sections still centre their lede. Left aligned ones no longer
   inherit auto margins, which was breaking alignment against the heading. */
.col .lede{margin-inline:auto}

/* ---------------------------------------------------------------------------
   Two column section
   The rows previously spanned a 1440px rail while the copy capped at 70ch,
   which left the right half of the screen empty. The heading now occupies
   that space and the list gets a sane measure.
--------------------------------------------------------------------------- */
.two{display:grid;gap:clamp(28px,4vw,64px);align-items:start;text-align:left}
@media(min-width:980px){
  .two{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
  .two-head{position:sticky;top:40px}
}
.two-head .cta-wrap{text-align:left;margin-top:clamp(20px,2.6vw,30px)}

.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);text-align:left}
.rows li{
  /* Fixed first column, not auto. "01" is narrower than "02" in Poppins, so
     auto sizing gave each row a different text indent. */
  display:grid;grid-template-columns:clamp(46px,4vw,64px) 1fr;gap:clamp(12px,1.6vw,22px);
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--hair);
}
.no{
  font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(26px,3.2vw,40px);line-height:.9;letter-spacing:-.03em;
  color:var(--accent);padding-top:2px;
}
.rows h3{margin:0 0 6px;font-size:clamp(17px,1.9vw,21px);font-weight:700;letter-spacing:-.012em}
.rows p{margin:0;color:var(--dim);font-size:15.5px;line-height:1.55;max-width:52ch}

/* ---------------------------------------------------------------------------
   Countdown
--------------------------------------------------------------------------- */
.countdown{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(22px,3vw,32px) auto 0}
.countdown[hidden]{display:none}
.cd-unit{
  display:grid;justify-items:center;gap:2px;min-width:72px;
  padding:11px 10px;border:1px solid var(--hair);border-radius:10px;background:var(--bg);
}
.cd-unit b{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.4vw,28px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cd-unit em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cd-live{font-weight:700;color:var(--accent)}
@media(max-width:620px){.cd-unit{min-width:0;flex:1 1 0;padding:9px 4px}}

/* ---------------------------------------------------------------------------
   Social proof screenshots
--------------------------------------------------------------------------- */
.shots{display:grid;gap:clamp(14px,2vw,20px)}
@media(min-width:700px){.shots{grid-template-columns:1fr 1fr}}
.shots figure{margin:0;background:var(--bg);border:1px solid var(--hair);border-radius:12px;padding:clamp(12px,1.6vw,18px)}
/* Outline rather than border: a border grows the box by 2px on each axis,
   which shifts the rendered aspect ratio off the file's own and reads as a
   squashed image to the render harness. */
.shots img{width:100%;outline:1px solid var(--hair);outline-offset:-1px;border-radius:6px}
.shots figcaption{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.two-head .solo{margin:clamp(22px,3vw,30px) 0 0;max-width:none;font-size:clamp(18px,2.1vw,24px);line-height:1.3}
.two-head .solo-who{margin-top:14px}

/* ---------------------------------------------------------------------------
   Registration, single column
--------------------------------------------------------------------------- */
form.stack{max-width:520px;margin:clamp(26px,3.4vw,38px) auto 0;text-align:left}
form.stack label{display:block}
.band#register .lede{margin-inline:auto}

/* ---------------------------------------------------------------------------
   Two step opt in modal
--------------------------------------------------------------------------- */
.vid[data-open-optin]{cursor:pointer}
.vid[data-open-optin]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

dialog.optin{
  width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  margin:auto;padding:clamp(26px,3.4vw,40px);
  border:1px solid var(--hair);border-radius:16px;background:var(--bg);color:var(--ink);
  box-shadow:0 30px 80px rgba(0,0,0,.22);overflow:auto;position:relative;
}
dialog.optin::backdrop{background:rgba(12,12,12,.6)}
dialog.optin h2{margin:8px 0 0;font-size:clamp(24px,3vw,32px)}
dialog.optin .lab{margin:0}
/* The dialog is already the card. A second bordered panel inside it reads as
   a frame within a frame, so the form drops its own card treatment here. */
dialog.optin form.stack{margin-top:clamp(20px,2.6vw,26px);max-width:none;border:0;padding:0;background:none}
dialog.optin .consent:first-of-type{margin-top:4px}
dialog.optin .cta.full{margin-top:20px}
.optin-x{
  position:absolute;top:10px;right:12px;width:38px;height:38px;
  border:0;background:transparent;color:var(--dim);font-size:28px;line-height:1;
  cursor:pointer;border-radius:50%;
}
.optin-x:hover{background:var(--panel);color:var(--ink)}

/* Thank you page: the name is appended inline, so it inherits the h1 */
.ty-name{white-space:nowrap}

/* ---------------------------------------------------------------------------
   Calendar alternates, under the thank you page CTA
--------------------------------------------------------------------------- */
.cal-alt{
  margin:16px 0 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
}
.cal-alt a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px}
.cal-alt a:hover{color:var(--accent)}

/* ---------------------------------------------------------------------------
   Short phones. The 390x844 case clears the fold comfortably, but a 375x667
   iPhone SE is 177px shorter and pushed the hero CTA under it. Targeting
   height as well as width so the taller phones keep their breathing room.
--------------------------------------------------------------------------- */
@media(max-width:640px) and (max-height:700px){
  .hero{padding:6px 0 22px}
  .voice{margin-bottom:10px;font-size:12.5px;line-height:1.4}
  h1{font-size:clamp(21px,5.8vw,24px)}
  .sub{margin-top:10px;font-size:16px;line-height:1.45}
  .vid{margin-top:13px}
  .countdown{margin-top:14px;gap:7px}
  .cd-unit{padding:7px 4px}
  .cd-unit b{font-size:18px}
  .cta-wrap{margin-top:13px}
}

/* Footer legal links were 19px tall, well under the 44px minimum tap target.
   Padding grows the hit area without moving the text. */
.legal{gap:4px}
.legal a{display:inline-flex;align-items:center;min-height:44px;padding-inline:10px}
.legal span{display:inline-flex;align-items:center;min-height:44px}

/* ---------------------------------------------------------------------------
   Generated date and time marks may wrap on narrow screens.
   h1 mark is nowrap so a highlighted phrase is never split, which is right for
   hand-written copy and wrong for machine-set text: "SATURDAY, SEPTEMBER 19"
   measured 363px inside a 343px column at 390px and ran to both edges. Scoped
   to [data-bce] only, so no hand-written headline changes shape.
--------------------------------------------------------------------------- */
@media(max-width:680px){
  h1 mark[data-bce],h2 mark[data-bce]{white-space:normal}
}