/* ==========================================================================
   Rebrand — "Rebrand 2.0" prototype styles
   -----------------------------------------------------------------------
   Completely isolated from css/design-system.css and every class used by
   index.html / p.html / etc. Nothing here is imported by, or overrides,
   any production stylesheet — this file is only ever linked from
   /rebrand-2/index.html, a hidden route with no inbound links from the
   live site. Every selector is scoped under the `r2-` prefix.

   v2 palette: warm cream + terracotta accent + serif display type (PT
   Serif, loaded in index.html), replacing the darker ink/gold treatment
   of the first full-page pass, per a second reference mockup preferred
   for desktop. Responsive from phone widths up (mobile-first), no
   desktop-only gate. Breakpoints checked: 390 / 768 / 1024 / 1366 / 1440 /
   1920. No laptop/phone device imagery anywhere in this file — the hero
   is a real photo used as a CSS background-image under real HTML content.
   ========================================================================== */

/* Smooth in-page scrolling for the footer's #pricing/#faq anchors (and any
   other same-page anchor). Scoped to :root, not .r2-root, since it's the
   document element that actually scrolls — harmless on this isolated page
   only (this file is never loaded elsewhere). */
:root{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
}

.r2-root{
  --r2-ink:#1E1A17;
  --r2-cream:#FAF6F1;
  --r2-white:#ffffff;
  --r2-accent:#BC5E3A;
  --r2-accent-soft:rgba(188,94,58,.12);
  --r2-on-dark-muted:rgba(250,246,241,.66);
  --r2-on-dark-border:rgba(250,246,241,.14);
  --r2-on-dark-surface:rgba(250,246,241,.06);
  --r2-ink-muted:rgba(30,26,23,.6);
  --r2-ink-border:rgba(30,26,23,.1);
  --r2-font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --r2-font-serif:'PT Serif',Georgia,'Times New Roman',serif;

  background:var(--r2-cream);
  color:var(--r2-ink);
  font-family:var(--r2-font-sans);
}

.r2-root *{box-sizing:border-box}
.r2-root img{max-width:100%;display:block}

/* ---- Shared bits ------------------------------------------------------ */
.r2-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--r2-accent);margin-bottom:14px;
}
.r2-eyebrow-on-photo{color:var(--r2-white);opacity:.92;text-shadow:0 1px 6px rgba(20,12,6,.35)}
.r2-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--r2-accent);flex-shrink:0}

.r2-h2{
  font-family:var(--r2-font-serif);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(26px,4vw,40px);line-height:1.16;margin:0 0 14px;color:var(--r2-ink);
}
.r2-h2-light{color:var(--r2-white)}

.r2-section-head{max-width:640px;margin:0 auto 36px;text-align:center;padding:0 20px}
.r2-section-sub{font-size:15px;line-height:1.6;color:var(--r2-ink-muted);margin:0}

.r2-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  background:var(--r2-accent);color:var(--r2-white);border:none;border-radius:100px;text-decoration:none;
  padding:0 22px;height:46px;font-size:14.5px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.r2-btn:hover{background:#a94f2f;transform:translateY(-1px);box-shadow:0 8px 20px rgba(188,94,58,.28)}
.r2-btn svg{flex-shrink:0}
.r2-btn-block{width:100%}

/* Hero / final-CTA search: one rounded pill, input flush inside it, the
   button inset on the right — not two separate elements. */
.r2-form-pill{
  display:flex;align-items:center;gap:6px;max-width:520px;margin:0 auto 8px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.5);
  border-radius:100px;padding:6px 6px 6px 20px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.r2-form-pill .r2-input{
  flex:1;min-width:0;background:transparent;border:none;padding:10px 6px;
  font-size:14.5px;color:var(--r2-ink);font-family:inherit;outline:none;
}
.r2-form-pill .r2-input::placeholder{color:rgba(30,26,23,.45)}
.r2-form-pill .r2-btn{height:42px}
.r2-form-pill-final{background:var(--r2-cream);border-color:var(--r2-ink-border);box-shadow:none}
.r2-form-pill-final .r2-input{color:var(--r2-ink)}

.r2-form-msg{font-size:12.5px;color:rgba(250,246,241,.7);margin:0 0 6px;min-height:1em;text-align:center}
.r2-form-msg-error{color:#ffb4a0}
.r2-final-cta .r2-form-msg{color:rgba(30,26,23,.55)}
.r2-final-cta .r2-form-msg-error{color:#a3341c}

/* ============================= HERO ==================================== */
.r2-hero{
  position:relative;overflow:hidden;color:var(--r2-white);
  min-height:100svh;display:flex;flex-direction:column;
  padding:18px 20px 56px;
}
.r2-hero-bg{
  position:absolute;inset:0;
  background-image:url('/public/assets/rebrand-2/hero-coastal.jpg');
  background-size:cover;background-position:65% 55%;
  /* Lift the photo itself rather than leaning on a heavy scrim — a touch
     more light, color and life in the sea/sky/greenery/stone before any
     overlay is added on top. */
  filter:brightness(1.06) saturate(1.12) contrast(1.02);
}
/* Soft, warm (not black) scrim — brightest through the middle of the
   photo where the sea/sky/greenery read, gently deepening only at the
   very top (nav legibility) and bottom (headline legibility). Readability
   comes mostly from the text-shadow on the copy below, not from darkening
   the image, so the photo keeps its natural Mediterranean light. */
.r2-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,16,7,.22) 0%,rgba(28,16,7,.02) 22%,rgba(28,16,7,.06) 48%,rgba(28,16,7,.26) 76%,rgba(28,16,7,.48) 100%);
}

