/* ============================================================================
   khaled.digital: shared styles for / and /thank-you.

   Both pages are the same handful of parts: a step label, a video facade, a
   mint button, a modal. They are defined once here so the funnel reads as one
   surface rather than two pages that happen to share a palette.
   ========================================================================== */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
@media (max-width:380px){ .wrap{ padding:0 18px; } }
section{ padding:clamp(46px,7vw,96px) 0; }
section + section{ border-top:1px solid var(--line); }

/* ---------- type ----------
   Space Grotesk carries headings only. Body stays on the system stack, which
   is already loaded on every device and costs nothing. */
/* The serif carries the display sizes only. Below about 20px its contrast
   works against legibility, so h3 (a card label, not a statement) stays on the
   UI stack where it belongs. */
h1,h2{ font-family:var(--display); font-weight:400; letter-spacing:-.012em; margin:0; }
h1{ font-size:clamp(36px,7.4vw,64px); line-height:1.02; }
h2{ font-size:clamp(28px,5vw,42px); line-height:1.06; }
h3{ font-family:var(--sans); font-size:15px; line-height:1.4; letter-spacing:-.01em; font-weight:600; margin:0; }

/* The second line is the promise, not an accent on a word: a whole clause in
   the italic and in the accent, so the headline changes voice mid-sentence
   the way it would if it were spoken. */
.h1-b{ display:block; font-style:italic; color:var(--accent); }
p{ margin:0; }
.lede{ color:var(--muted); max-width:var(--measure); margin:1rem 0 0; font-size:1.03rem; }

/* The step label. The whole navigational system of the site is these two
   words above a heading, so they are quiet and they are always in mono. */
.step{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:9px; margin:0 0 14px;
}
.step::before{ content:""; width:16px; height:1px; background:var(--accent); opacity:.7; }
.step.plain{ color:var(--faint); }
.step.plain::before{ background:var(--faint); }

/* ---------- buttons ----------
   One filled button on the site, and it is mint. Everything else is a text
   link or an outline, so the eye never has to choose between two CTAs. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:-.01em;
  padding:15px 24px; border-radius:12px; border:none; cursor:pointer;
  text-decoration:none; background:var(--accent); color:var(--on-accent);
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
  min-height:48px;                      /* tap target */
}
.btn:hover{ transform:translateY(-2px); background:var(--accent-deep); color:var(--porcelain); box-shadow:0 14px 30px -14px var(--accent-line); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:18px; height:18px; flex:0 0 auto; }
.btn.block{ width:100%; }
@media (min-width:560px){ .btn.block{ width:auto; min-width:330px; } }

/* Secondary, and it must stay secondary: a message is worth less to Khaled
   than a booked call, so nothing up here is allowed to look like the calendar. */
.btn-text{
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--text);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  padding:9px 2px; border-bottom:1px solid transparent; transition:.16s;
}
.btn-text:hover{ color:var(--accent); border-bottom-color:var(--accent-line); }
.btn-text svg{ width:16px; height:16px; }

.quiet-link{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
.quiet-link:hover{ color:var(--accent); text-decoration-color:var(--accent-line); }

/* ---------- header ---------- */
.bar{ border-bottom:1px solid var(--line); background:var(--bg); }
.bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:66px; }
.bar-right{ display:flex; align-items:center; gap:14px; }
.mark{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.mark svg{ width:32px; height:24px; display:block; flex:0 0 auto; }
/* The wordmark that always sat beside the K-H: same mono, same tracking. */
.mark .lbl{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text); opacity:.55; white-space:nowrap;
}
@media (max-width:520px){ .mark .lbl{ display:none; } }

/* Light and dark, switched by hand and remembered. */
.theme-toggle{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px; cursor:pointer;
  background:transparent; border:1px solid var(--line-2); color:var(--text);
  display:grid; place-items:center; transition:border-color .16s ease, color .16s ease;
}
.theme-toggle:hover{ border-color:var(--accent-line); color:var(--accent); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .sun{ display:none; }
.theme-toggle .moon{ display:block; }
:root[data-theme="light"] .theme-toggle .sun{ display:block; }
:root[data-theme="light"] .theme-toggle .moon{ display:none; }
.mark .bars rect{ fill:var(--text); }
.mark .cross{ fill:var(--accent); }
.mark .arms line{ stroke:var(--text); }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); padding:30px 0 44px; }
.foot .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; justify-content:space-between; }
.foot a{ color:var(--muted); text-decoration:none; font-size:14px; }
.foot a:hover{ color:var(--accent); }
.foot .copy{ font-family:var(--mono); font-size:11.5px; color:var(--faint); letter-spacing:.04em; }
.foot nav{ display:flex; flex-wrap:wrap; gap:22px; }

