/* ======================================================================
   RECILENS — layout.css
   The page-level layout the v2 templates use. Depends on tokens.css and
   components.css; defines no colour, radius, duration or z-index of its own.
   ====================================================================== */

/* ---------------------------------------------------------------- blocks */
.rc-section{ padding-block:64px; position:relative; }
@media (min-width:768px){ .rc-section{ padding-block:96px; } }
@media (min-width:1280px){ .rc-section{ padding-block:128px; } }

.rc-alt{ background:var(--surface-2); }
.rc-wrap{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.rc-narrow{ max-width:760px; }

.rc-h2{ font-family:var(--font-display); font-size:var(--fs-39); font-weight:400;
        line-height:1.05; text-wrap:balance; margin:0 0 32px; }
.rc-muted{ color:var(--text-2); }
.rc-note{ color:var(--text-2); font-size:var(--fs-14); margin-top:24px; }
.rc-opt{ color:var(--text-2); font-weight:400; }

/* Grids. min-width:0 on the children is not optional - a grid item defaults
   to min-width:auto and an <input> or a long word then pushes the track wider
   than the column, which scrolls the whole page sideways. */
.rc-grid{ display:grid; gap:24px; }
.rc-grid>*{ min-width:0; }
.rc-g2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.rc-g3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.rc-pad{ padding:24px; }

/* ------------------------------------------------------------------ hero */
.rc-hero{ padding-block:80px 64px; }
@media (min-width:1024px){ .rc-hero{ padding-block:128px 96px; } }
.rc-hero-h{ font-family:var(--font-display); font-weight:400; line-height:1.05;
  font-size:var(--fs-61); margin:0; text-wrap:balance; max-width:18ch; }
@media (min-width:1024px){ .rc-hero-h{ font-size:var(--fs-76); } }
.rc-hero-sub{ margin-top:24px; font-size:var(--fs-20); color:var(--text-2);
  max-width:56ch; }
.rc-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.rc-cta-row>*{ min-width:0; }

.rc-cta-band{ background:var(--surface-2); text-align:left; }
.rc-cta-band .rc-h2{ margin-bottom:12px; }

/* ------------------------------------------------------------ who it is for */
.rc-notfor{ margin-top:32px; padding-left:16px; border-left:2px solid var(--royal);
  color:var(--text-2); font-size:var(--fs-14); max-width:70ch; }

/* ---------------------------------------------------------- deliverables */
.rc-deliver{ list-style:none; margin:0; padding:0; }
.rc-deliver li{ display:flex; gap:12px; align-items:flex-start;
  padding:16px; background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-md); }
.rc-tick{ flex:0 0 auto; width:20px; height:20px; margin-top:2px;
  border-radius:50%; border:1.5px solid var(--royal); position:relative; }
.rc-tick::after{ content:""; position:absolute; left:5px; top:8px;
  width:8px; height:4px; border-left:1.5px solid var(--royal);
  border-bottom:1.5px solid var(--royal); transform:rotate(-45deg); }

/* ----------------------------------------------------------------- stack */
.rc-stack{ list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px; }
.rc-chip{ font-size:var(--fs-14); padding:8px 14px; border-radius:999px;
  border:1px solid var(--hairline); color:var(--text-2); background:var(--surface); }

/* --------------------------------------------------------------- process */
.rc-steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.rc-steps>li{ min-width:0; display:grid; gap:16px; align-items:start;
  grid-template-columns:auto 1fr; padding:24px; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--r-md); }
@media (min-width:768px){
  .rc-steps>li{ grid-template-columns:auto 1fr auto; }
}
.rc-step-n{ font-family:var(--font-display); font-size:var(--fs-31);
  color:var(--royal); line-height:1; font-variant-numeric:tabular-nums; }
.rc-step-t{ font-size:var(--fs-12); color:var(--text-2);
  font-variant-numeric:tabular-nums; grid-column:2; }
@media (min-width:768px){ .rc-step-t{ grid-column:3; white-space:nowrap; } }
.rc-steps h3{ margin:0 0 4px; }
.rc-need{ margin-top:8px; font-size:var(--fs-14); color:var(--text-2); }
.rc-need strong{ color:var(--text); font-weight:600; }

/* -------------------------------------------------------------- currency */
.rc-currency{ margin-top:32px; padding:16px 20px; border-radius:var(--r-md);
  border:1px solid var(--hairline); background:var(--surface);
  color:var(--text-2); font-size:var(--fs-14); max-width:none; }

/* --------------------------------------------------------------- related */
.rc-related{ list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 32px; }

/* ----------------------------------------------------------------- modal */
.rc-modal-root{ position:fixed; inset:0; z-index:var(--z-backdrop);
  display:grid; place-items:center; padding:var(--gutter); }
.rc-modal-root[hidden]{ display:none; }   /* [hidden] loses to any author display */
.rc-modal-root .rc-backdrop{ position:absolute; inset:0;
  background:rgba(11,16,32,.45); backdrop-filter:blur(8px); }
@supports not (backdrop-filter:blur(8px)){
  .rc-modal-root .rc-backdrop{ background:rgba(11,16,32,.72); }
}
.rc-modal{ position:relative; z-index:var(--z-modal);
  width:min(480px,100%); max-height:calc(100dvh - 2*var(--gutter));
  overflow-y:auto; background:var(--surface); color:var(--text);
  border-radius:var(--r-md); padding:24px; box-shadow:var(--shadow-3);
  padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
.rc-modal-title{ font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-31); line-height:1.05; margin:0; }
.rc-modal-sub{ color:var(--text-2); font-size:var(--fs-14); margin-top:8px; }
.rc-lead-form{ display:grid; gap:16px; margin-top:24px; }
.rc-lead-form>*{ min-width:0; }
.rc-modal-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.rc-modal-alt{ font-size:var(--fs-14); color:var(--text-2); }
.rc-form-status:empty{ display:none; }
html.rc-locked{ overflow:hidden; }