.r2-nav{
  position:relative;z-index:2;max-width:1360px;width:100%;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.r2-brand{
  font-family:var(--r2-font-serif);font-weight:700;font-size:21px;color:var(--r2-white);text-decoration:none;
  text-shadow:0 1px 6px rgba(20,12,6,.35);
}

.r2-nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:8px;border:1px solid var(--r2-on-dark-border);
  background:rgba(255,255,255,.08);color:var(--r2-white);cursor:pointer;
}

.r2-nav-links{
  position:absolute;top:100%;left:0;right:0;margin-top:10px;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(30,20,14,.97);border:1px solid var(--r2-on-dark-border);border-radius:14px;
  padding:8px;max-height:0;overflow:hidden;opacity:0;pointer-events:none;
  transition:max-height .22s ease,opacity .18s ease;
}
.r2-nav-links-open{max-height:340px;opacity:1;pointer-events:auto}
.r2-nav-links a{
  color:var(--r2-white);text-decoration:none;font-size:14px;font-weight:600;
  padding:11px 12px;border-radius:8px;
}
.r2-nav-links a:hover{background:rgba(255,255,255,.08)}
.r2-nav-links .r2-nav-cta{color:var(--r2-white);background:var(--r2-accent);text-align:center;margin-top:4px}

.r2-hero-content{position:relative;z-index:2;max-width:680px;width:100%;margin:auto auto 0;padding:12vh 0 0;text-align:center}

.r2-headline{
  font-family:var(--r2-font-serif);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(38px,7.5vw,58px);line-height:1.12;margin:0 0 14px;color:var(--r2-white);
  text-shadow:0 2px 20px rgba(20,12,6,.4),0 1px 4px rgba(20,12,6,.3);
}

.r2-tagline{
  font-family:var(--r2-font-sans);font-weight:700;font-size:clamp(17px,2.4vw,20px);
  color:var(--r2-white);margin:0 0 10px;
  text-shadow:0 1px 10px rgba(20,12,6,.35);
}

.r2-subhead{
  font-size:15px;line-height:1.6;color:rgba(250,246,241,.92);
  margin:0 auto 28px;max-width:420px;
  text-shadow:0 1px 8px rgba(20,12,6,.32);
}

.r2-microcopy{font-size:12.5px;color:rgba(250,246,241,.75);margin:0;text-shadow:0 1px 5px rgba(20,12,6,.3)}

/* ========================== LIVE COUNTER =============================== */
.r2-counter{
  background:var(--r2-cream);border-top:1px solid var(--r2-ink-border);border-bottom:1px solid var(--r2-ink-border);
  padding:26px 20px;text-align:center;
}
.r2-counter-eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--r2-accent);margin-bottom:12px;
}
.r2-counter-row{
  max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:14px 0;
}
.r2-counter-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 22px}
.r2-counter-num{font-family:var(--r2-font-serif);font-size:30px;font-weight:700;color:var(--r2-ink);font-variant-numeric:tabular-nums}
.r2-counter-label{font-size:12px;color:var(--r2-ink-muted)}
.r2-counter-sep{width:1px;align-self:stretch;background:var(--r2-ink-border);min-height:38px}
/* 1,000+ properties rebranded is the strongest visual metric -- larger
   number, accent color, slightly bolder label -- the other two stay the
   base treatment above. */
.r2-counter-item-primary .r2-counter-num{font-size:38px;color:var(--r2-accent)}
.r2-counter-item-primary .r2-counter-label{font-weight:600;color:var(--r2-ink)}