/* ---------- video facade ----------
   A button holding a thumbnail. No iframe exists until it is pressed. Twelve
   live players is several megabytes before anyone has chosen to watch
   anything, and this opens on mobile data from a WhatsApp link. */
.fc{
  position:relative; width:100%; aspect-ratio:16/9; display:block;
  padding:0; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); border-radius:14px; background:var(--panel-2);
  transition:border-color .18s ease;
}
.fc:hover{ border-color:var(--accent-line); }
.fc img{ width:100%; height:100%; object-fit:cover; }
.fc-play{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,rgba(14,16,18,.08),rgba(14,16,18,.52)); }
.fc-play span{
  width:56px; height:56px; border-radius:50%;
  background:rgba(14,16,18,.62); border:1px solid rgba(247,248,247,.34);
  display:grid; place-items:center; backdrop-filter:blur(3px);
  transition:background .18s ease, transform .18s ease;
}
.fc:hover .fc-play span{ background:var(--mint); transform:scale(1.06); }
.fc-play svg{ width:18px; height:18px; margin-left:3px; fill:var(--porcelain); }
.fc:hover .fc-play svg{ fill:#08130C; }
.fc.hero{ border-radius:16px; }
.fc.hero .fc-play span{ width:70px; height:70px; }
.fc.hero .fc-play svg{ width:23px; height:23px; }

/* No id yet, or an id that does not resolve. A neutral tile that says so,
   never a broken-image icon and never a dead click. */
.fc.empty{ cursor:default; background:var(--panel); border-style:dashed; }
.fc.empty:hover{ border-color:var(--line); }
.fc-empty{
  position:absolute; inset:0; display:grid; place-items:center; align-content:center;
  text-align:center; padding:16px; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}

/* The one place with colour in the ground rather than on the type. A single
   soft viridian wash centred behind the video, so the hero sits in light
   rather than on a flat black field. */
.hero-band{ position:relative; overflow:hidden; }
.hero-band::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:-18%; width:min(1100px,150vw); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
}
.hero-band > .wrap{ position:relative; z-index:1; }

/* ---------- step one, down the middle ----------
   The video is the whole point of the page, so the label and the headline sit
   over it rather than off to one side. This is the only centred block on the
   site; everything below it stays left-aligned and reads as a document. */
.centred{ text-align:center; }
.centred .step{ justify-content:center; }
.centred .lede{ margin-left:auto; margin-right:auto; }
.centred .book-embed{ margin-left:auto; margin-right:auto; }

/* The confirmation block runs down the middle: the time, the video, the three
   lines and the button all on one axis. The instruction rows keep their text
   left-aligned inside a centred column, because a wrapped sentence centred
   under a number reads as a poem rather than an instruction. */
.centred .confirm-when{ display:inline-flex; text-align:left; min-width:min(340px,100%); }
.centred .instr{ width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; text-align:left; }
.centred .cta{ display:flex; flex-direction:column; align-items:center; }
.centred .cta-note{ text-align:center; }

/* ---------- the hero video ----------
   The facade is built by script, so without this the slot is zero-high on
   first paint and everything below it drops when the script runs. Measured at
   0.15 CLS on mobile, all of it the calendar section being shoved down the
   page. Reserving the same 16:9 the facade will occupy costs nothing and the
   page never moves. */
.hero-video{ aspect-ratio:16/9; }
.hero-video{ max-width:900px; margin:26px auto 0; }

/* ---------- the calendar ----------
   Height is reserved before the embed exists so the page does not jump when a
   third-party script finally lands. */
.cal-shell{ margin:26px 0 0; }
/* A fixed height, not a minimum. Cal renders about 570px on a laptop and about
   730px on a phone, and a min-height lets it push everything below it down the
   moment it lands: measured at 0.15 CLS on mobile, which is most of a
   performance score. Fixed, the box cannot move the page at all, and an
   unusually tall month scrolls inside it instead. */
