/*
 * /rent-villas — adaptive layer over the Webflow export.
 *
 * No CSS framework here, deliberately. This page ships Webflow's own global
 * reset and ~200 generic class names (.container, .footer, .logo); dropping
 * Tailwind or Bootstrap on top would fight that cascade and add weight to a page
 * whose only job is conversion. Modern CSS covers everything a framework would
 * have: clamp() for fluid type, grid auto-fit for layout that adapts without
 * hand-cut breakpoints, and custom properties for one spacing scale.
 *
 * The base layout is Webflow's. This file fixes what it does badly on phones —
 * where it drives EVERY size from `html{font-size:3.3vw}`, so at 375px the root
 * lands at 12.4px and the "subheading" computes to 19.8px against a 22.3px
 * headline. Nearly the same size is why the phone layout read as a wall.
 */

:root{
  --rv-1:8px; --rv-2:14px; --rv-3:22px; --rv-4:34px; --rv-5:52px;
  --rv-gold:#CBB26A;
}

/* ---------------------------------------------------------- agent panel ---- */
.zen-agent-panel{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:13px;background:rgba(12,16,22,.42);border:1px solid rgba(255,255,255,.16);
  border-radius:20px;padding:30px 34px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  /* .hero-right is flex:0 1 auto, so it sizes to its content: without an explicit
     width the column collapsed onto the panel and the panel onto its own longest
     wrapped line, breaking the name and the CTA. 320px is the widest it can be
     before the headline beside it loses a line to a "€/mois" orphan (at 1440px). */
  width:320px;max-width:100%;margin-left:auto;
}
.zen-agent-panel__photo{width:132px;height:132px;border-radius:50%;object-fit:cover;
  border:3px solid rgba(203,178,106,.85)}
.zen-agent-panel__eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rv-gold)}
.zen-agent-panel__name{font-size:19px;font-weight:600;line-height:1.25;color:#fff;text-wrap:balance}
.zen-agent-panel__role{font-size:13px;font-weight:300;color:rgba(255,255,255,.82);margin-top:-8px}
.zen-agent-panel__badge{display:inline-flex;align-items:center;gap:7px;
  background:rgba(203,178,106,.16);border:1px solid rgba(203,178,106,.55);color:#F3E7C0;
  border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;white-space:nowrap}
.zen-agent-panel__badge svg{width:14px;height:14px;flex:0 0 auto}
.zen-agent-panel__wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;
  color:#fff;border-radius:999px;padding:11px 22px;font-size:13px;font-weight:600;
  text-decoration:none;margin-top:4px;white-space:nowrap}
.zen-agent-panel__wa:hover{filter:brightness(1.06)}

/* ------------------------------------------------------- benefit band ------ */
.zen-usp-band{background:#12161c;padding:var(--rv-4) 0}
/* auto-fit rather than repeat(4,1fr) plus a hand-cut tablet rule: the row finds
   its own column count between 4 and 1 as the viewport moves. */
.zen-usp-band__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:var(--rv-3) var(--rv-4);align-items:start}
/* Grid, not flex. Webflow puts width:100% on .num-text; as a flex-basis that
   resolved against the whole row and pushed the text past the icon, and no
   amount of flex/width overriding beat it reliably. In a grid the same 100%
   resolves against the 1fr cell, so the row composes correctly whatever Webflow
   declares on the child. */