/* ============================ COMPARE =================================== */
/* Real screenshots (see the HTML comment above this section) presented as
   plain floating cards -- no browser frame of our own, no recreated UI.
   Height-tightening pass: every vertical measurement below scales off
   viewport HEIGHT (clamp(...,Nvh,...)), not width -- what actually
   determines whether this fits one screen -- so it's genuinely tight at
   768px-tall viewports (1366x768) and eases open on taller ones
   (1440x900, 1920x1080) without a separate fixed value per breakpoint.
   Card width (which drives image height via their fixed aspect-ratio)
   uses the same vh-based clamp for the same reason. Only spacing and
   card size move here -- type sizes, copy and the screenshots themselves
   are untouched, per instruction not to redesign the section. */
.r2-compare{
  background:var(--r2-cream);
  padding:clamp(20px,6vh,64px) 20px clamp(24px,6.5vh,64px);
}
.r2-compare .r2-section-head{margin-bottom:clamp(12px,3vh,36px)}
.r2-compare-row{
  max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,3vh,32px);
}
.r2-compare-col{
  width:100%;max-width:clamp(300px,58vh,560px);
  --r2-annotate-space:clamp(22px,4vh,38px);
}
.r2-compare-col-head{text-align:center;margin-bottom:clamp(6px,1.6vh,16px)}
.r2-compare-title{font-family:var(--r2-font-serif);font-size:19px;font-weight:700;color:var(--r2-ink)}
.r2-compare-title-accent{color:var(--r2-accent)}
.r2-compare-subtitle{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--r2-ink-muted);margin-top:4px;
}
.r2-compare-subtitle-accent{color:var(--r2-accent);opacity:.85}

.r2-shot-stack{display:flex;flex-direction:column;gap:clamp(6px,1.6vh,14px);position:relative}
.r2-shot-stack-annotated{margin-top:var(--r2-annotate-space)}
.r2-shot-card{
  border-radius:10px;overflow:hidden;background:var(--r2-cream);
  border:1px solid rgba(30,26,23,.08);box-shadow:0 10px 28px rgba(30,20,10,.1);
}
.r2-shot-card img{width:100%;height:auto;display:block}
.r2-shot-card-accent{box-shadow:0 14px 34px rgba(188,94,58,.16);border-color:rgba(188,94,58,.18)}

.r2-compare-arrow{color:var(--r2-accent);transform:rotate(90deg)}

/* External annotation -- explanatory marketing UI, deliberately OUTSIDE
   and above the screenshot (never overlaid on/inside it): a small label
   plus a thin curved arrow pointing down toward the real logo's position
   (top-left of the Rebrand hero screenshot, masked in the image itself).
   Anchored with the same --r2-annotate-space the reserved margin above
   uses, so the two stay in sync as that space tightens/eases per viewport. */
.r2-annotate{
  position:absolute;top:calc(-1 * var(--r2-annotate-space));left:6px;
  display:flex;flex-direction:column;align-items:flex-start;pointer-events:none;
}
.r2-annotate-label{
  font-family:var(--r2-font-serif);font-style:italic;font-size:12.5px;color:var(--r2-accent);
  white-space:nowrap;margin-bottom:1px;
}
.r2-annotate-arrow{display:block;margin-left:2px;width:auto;height:var(--r2-annotate-space)}

/* ============================== STEPS ==================================== */
/* Viewport-fit pass: the complete section (heading + all three cards)
   must fit one mobile viewport, so every vertical measurement here scales
   off viewport HEIGHT the same way the comparison section above does --
   tightest at short viewports, easing open on taller ones. Card padding,
   icon size and type sizes are all reduced from the previous pass too
   (icon 40px->28px, num 28px->22px, title 18px->16px, text 14px->13px)
   per the explicit "reduce card height, icon size and spacing" brief --
   these are r2-step-* classes only, not the shared .r2-h2/.r2-eyebrow
   used elsewhere, so no other section is affected. */