.cal-mount{
  width:100%; height:620px; overflow:auto;
  border:1px solid var(--line); border-radius:16px; background:var(--panel);
}
@media (max-width:600px){ .cal-mount{ height:760px; } }
.cal-mount.is-idle{ display:grid; place-items:center; }
.cal-idle{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
/* Always rendered, never conditional. A blank rectangle on a restrictive
   network loses the booking silently, and silence is the expensive failure. */
.cal-fallback{ margin:14px 0 0; font-size:14px; color:var(--muted); }

/* ---------- meet the operator ----------
   The one place on the site that is allowed to carry colour. It sits on its own
   panel rather than the page ground, the photo is framed in viridian with a
   mint edge picking out one side, and the role is the only mint text in the
   section. Everything else stays monochrome so this reads as emphasis rather
   than decoration. */
.op-band{ background:var(--panel); border-top:1px solid var(--line); }
.op-card{
  display:grid; gap:30px; align-items:center; margin:32px 0 0;
  padding:clamp(28px,4.2vw,52px);
  background:linear-gradient(150deg, var(--accent-soft), transparent 46%), var(--panel-2);
  border:1px solid var(--line-2); border-radius:22px;
}
@media (min-width:760px){ .op-card{ grid-template-columns:350px 1fr; gap:56px; } }

.op-frame{ position:relative; width:260px; max-width:100%; }
@media (min-width:760px){ .op-frame{ width:350px; } }
/* A viridian slab offset behind the photo. One shape, one colour, no shadow. */
.op-frame::before{
  content:""; position:absolute; inset:16px -16px -16px 16px;
  background:var(--accent-deep); border-radius:20px; z-index:0;
}
.op-photo{
  position:relative; z-index:1; display:block; width:100%; aspect-ratio:1;
  object-fit:cover; border-radius:18px;
  border:1px solid var(--accent-line); background:var(--panel);
}

.op-name{ font-family:var(--display); font-size:clamp(32px,4.3vw,46px); font-weight:400; letter-spacing:-.012em; line-height:1.04; }
/* Centred on its own line above the card, so the box beneath it — its photo,
   its two-column layout, its bio copy — stays exactly as it was. Only the
   heading moves. */
.op-head{ text-align:center; }
.op-head .step{ justify-content:center; }
.op-head + .op-card{ margin-top:32px; }
.op-role{
  display:inline-block; margin:13px 0 0; padding:7px 15px; border-radius:999px;
  font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line);
}
.op-bio{ color:var(--muted); max-width:var(--measure); margin:20px 0 0; font-size:1.06rem; line-height:1.62; }
.op-ig{
  display:inline-flex; align-items:center; gap:9px; margin:24px 0 0;
  padding:12px 17px; border-radius:12px;
  font-family:var(--mono); font-size:13px; color:var(--text); text-decoration:none;
  border:1px solid var(--line-2); background:var(--bg);
  transition:border-color .16s ease, color .16s ease;
}
.op-ig:hover{ border-color:var(--accent-line); color:var(--accent); }
.op-ig svg{ width:15px; height:15px; }

/* ---------- /thank-you: the confirmation ----------
   This block has to be readable at a glance on a 390px phone, so the date and
   the time are on separate lines. Run together they wrap mid-timestamp. */
.confirm-when{
  margin:20px 0 0; padding:15px 17px; display:flex; flex-direction:column; gap:3px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
}
.confirm-date{ font-family:var(--display); font-size:clamp(20px,4.8vw,26px); font-weight:400; letter-spacing:-.01em; }
.confirm-time{ font-family:var(--mono); font-size:12.5px; color:var(--muted); line-height:1.5; }

.instr{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:11px; }
.instr li{ display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:15px; line-height:1.5; }
.instr .n{
  flex:0 0 auto; width:22px; height:22px; margin-top:1px; border-radius:6px;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
  font-family:var(--mono); font-size:10.5px; font-weight:700; display:grid; place-items:center;
}
.instr b{ color:var(--text); font-weight:600; }

.cta{ margin:26px 0 0; }
.cta-note{ margin:11px 0 0; font-family:var(--mono); font-size:11.5px; color:var(--faint); }