.zen-usp-band .hero-num{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:12px;align-items:start;margin:0;max-width:none}
.zen-usp-band .num-text{max-width:100%;min-width:0;margin:0;
  font-size:14px;line-height:1.5;color:#fff;text-align:left}
.zen-usp-band .quiz-check-img{width:30px;height:30px;flex:0 0 auto;margin:0}

/* ------------------------------------------------- contact step ordering ---- */
/* The contact step's right column is a CSS grid on phones, and Webflow pins the
   phone field to grid-row 3 through a generated node-id rule
   (#w-node-_1f077b35-…{grid-area:3/1/3/2}). Reordering the markup so WhatsApp
   comes first therefore changed nothing on screen: the grid put it back.
   Releasing both groups to auto-placement makes them follow source order.

   !important is load-bearing here — the Webflow rule is an ID selector, and the
   only way to beat it without one is a hard-coded node id that regenerates
   whenever the page is re-exported. On desktop this container is not a grid at
   all, so the rule is inert there. */
.quiz-final-step-right > .form-group { grid-area: auto !important; }

/* --------------------------------------------------- language switcher ----- */
/* Flag + endonym instead of "EN / RU / FR". Two Latin capitals look identical in
   every locale, so the control that changes the language was the one element on
   the page that never spoke it. The flag is what the eye finds first and the
   name is what confirms it, so they travel together as one inline row. */
.zen-lang{display:inline-flex;align-items:center;gap:.55em;white-space:nowrap}
.zen-lang svg{
  /* Sized in em so it tracks the switcher's own type, which Webflow drives from
     the vw root and changes at every breakpoint. 3:2, the flags' own ratio. */
  width:1.5em;height:1em;flex:0 0 auto;border-radius:2px;display:block;
  /* Russian and Dutch are white at the edge and the open list is white behind
     them; the hairline is what keeps them from bleeding into it. */
  box-shadow:0 0 0 1px rgba(0,0,0,.16);
}
/* The list is absolutely positioned and Webflow gives it min-width:100% of the
   toggle — which fitted "EN" and would now wrap "Nederlands". An absolutely
   positioned block shrinks to fit its max-content, and the six links are
   inline-blocks, so as a block the list measured them as ONE 700px line. As a
   flex column it measures the widest row instead, which is the number wanted. */
.language-dropdown-list.w--open{display:flex;flex-direction:column}
/* The dotted rule under the toggle spans the flag as well as the name, which is
   the row it now underlines. */
.language-text-wrapper{display:inline-block}

/* ------------------------------------------------------------- phones ------ */
@media (max-width:767px){
  /* Type: restore a real interval between headline and subheading. clamp() keeps
     both fluid without inheriting the vw root, which is what flattened them. */
  .hero-left h1, .hero-left .h1{
    font-size:clamp(25px,6.6vw,32px);line-height:1.2;text-wrap:balance;
    margin-bottom:var(--rv-3);
  }
  .hero-left .p32{font-size:clamp(15px,4.05vw,18px);line-height:1.5;margin-bottom:var(--rv-2)}
  /* Reduce: this paragraph restates the benefit band almost word for word. It
     costs four centred lines on a phone and says nothing new. */
  .hero-left .p32.small{display:none}

  /* The CTA's inner text block was pinned to 154px inside a full-width pill, so
     the label broke mid-phrase and the disclaimer stranded "an" on its own line. */
  .catalogue-button-wrapper.mob .button-two-rows-wrapper{width:100%;max-width:none}
  .button-arrow-text.center{font-size:clamp(14px,3.85vw,17px);line-height:1.3;width:auto;text-wrap:balance}
  .disclaimer.mob, .disclaimer.mob.no-margin{font-size:clamp(10px,2.85vw,12px);line-height:1.35;white-space:nowrap}

  /* The headline began level with the bottom of the fixed header — no breathing
     room at all between the two. */
  .hero.for-quiz{padding-top:var(--rv-4)}

  /* Order inside the hero's right column (Konstantin, 2026-08-20): the agent
     card belongs directly under the subheading, before the CTA — a named face is
     the reason to press the button, so it has to be read first.
     The column is a grid whose CTA and trust line are pinned to rows 1 and 2 by
     generated node-id rules, leaving the panel to auto-place into row 3. The
     three are re-pinned here instead; !important because the rules being beaten
     are ID selectors. */
  /* The card lives in the hero's RIGHT column and the headline and subheading in
     the LEFT, so no reordering *within* a column could interleave them. Both
     columns are pure layout wrappers — no padding, background or width — so
     display:contents dissolves them and promotes all five elements into one flex
     column that can be ordered freely. align-items moves up to the parent, the
     only style either wrapper contributed.

     Spacing becomes the parent's gap instead of each element's own margin: the
     rhythm ran 34/22/39/22/12 because five components each brought their own. */
  .hero-inner{display:flex;flex-direction:column;align-items:center;gap:var(--rv-3)}
  /* Full class chains, not .hero-left/.hero-right: the theme sets these with
     .hero-right.shrink.custom-grid (three classes), which out-specifies a single
     class and quietly left the right column a grid — the columns then stacked in
     source order and every  below was ignored. */
  .hero-left.for-quiz, .hero-right.shrink.custom-grid{display:contents}
  /* .h1.mb likewise beats  (two classes vs one class + element),
     so the headline kept a 22px margin and its gap read 44 against everyone
     else's 22. */
  /* Order changed 2026-09-03. It used to run headline / agent card / subhead /
     CTA / trust line, which put the only quiz entry point at y=716 on a 375x812
     phone — inside the viewport, but underneath the consent banner, which spans
     578-812 at z-index 2147483000. Measured on the live page: the CTA was 100%
     covered (94px of 94px) and document.elementFromPoint() at its centre
     returned the banner's "Refuser" button. A visitor who saw the one quiz
     button on the first screen and tapped it declined cookies instead.

     The CTA now sits directly under the subhead at roughly y=310, clear of the
     banner, and the agent card drops below it: the card is 343px of an 812px
     screen, and it was taking the position the conversion path needed. */
  .hero-left .h1.mb                         { order:1; margin-bottom:0 }
  .hero-left .p32                           { order:2; margin-bottom:0 }
  .hero-right .catalogue-button-wrapper.mob { order:3 }
  .hero-right .disclaimer-wrapper.mob       { order:4; margin-top:0 }
  .hero-right .zen-agent-panel              { order:5; margin:0 }
  /* Zero-height leftover of the desktop CTA: harmless inside a block wrapper,
     but as a flex item it would still collect a gap on both sides. */
  .hero-left > .catalogue-button-wrapper.for-quiz{ display:none }

  /* The trust line ended flush with the hero's bottom edge, so the dark benefit
     band began right on top of it. */
  .hero.for-quiz{ padding-bottom:var(--rv-4) }

  /* The catalogue image inside the CTA is 1305x779, so at the button's own
     height it would take 126px of a 281px button. Held to 54px tall (~90px
     wide) with the label's padding reserving room beside it. */
  .catalogue-button-wrapper.mob .catalogue-button-image{height:54px;width:auto;right:10px;left:auto}
  .catalogue-button-wrapper.mob .button-arrow{padding-left:20px;padding-right:104px}

  /* Agent panel: full width, smaller portrait, room above so it stops colliding
     with the trust line and the floating buttons. */
  .zen-agent-panel{width:100%;max-width:none;margin:var(--rv-4) 0 var(--rv-3);
    padding:22px 18px;gap:10px}
  /* Bigger face, per Konstantin — 96 was timid for the one element on the
     page whose whole job is to be a person. Matches the desktop portrait. */
  .zen-agent-panel__photo{width:132px;height:132px;border-width:3px}
  /* 17px filled the panel's inner width exactly, leaving the name flush against
     both edges. 16px restores a margin and lets it break in two if it must. */
  .zen-agent-panel__name{font-size:16px;line-height:1.3}
  .zen-agent-panel__role{font-size:12px;margin-top:-6px}
  .zen-agent-panel__badge{font-size:12px;padding:6px 13px}
  .zen-agent-panel__wa{padding:12px 20px}

  /* Webflow caps each benefit item at 9rem (111px at this root) — a width tuned
     for the narrow desktop hero column. Left in place inside a full-width band it
     wrapped every promise three times and made the row 609px tall. */
  .zen-usp-band .hero-num{max-width:none;width:100%}

  /* The export reserves 148px of right padding for the catalogue image. That was
     far too much on a phone — but the image is real, and now that its srcset
     resolves it loads, so the reservation is re-sized rather than removed (see
     the rule above). */

  /* Benefit lines: the promise only. The explanatory tail is desktop-only, and
     the <br>s inside were tuned for a narrow desktop column, so they are dropped
     rather than allowed to break mid-phrase here. */
  .zen-usp__more{display:none}
  .zen-usp-band .num-text br, .hero-right .num-text br{display:none}
  .zen-usp-band{padding:var(--rv-4) 0 var(--rv-5)}
  .zen-usp-band__inner{grid-template-columns:1fr;gap:var(--rv-2)}
  .zen-usp-band .num-text{font-size:15px;line-height:1.4}
  .zen-usp-band .quiz-check-img{width:26px;height:26px}

  /* The header at 375px is logo + switcher and nothing else, and the switcher
     grew from two capitals to a flag and a word. Cap it here rather than let it
     push the logo: the names stay whole, they just stop scaling with the vw
     root. */
  .language-dropdown-toggle{padding:.5rem .7rem}
  .language-dropdown .language-text{font-size:13px}
  .zen-lang{gap:.4em}
}

/* Between phone and desktop the hero column is at its tightest — let the panel
   shrink with it rather than forcing the headline to re-wrap. */
@media (min-width:768px) and (max-width:1100px){
  .zen-agent-panel{width:280px;padding:24px 22px}
  .zen-agent-panel__photo{width:104px;height:104px}
}

@media (prefers-reduced-motion:reduce){
  .zen-agent-panel__wa{transition:none}
}

/* ---------------------------------------------------------------------------
 * Hero: the LCP element, and until 2026-09-03 the reason LCP was 4.4s.
 *
 * The Webflow export set `.main.for-quiz`'s background to the untouched camera
 * original — 6541x4361, 957KB of WebP — and painted it into a 375px-wide phone
 * viewport under a dark gradient. Two costs: the bytes, and the fact that a CSS
 * background is not discoverable until webflow.shared.css (183KB) has been
 * fetched and parsed, so the download only started once the render-blocking CSS
 * had landed.
 *
 * Fixed by re-encoding to the sizes actually painted (1920 desktop / 960 phone,
 * q72 — the gradient hides what little the quantiser loses) and by preloading
 * the matching one from <head>, which build.py emits with the same media query
 * as below. Keep the two in step: a preload whose media query disagrees with
 * the CSS downloads a second copy instead of saving the first.
 *
 * WHICH photo (Konstantin, 2026-09-03): back to `find-your-dream-home` — the
 * villa, pool and sea, which is what `.main` itself has always used and what
 * og-rent-villas.jpg was cut from, so the shared link and the page it opens now
 * show the same thing. The export's team portrait (483A7631) had replaced it
 * only on `.main.for-quiz`. hero-quiz-960/1920.webp are that portrait at these
 * same sizes; they are kept, unreferenced, so switching back is one URL each.
 *
 * The 2856x1440 source stays in assets/img/ — the thank-you page's
 * `.main.success` still names it, and it is what these were cut from.
 * -------------------------------------------------------------------------- */
.main.for-quiz,
.main.for-quiz.hr{
  background-image:linear-gradient(#0009,#0009),url(../img/hero-villa-1920.webp);
  background-position:0 0,50% 50%;
  background-repeat:repeat,no-repeat;
  background-size:auto,cover;
}
@media screen and (max-width:767px){
  .main.for-quiz,
  .main.for-quiz.hr{
    background-image:linear-gradient(#0009,#0009),url(../img/hero-villa-960.webp);
    background-position:0 0,70% 50%;
  }
}

/* ---------------------------------------------------------------------------
 * The headline was invisible on arrival.
 *
 * Webflow IX2 gives .h1.mb a scroll-linked entrance animation and writes its
 * initial state as an inline style: `opacity: 0; transform: translate3d(0, 82px,
 * 0)`. The animation is driven by scroll position, so at scrollY=0 — which is
 * where every visitor from an ad starts — it sits at frame zero and the H1
 * renders at opacity 0. Measured twice on the live French page, 8s after load,
 * no interaction, mobile and desktop alike: `opacity: 0`, while every other
 * hero element reported 1. It only fades in once the visitor scrolls, by which
 * point they have scrolled past the reason to.
 *
 * The line it was hiding is "Villas en location longue durée à Phuket — à
 * partir de 2500 €/mois": the offer and the price, on a page bought with an ad
 * that promises exactly that price.
 *
 * !important is required because IX2 sets the inline style, and it has to stay
 * on for the life of the page — IX2 rewrites that style on every scroll tick,
 * so a one-off JS reset would be undone on the next frame. The trade is losing
 * a fade nobody was seeing anyway.
 * -------------------------------------------------------------------------- */
.hero-left .h1.mb{opacity:1 !important;transform:none !important}

/* The consent banner is dismissible furniture that lands on top of the hero.
   The reorder above moves the CTA out from under it, and this keeps the card
   from growing back into that space on the narrowest phones. */
/* ---------------------------------------------------------------------------
 * The hero's two CTAs: be helped, or look for yourself.
 *
 * MATCHED, not ranked (Konstantin, 2026-09-04). An earlier cut made the gold
 * pill ~3.8x the companion's area to push clicks into the quiz; the call is to
 * present the two paths as equals and let COLOUR carry the difference — gold
 * gradient against a dark scrim — which is what "two buttons with contrasted
 * colours" asked for in the first place. So the pair is one row of two halves:
 * a two-track grid splits the width, `align-items:stretch` matches the height,
 * and both take the same padding so the two rows of text sit on the same
 * baselines. If a label ever needs a size change, change it for both.
 *
 * Grid rather than flex because flex did not actually deliver halves: with
 * `flex:1 1 0` and `min-width:0` on both, Chrome measured 359px against 424px —
 * the gold button's own content still leaking into the split. An explicit 50%
 * basis fixes it, and `repeat(2,minmax(0,1fr))` says the same thing without
 * depending on how the basis is resolved.
 *
 * That symmetry is also why the block needs `width:100%` here: .hero-left is a
 * flex column with align-items:flex-start, so left to itself the block is
 * content-width and "half each" would mean half of whatever the longer label
 * happened to be.
 *
 * The brochure image the gold button used to carry is gone (2026-09-04: it
 * competed with its own label and promised a catalogue where the action is a
 * shortlist from a person). It was also holding the button open by 11vw of
 * right padding, which is why the padding is set explicitly below.
 *
 * Sentence case, not the export's uppercase: five words in caps scan slower,
 * and this label is read, not glanced at. The arrow stays on the gold button
 * ONLY — with the sizes matched it is the one remaining cue for which path the
 * page would rather you take, and putting one on both would spend it.
 *
 * Everything is scoped under .zen-cta-pair. .button-arrow, .button-arrow-text
 * and .button-two-rows-wrapper are Webflow's own classes; the hero is their
 * only user today, and scoping keeps it that way if that ever stops being true.
 *
 * Two Webflow behaviours the wrapper has to respect at =<767px: .hero-left and
 * .hero-right are `display:contents`, so these blocks are flex items of
 * .hero-inner and need the `order` the phone CTA used to carry itself (3, i.e.
 * after the sub-headline, before the trust line); and the same element's grid id
 * carries `grid-area` on the wider layout, which build.py moves onto the wrapper.
 *
 * Below 1200px the hero's left column cannot hold two halves that still fit
 * their labels, so the row becomes a column — still matched, now in width.
 * -------------------------------------------------------------------------- */
.zen-cta-block--mob{display:none}
.zen-cta-block--desk,
.zen-cta-pair{width:100%}
/* grid-auto-rows:1fr is what keeps the two matched once they STACK: side by
   side they share a row and stretch does it, but stacked they are two rows, and
   their content is not the same height — the FREE chip's own padding makes the
   gold button's second line taller than the companion's plain one. In an
   auto-height grid, 1fr rows all take the tallest. */
.zen-cta-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;align-items:stretch;gap:1.1vw;margin-top:2.6vw}
.zen-cta-pair .catalogue-button-wrapper.for-quiz.mt,
.zen-cta-pair .catalogue-button-wrapper.mob{margin-top:0}

/* The pictograms. A headset for "a person does this", a house for the
   catalogue — both language-neutral, which is what earns them a place on a page
   that ships in seven languages where every word has to be translated twice.
   Inline SVG on currentColor: no request on the LCP element, and one glyph
   inverts between the gold's dark ink and the companion's white.

   POSITION PARITY (asked for 2026-09-04): both icons sit at the same offset from
   their button's leading edge, so the two read as one control pair rather than
   two designs. That needs the icon pulled OUT of the centred group and pinned,
   because the gold button also carries a trailing arrow: centre the whole
   contents of each and the companion's icon drifts inward by half the arrow's
   width. `position:absolute` against the pill, and matching padding on the side
   it sits, keeps both on the same vertical line at every breakpoint. */
.zen-cta-pair .button-arrow,
.zen-cta-pair .zen-cta-alt{padding-left:4.6vw}
.zen-cta-ico{position:absolute;left:2.2vw;top:50%;transform:translateY(-50%);
  flex:none;width:1.9em;height:1.9em;stroke:currentColor}
.zen-cta-alt .zen-cta-ico{opacity:.92}

/* both halves — same padding, same type scale, same everything but colour */
/* width:100% as well as height: the gold button sits inside a Webflow wrapper
   that is the flex item, so without it the half is the wrapper's and the pill
   inside shrinks to its own label — 359px against the companion's 424px. */
.zen-cta-pair .button-arrow,
.zen-cta-pair .zen-cta-alt{padding:1.9vw 2.2vw;border-radius:500px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;height:100%;border:1px solid transparent}
/* The companion's 1px border is part of its box; without a transparent one on
   the gold the two differ by a pixel wherever they stack into separate grid
   rows and stretch cannot equalise them. */
.zen-cta-pair .button-arrow-text{text-transform:none;font-weight:700;font-size:1.35em;
  white-space:normal;line-height:1.2}
.zen-cta-pair .button-two-rows-wrapper{align-items:center;text-align:center;gap:.4em}
.zen-cta-pair .disclaimer{display:flex;align-items:center;justify-content:center;gap:.5em;
  font-size:.95em;font-weight:500;opacity:1}
.zen-cta-arrow{flex:none;margin-left:.8em;font-size:1.3em;font-weight:600;line-height:1}
.zen-chip{background:var(--black);color:var(--gradient-3);border-radius:999px;
  padding:.28em .7em;font-size:.85em;font-weight:700;letter-spacing:.06em;line-height:1}

/* The companion's colour. It reads as a real button, not a hole cut in the
   photo: at .42 the pool showed through and the pill dissolved wherever the
   water went bright, which is the one place a second CTA cannot afford to be
   uncertain. .88 keeps it a dark surface with just enough of the hero behind
   it to belong to the image, and the blur stops any remaining detail from
   fighting the label. Deliberately NOT opaque — a solid slab would read as a
   card dropped on the hero rather than a control. */
.zen-cta-alt{text-decoration:none;color:var(--white);background:rgba(12,16,22,.88);
  border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(6px);
  transition:background .3s,border-color .3s;position:relative}
.zen-cta-alt:hover{background:rgba(12,16,22,.96);border-color:var(--white)}
.zen-cta-pair .zen-cta-alt .disclaimer{opacity:.8}
.zen-num{color:var(--white);font-weight:700}

.zen-cta-note{margin-top:.9vw;opacity:.6}

@media screen and (min-width:768px) and (max-width:1199px){
  .zen-cta-pair{grid-template-columns:minmax(0,1fr);gap:.9vw}
  .zen-cta-pair .button-arrow,
  .zen-cta-pair .zen-cta-alt{padding:1.5vw 2vw;padding-left:5.2vw}
  .zen-cta-ico{left:2.4vw}
}
@media screen and (max-width:767px){
  .zen-cta-block--desk{display:none}
  .zen-cta-block--mob{display:block;order:3;width:100%}
  /* No margin here. At =<767px .hero-left/.hero-right are display:contents, so
     this block is a flex item of .hero-inner and that flex already spaces the
     hero by 22px — the 2rem carried over from the desktop rule was stacked on
     top of it, leaving 54px of dead photo between the sub-headline and the
     first button on a screen that has none to spare. */
  .zen-cta-pair{grid-template-columns:minmax(0,1fr);gap:.75rem;margin-top:0}
  .zen-cta-pair .catalogue-button-wrapper.mob{order:0}

  /* Hidden on the phone, kept in the DOM (Konstantin, 2026-09-04). Two lines
     that cost more vertical space than they earn on a 412px screen, where the
     hero has to get a visitor to a button before the fold. CSS rather than a
     markup change so both still ship to crawlers and screen readers, and so
     turning either back on is one line.

     Note that .zen-cta-note is the page's ONLY statement of the one-year
     minimum. Desktop still shows it; a phone visitor now meets that term for
     the first time in the conversation with an agent. */
  .zen-cta-block--mob .zen-cta-note{display:none}
  .disclaimer-wrapper.mob{display:none}
  .zen-cta-pair .button-arrow.mob,
  .zen-cta-pair .zen-cta-alt{padding:1.15rem 1.4rem;padding-left:3.4rem}
  .zen-cta-ico{left:1.3rem;width:1.7em;height:1.7em}
  .zen-cta-pair .button-arrow-text{font-size:clamp(15px,4.1vw,18px);line-height:1.25}
  .zen-cta-pair .disclaimer{font-size:.78rem}
  .zen-cta-arrow{margin-left:.6em}
  .zen-cta-note{font-size:.7rem;margin-top:.8rem;text-align:center}
}