.r2-steps{background:var(--r2-white);padding:clamp(24px,6vh,64px) 20px}
.r2-steps .r2-section-head{margin-bottom:clamp(12px,3vh,36px)}
.r2-steps-row{
  max-width:1100px;margin:0 auto;display:flex;flex-direction:column;
  gap:clamp(8px,1.6vh,16px);
}
.r2-step{
  background:var(--r2-cream);border-radius:14px;
  padding:clamp(12px,2.4vh,20px) 18px;
  border:1px solid var(--r2-ink-border);position:relative;
}
.r2-step-num{
  font-family:var(--r2-font-serif);font-weight:700;color:var(--r2-accent);line-height:1;
  font-size:clamp(18px,3.6vh,22px);margin-bottom:clamp(4px,1vh,8px);
}
.r2-step-icon{
  position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;
  background:var(--r2-accent-soft);color:var(--r2-ink);display:flex;align-items:center;justify-content:center;
}
.r2-step-icon svg{width:15px;height:15px}
.r2-step-title{font-family:var(--r2-font-serif);font-size:16px;font-weight:700;margin:0 0 4px;padding-right:40px}
.r2-step-text{font-size:13px;line-height:1.5;color:var(--r2-ink-muted);margin:0}

/* =================== "YOUR BRAND, NOT THEIRS" SECTION =================== */
/* Text-led benefit section (final-brief pass): the previous contact-card
   mockup is gone. Reuses the real hero photo as its own background (same
   asset, hero-coastal.jpg — not a new one) with a scrim, so the section
   continues the hero's warm coastal mood instead of a separate flat-ink
   "editorial" look, matching the reference mockup's direction. */
.r2-brandsec{position:relative;overflow:hidden;color:var(--r2-white);padding:clamp(40px,8vh,88px) 20px}
.r2-brandsec-bg{
  position:absolute;inset:0;
  background-image:url('/public/assets/rebrand-2/hero-coastal.jpg');
  background-size:cover;background-position:50% 60%;
  filter:brightness(.9) saturate(1.05);
}
.r2-brandsec-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,12,6,.62) 0%,rgba(20,12,6,.72) 100%);
}
.r2-brandsec-inner{position:relative;z-index:2;max-width:480px;margin:0 auto}

.r2-brandsec-headline{
  font-family:var(--r2-font-serif);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(28px,4.4vw,42px);line-height:1.16;margin:0 0 14px;color:var(--r2-white);
  text-shadow:0 2px 16px rgba(20,12,6,.4);
}
.r2-headline-accent{color:var(--r2-accent)}

.r2-brandsec-text{
  font-size:15px;line-height:1.7;color:rgba(250,246,241,.88);margin:0 0 26px;
  text-shadow:0 1px 8px rgba(20,12,6,.3);
}

.r2-brandsec-list{margin:0 0 26px;padding:0;list-style:none;display:flex;flex-direction:column}
.r2-brandsec-list li{
  display:flex;align-items:flex-start;gap:14px;padding:14px 0;
  border-bottom:1px solid rgba(250,246,241,.14);
}
.r2-brandsec-list li:first-child{padding-top:0}
.r2-brandsec-list li:last-child{border-bottom:none;padding-bottom:0}
.r2-brandsec-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  border:1.5px solid rgba(188,94,58,.55);background:rgba(188,94,58,.12);color:var(--r2-accent);
  display:flex;align-items:center;justify-content:center;
}
.r2-brandsec-item-text{display:flex;flex-direction:column;gap:2px;padding-top:2px}
.r2-brandsec-item-title{font-size:14.5px;font-weight:700;color:var(--r2-white)}
.r2-brandsec-item-desc{font-size:13px;line-height:1.5;color:rgba(250,246,241,.75)}

.r2-brandsec-highlight{
  display:flex;align-items:center;gap:14px;
  background:rgba(250,246,241,.08);border:1px solid rgba(250,246,241,.16);
  border-radius:14px;padding:14px 18px;
}
.r2-brandsec-highlight-icon{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:rgba(188,94,58,.16);color:var(--r2-accent);
  display:flex;align-items:center;justify-content:center;
}
.r2-brandsec-highlight-text{display:flex;flex-direction:column;gap:2px}
.r2-brandsec-highlight-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--r2-accent);
}
.r2-brandsec-highlight-line{font-size:13.5px;font-weight:600;color:var(--r2-white)}

/* ==================== PRICING / FAQ / FINAL CTA / FOOTER ================== */
.r2-pricing{background:var(--r2-ink);color:var(--r2-white);padding:64px 20px 0}

/* Warm dark espresso, not pure black, so the card reads as part of the
   same warm coastal palette as the hero rather than a separate flat-black
   "tech" surface -- still dark enough for the white/terracotta text above
   it to read clearly. */