/* ---------- the breakout grid ----------
   A library, not a landing page. The cards carry no panel, no border and no
   hover lift of their own; the thumbnails are the only weight in the grid, and
   the questions read as index entries. */
.grid{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:24px 18px; }
/* Two across on anything wider than a phone, however many rows that takes.
   Three columns made the thumbnails too small to read as video. */
@media (min-width:600px){ .grid{ grid-template-columns:repeat(2,1fr); gap:30px 22px; } }
@media (min-width:900px){ .grid{ gap:34px 26px; max-width:960px; } }
.card{ display:flex; flex-direction:column; gap:9px; }
.card .num{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--faint); }
.card h3{ color:var(--text); }

/* ---------- modal ---------- */
.md[hidden]{ display:none; }
.md{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; background:rgba(8,10,11,.84); }
.md-box{
  position:relative; width:100%; max-width:min(980px,100%);
  background:var(--panel); border:1px solid var(--line-2); border-radius:16px;
  padding:14px; box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
}
.md-head{ display:flex; align-items:flex-start; gap:14px; margin:0 0 12px; }
.md-title{ font-family:var(--sans); margin:0; font-size:15px; font-weight:600; line-height:1.35; letter-spacing:-.01em; flex:1; }
.md-x{
  flex:0 0 auto; width:36px; height:36px; border-radius:9px; cursor:pointer;
  background:transparent; border:1px solid var(--line-2); color:var(--muted);
  display:grid; place-items:center; transition:.16s;
}
.md-x:hover{ border-color:var(--accent-line); color:var(--accent); }
.md-x svg{ width:14px; height:14px; }
.md-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:11px; overflow:hidden; background:#000; }
.md-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ============================================================================
   The long-form page (/). Added for the rebuild: the funnel used to be a video
   and a calendar; the argument now has to be made in words, so it needed a
   short library of prose and comparison components rather than one more
   bespoke section. Everything below reuses the tokens and the step/lede/panel
   vocabulary already established above -- new shapes, same materials.
   ========================================================================== */

/* ---------- prose ----------
   .lede is tuned for one line under a heading, not three paragraphs of
   argument. Same colour, same measure, its own vertical rhythm so paragraphs
   don't collide into each other. */
.prose{ color:var(--muted); max-width:var(--measure); font-size:1.05rem; line-height:1.72; }
.prose p{ margin:0; }
.prose p + p{ margin-top:1.1em; }
.prose strong{ color:var(--text); font-weight:600; }

/* ---------- two-up panels ----------
   The ownership split and the qualification section are the same shape: two
   lists, side by side, one for each side of the arrangement. One pattern
   shared between them reads as a system; two similar-but-different components
   would read as an inconsistency. */
.twoup{ display:grid; gap:18px; margin:32px 0 0; }
@media (min-width:720px){ .twoup{ grid-template-columns:1fr 1fr; gap:22px; } }
.twoup-card{ padding:clamp(22px,3vw,32px); background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.twoup-card h3{ font-size:16px; }
.twoup-card.accent{ border-color:var(--accent-line); background:linear-gradient(150deg, var(--accent-soft), transparent 55%), var(--panel); }
.twoup-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; }
.twoup-list li{ display:flex; gap:11px; align-items:flex-start; color:var(--muted); font-size:14.5px; line-height:1.55; }
.twoup-list li::before{ content:""; flex:0 0 auto; width:14px; height:1px; margin-top:.75em; background:var(--line-2); }
.twoup-card.accent .twoup-list li::before{ background:var(--accent); opacity:.8; }

/* ---------- outcomes ----------
   Not a numbered sequence -- nothing here happens in order -- and not a
   feature list -- nothing here is a feature. It is a set of things that are
   simply true afterwards, so the marker borrows the step-rule motif rather
   than a checkmark: a statement, not a marketing tick. */
.outcomes{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:16px; max-width:var(--measure); }
.outcomes li{ display:flex; gap:13px; align-items:flex-start; color:var(--text); font-size:1.02rem; line-height:1.55; }
.outcomes li::before{ content:""; flex:0 0 auto; width:16px; height:1px; margin-top:.8em; background:var(--accent); }