/* ---------------------------------------------------------- empty states */
.rc-empty{ border:1px dashed var(--hairline); border-radius:var(--r-md);
  padding:32px 24px; display:grid; gap:12px; justify-items:start;
  background:var(--surface); }
.rc-empty h3{ margin:0; }

/* ------------------------------------------------------------ watermarks */
/* Maximum two per section, and the wordmark ghost once per page. These are
   painted with gradients and a repeating-linear-gradient rather than an
   <img>, so they cost no request and cannot 404. */
[data-wm]{ isolation:isolate; }
[data-wm]::before{ content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none; }
[data-wm] > *{ position:relative; z-index:1; }
[data-wm="grid"]::before{
  background-image:linear-gradient(to right,var(--hairline) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--hairline) 1px,transparent 1px);
  background-size:64px 64px; }
[data-wm="dispersion"]::before{
  background:linear-gradient(115deg,var(--prism-a),var(--prism-b));
  opacity:.03; }

/* ======================================================================
   MOTION — the resting state is the finished state.

   Every rule below is gated on data-motion, and the document ships
   data-motion="c". So with JavaScript off, on 2g, or with reduced-motion
   set, none of this applies and the page is simply already there. Nothing
   is parked at opacity 0 waiting for an observer that may never run.
   ====================================================================== */

[data-motion="a"] .rc-reveal,
[data-motion="b"] .rc-reveal,
[data-motion="a"] .rc-rack,
[data-motion="b"] .rc-rack{
  opacity:0; transform:translateY(24px);
  transition:opacity var(--t-lg) var(--ease), transform var(--t-lg) var(--ease),
             filter var(--t-lg) var(--ease);
}
/* The focus rack: enters slightly out of focus and snaps sharp crossing the
   fold. This is the move that replaces fade-up-on-everything. */
[data-motion="a"] .rc-rack{ filter:blur(6px); transform:translateY(24px) scale(.96); opacity:.4; }

[data-motion="a"] .rc-in,
[data-motion="b"] .rc-in{ opacity:1; transform:none; filter:none; }

.rc-rail{ position:fixed; top:0; left:0; right:0; height:2px;
  background:var(--royal); transform:scaleX(0); transform-origin:0 50%;
  z-index:var(--z-sticky); pointer-events:none; }

/* Ripple from the pointer coordinate. The label sits in its own layer, so
   it never moves. */
.rc-btn{ position:relative; overflow:hidden; }
.rc-btn > *{ position:relative; z-index:1; }
.rc-btn.rc-rip::after{
  content:""; position:absolute; left:var(--rx,50%); top:var(--ry,50%);
  width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:currentColor; opacity:.35; z-index:0;
  animation:rc-rip var(--t-md) var(--ease) forwards;
}
@keyframes rc-rip{ to{ transform:scale(28); opacity:0; } }

/* Video facade: a poster and a play button until the visitor asks for it. */
.rc-video{ position:relative; aspect-ratio:16/9; border-radius:var(--r-md);
  overflow:hidden; background:var(--surface-2); cursor:pointer; }
.rc-video img{ width:100%; height:100%; object-fit:cover; }
.rc-video iframe{ width:100%; height:100%; border:0; display:block; }
.rc-play{ position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:var(--on-accent); display:grid; place-items:center; }
.rc-play:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.rc-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--surface-2); }
.rc-thumb img{ width:100%; height:100%; object-fit:cover; }
.rc-card-h{ font-family:var(--font-body); font-size:var(--fs-20);
  font-weight:600; line-height:1.3; margin:0; }
.rc-figure{ width:100%; border-radius:var(--r-md); }
.rc-tight{ padding-block:0; }
.rc-steps.rc-plain > li{ grid-template-columns:auto 1fr; }

/* Authored HTML from the CMS. Scoped so the legal and blog bodies inherit
   the type scale without every page needing its own rules. */
.rc-prose h2{ font-family:var(--font-display); font-size:var(--fs-31);
  font-weight:400; margin:48px 0 16px; }
.rc-prose h3{ font-size:var(--fs-20); margin:32px 0 12px; }
.rc-prose p,.rc-prose li{ color:var(--text-2); max-width:68ch; }
.rc-prose p{ margin:0 0 16px; }
.rc-prose ul,.rc-prose ol{ margin:0 0 16px; padding-left:24px; }
.rc-prose a{ color:var(--text); text-decoration:underline;
  text-decoration-color:var(--royal); text-underline-offset:3px; }
.rc-prose table{ width:100%; border-collapse:collapse; font-size:var(--fs-14); }
.rc-prose td,.rc-prose th{ padding:12px; border-bottom:1px solid var(--hairline);
  text-align:left; }

/* The lens sequence. Pinned side by side at 1024 and above; three stacked
   stills below, which is the approved call rather than a scaled-down pin. */
.rc-lens-steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.rc-lens-steps > li{ min-width:0; display:grid; grid-template-columns:auto 1fr;
  gap:16px; padding:24px; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--r-md); }
@media (min-width:1024px){
  .rc-lens-steps{ grid-template-columns:repeat(3,1fr); gap:24px; }
  .rc-lens-steps > li{ grid-template-columns:1fr; }
}
.rc-lens-steps h3{ margin:0 0 4px; }