.r2-pricing-card{
  max-width:400px;margin:0 auto clamp(40px,7vh,64px);text-align:center;padding:32px 26px;
  background:#241812;border-radius:20px;border:1px solid rgba(188,94,58,.38);
}
.r2-pricing-pill{
  display:inline-block;font-size:12px;font-weight:700;color:var(--r2-white);
  background:var(--r2-accent);border-radius:100px;padding:5px 14px;margin:10px 0 14px;
}
.r2-pricing-text{font-size:13.5px;color:var(--r2-on-dark-muted);max-width:300px;margin:0 auto 22px;line-height:1.6}
.r2-pricing-list{list-style:none;margin:0 auto 26px;padding:0;max-width:260px;display:flex;flex-direction:column;gap:10px;text-align:left}
.r2-pricing-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(250,246,241,.82)}
.r2-pricing-list li svg{color:var(--r2-accent);flex-shrink:0}
.r2-pricing-footnote{margin-top:12px;font-size:12px;color:rgba(250,246,241,.45)}

.r2-faq{max-width:640px;margin:0 auto 64px;text-align:center}
.r2-faq-list{max-width:560px;margin:28px auto 0;text-align:left}
.r2-faq-item{border-bottom:1px solid var(--r2-on-dark-border);padding:16px 0}
.r2-faq-item summary{
  font-size:14.5px;font-weight:600;color:var(--r2-white);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.r2-faq-item summary::-webkit-details-marker{display:none}
.r2-faq-item summary::after{content:'+';color:var(--r2-accent);font-size:19px;font-weight:400;flex-shrink:0;transition:transform .2s ease}
.r2-faq-item[open] summary::after{transform:rotate(45deg)}
.r2-faq-answer{margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--r2-on-dark-muted)}
.r2-faq-answer a{color:var(--r2-accent);text-decoration:underline}

.r2-final-cta{max-width:520px;margin:0 auto clamp(28px,5vh,40px);text-align:center}
.r2-final-cta-sub{font-size:13.5px;color:rgba(250,246,241,.7);margin:10px 0 0;line-height:1.5}
.r2-form-pill-final{margin:20px auto 8px}

.r2-footer{max-width:1360px;margin:0 auto;padding:20px 0 28px;text-align:center;border-top:1px solid var(--r2-on-dark-border)}
.r2-footer-wordmark{font-family:var(--r2-font-serif);font-size:20px;font-weight:700;color:var(--r2-white)}
.r2-footer-tagline{font-size:12.5px;color:rgba(250,246,241,.5);margin-top:6px}
.r2-footer-links{font-size:12.5px;margin-top:14px}
.r2-footer-links a{color:rgba(250,246,241,.7);text-decoration:none}
.r2-footer-links a:hover{color:var(--r2-accent)}
.r2-footer-copy{font-size:11px;color:rgba(250,246,241,.35);margin-top:14px}

/* ============================ BREAKPOINTS ================================= */

/* Small phones: tighten hero vertical rhythm a touch */
@media (max-width:380px){
  .r2-hero{padding:14px 16px 40px}
  .r2-headline{font-size:clamp(32px,10vw,40px)}
}

/* Tablet and up */
@media (min-width:640px){
  .r2-compare-row{flex-direction:row;justify-content:center;align-items:center;gap:20px}
  .r2-compare-arrow{transform:none}
}

@media (min-width:768px){
  .r2-steps-row{flex-direction:row}
  .r2-step{flex:1}
}

/* Desktop nav: inline links, no hamburger */
@media (min-width:900px){
  .r2-nav-toggle{display:none}
  .r2-nav-links{
    position:static;flex-direction:row;align-items:center;gap:26px;
    background:none;border:none;padding:0;max-height:none;opacity:1;pointer-events:auto;overflow:visible;
  }
  .r2-nav-links a{padding:0;font-weight:600}
  .r2-nav-links .r2-nav-cta{
    background:var(--r2-accent);padding:10px 18px;border-radius:100px;margin-top:0;
  }
  .r2-nav-links .r2-nav-cta:hover{background:#a94f2f}
}

@media (min-width:1024px){
  .r2-hero-bg{background-position:60% 50%}
}

/* Mobile-only (2026-09 brief): tighten the vertical gap between the
   stats counter and "How it works", and between that section's own
   heading and its step cards, so both sections read as one compact,
   efficient block just after the hero instead of feeling loosely
   spaced out -- horizontal padding/type sizes/colors are untouched,
   only the vertical rhythm on this one breakpoint. Tablet/desktop keep
   their existing vh-based clamp()s exactly as they were. */
@media (max-width:599px){
  .r2-counter{padding:16px 20px}
  .r2-steps{padding-top:14px}
  .r2-steps .r2-section-head{margin-bottom:14px}
}


@media (prefers-reduced-motion:reduce){
  .r2-btn{transition:none!important}
  .r2-nav-links{transition:none!important}
}