/* ---------- the proof panel ----------
   The one place on the page that carries a number, so it is built to look like
   a citation rather than a hero stat: each figure has its attribution directly
   beneath it, not in a footnote nobody scrolls to, and the disclaimer paragraph
   lives in the same panel so a cropped screenshot cannot separate a number from
   the fact that it is not his. */
/* No card, no box, no side-by-side grid: two stats that happened to look
   identical once they were both dropped in matching bordered tiles, whatever
   the text inside them said. A vertical stack with a hairline between them
   reads as two distinct facts stated plainly, not a repeated template. */
.proof-stats{ display:flex; flex-direction:column; }
.proof-stat{ padding:22px 0; }
.proof-stat + .proof-stat{ border-top:1px solid var(--line); }
.proof-num{ font-family:var(--display); font-size:clamp(30px,4.5vw,40px); color:var(--accent); line-height:1; }
.proof-cap{ margin:8px auto 0; max-width:52ch; font-size:14px; color:var(--muted); }
.proof-note{ margin:26px auto 0; max-width:56ch; padding-top:22px; border-top:1px solid var(--line); }

/* ---------- objections ----------
   Three cards, not an accordion: hiding the answer behind a click just moves
   the objection to the call instead of answering it here, which is the entire
   reason to put them on the page at all. */
.objections{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:20px; max-width:var(--measure); }
.objection h3{ font-size:16px; color:var(--text); }
.objection p{ margin:8px 0 0; color:var(--muted); font-size:14.5px; line-height:1.6; }

/* ---------- the booking embed ----------
   Zoom's scheduler rather than Cal's: a plain iframe instead of a JS SDK, so
   there is no third-party script to defer and no loader state to fake. Height
   is fixed rather than aspect-ratio because the scheduler's own content does
   not reflow to the frame the way a video does; fixed-and-scrollable is the
   same trade the old Cal embed made, for the same reason. */
.book-embed{ max-width:750px; margin:28px 0 0; }
.book-frame{ width:100%; height:640px; overflow:auto; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.book-frame iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:600px){ .book-frame{ height:720px; } }
.book-fallback{ margin:14px 0 0; font-size:14px; color:var(--muted); }

/* ---------- the whatsapp aside ----------
   The single WhatsApp CTA on the page, and it is deliberately not a filled
   button. A second mint button beside the booking embed would put two calls
   to action in one glance; this stays a quiet text link so the embed keeps
   the attention it is supposed to keep. */
.wa-aside{ margin:18px 0 0; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .btn:hover, .fc:hover .fc-play span{ transform:none; }
}

/* Cookie consent — fixed to the bottom, off by default (the [hidden]
   attribute), shown once by site.js when no choice is on record yet. Sits
   above everything else on the page while it's up, but never covers the
   booking embed's own scroll area. */
.cookie-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--panel); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(0,0,0,.12);
}
.cookie-bar-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 24px; padding:16px 24px;
}
.cookie-bar p{ margin:0; max-width:52ch; font-size:13.5px; color:var(--muted); }
/* Decline used to be .btn-text: small type with an underline on hover, no
   border, no fill. Next to a solid green Accept button that reads as "not
   really a button" rather than an equal, deliberate choice -- which is the
   opposite of what a consent control is supposed to look like. All three
   choices now share one shape (bordered, padded, a real tap target); Accept
   stays the only one filled solid, so it is still the visually preferred
   action without the other two disappearing. */
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:-.01em;
  padding:0 18px; min-height:44px; border-radius:12px; cursor:pointer;
  background:transparent; border:1px solid var(--line-2); color:var(--text);
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.btn-outline:hover{ border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft); }

.cookie-actions{ display:flex; flex-wrap:wrap; gap:10px; flex:none; }
.cookie-actions .btn{ min-height:44px; padding:0 20px; font-size:14px; }

/* Below 640px the three sit in a column, each full width -- the thing "good
   and visible on mobile" actually means: a 44px-tall bar you can read and hit
   with a thumb, not three small labels competing for one row. */
@media (max-width:640px){
  .cookie-bar-inner{ flex-direction:column; align-items:stretch; text-align:center; }
  .cookie-actions{ flex-direction:column; }
  .cookie-actions .btn, .cookie-actions .btn-outline{ width:100%; }
}