/* ============================================================
   CSR PAGE  ·  sections unique to this page
   Built from the primitives in rentla.css — same tokens,
   same type scale, same amber slash vocabulary.
   ============================================================ */

/* ============================================================
   CYCLE  ·  the loop the copy describes, drawn
   Vertical rail on phones, horizontal track from 640px.
   ============================================================ */
.cycle{display:grid; grid-template-columns:1fr; gap:0; margin:0; padding:0}

.cyc{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4);
  align-items:start; position:relative}

/* The rail: dot + connecting line, stacked in their own column */
.cyc-mark{display:flex; flex-direction:column; align-items:center;
  align-self:stretch; flex:none}
.cyc-dot{width:13px; height:13px; border-radius:50%; flex:none; margin-top:6px;
  border:2px solid var(--amber-400); background:var(--s-page);
  transition:background var(--d-base) var(--ease-std),
             box-shadow var(--d-base) var(--ease-std)}
.cyc-line{width:2px; flex:1; min-height:18px; background:var(--n-200)}
.cyc:last-child .cyc-line{background:transparent}

.cyc-body{padding-bottom:var(--sp-6); min-width:0}
.cyc-no{display:block; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t-muted); margin-bottom:var(--sp-1)}
.cyc-body strong{display:block; font-family:var(--f-display); font-weight:600;
  font-size:1.0625rem; line-height:1.3; color:var(--t-head)}
.cyc-body span.cyc-note{display:block; font-size:.9375rem; color:var(--t-muted);
  line-height:1.55; margin-top:var(--sp-1)}

/* The return leg: the loop closing back on itself */
.cycle-loop{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  margin-top:var(--sp-2); padding:var(--sp-4) var(--sp-5);
  border:1px dashed var(--amber-400); border-radius:var(--r-card);
  background:var(--amber-50)}
.cycle-loop svg{flex:none; color:var(--amber-700)}
/* Navy on the label, not amber. amber-700 on amber-50 measures 4.2:1 — fine
   for the icon, which only has to clear 3:1 as a graphic, but short of the
   4.5:1 that 12px text needs. The amber stays in the icon and the border. */
.cycle-loop .mono{color:var(--t-head); font-weight:600}
.cycle-loop>span:last-child{font-size:.9375rem; color:var(--t-body); flex:1 1 16rem; min-width:0}

/* From 640px the rail turns horizontal and the stages sit side by side:
   two across on tablets, all four across once there is room for a stage
   column to hold its note without going ragged. */
@media (min-width:640px){
  .cycle{grid-template-columns:1fr 1fr; gap:var(--sp-8) var(--sp-6)}
  .cyc{grid-template-columns:1fr; gap:var(--sp-4)}
  .cyc-mark{flex-direction:row; align-items:center; align-self:auto; width:100%}
  .cyc-dot{margin-top:0}
  .cyc-line{width:auto; height:2px; flex:1; min-height:0; margin-left:var(--sp-2)}
  /* Horizontal, every stage carries its line — the last one closed the
     vertical rail, but across a row it is just another tick. */
  .cyc:last-child .cyc-line{background:var(--n-200)}
  .cyc-body{padding-bottom:0}
  .cycle-loop{margin-top:var(--sp-6)}
}
@media (min-width:900px){
  .cycle{grid-template-columns:repeat(4,1fr); gap:var(--sp-6)}
}

/* ============================================================
   LIVES  ·  one unit, several deployments
   ============================================================ */
.lives{display:grid; grid-template-columns:1fr; gap:var(--sp-3); margin:0; padding:0}
.life{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:var(--sp-4);
  padding:var(--sp-5); background:var(--n-0);
  border:1px solid var(--n-200); border-radius:var(--r-card);
  transition:border-color var(--d-fast) var(--ease-std),
             transform var(--d-fast) var(--ease-std),
             box-shadow var(--d-fast) var(--ease-std)}
.life:hover{border-color:var(--navy-400); transform:translateY(-2px); box-shadow:var(--e1)}
.life-ico{width:42px; height:42px; border-radius:var(--r-btn); flex:none;
  display:grid; place-items:center; background:var(--navy-50); color:var(--navy-900);
  transition:background var(--d-fast) var(--ease-std)}
.life:hover .life-ico{background:var(--amber-100)}
.life-no{display:block; font-family:var(--f-mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t-muted); margin-bottom:2px}
.life b{display:block; font-family:var(--f-display); font-weight:600; font-size:1.0625rem;
  line-height:1.25; color:var(--t-head)}

/* The terminal state — visually distinct from the three deployments */
.life-end{background:var(--navy-50); border-style:dashed; border-color:var(--navy-200)}
.life-end:hover{transform:none; box-shadow:none; border-color:var(--navy-300)}
.life-end .life-ico{background:var(--n-0); border:1px solid var(--navy-200)}
.life-end:hover .life-ico{background:var(--n-0)}

@media (min-width:640px){ .lives{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .lives{grid-template-columns:repeat(4,1fr)}
  .life{grid-template-columns:1fr; align-items:start; gap:var(--sp-4); padding:var(--sp-6)} }

/* ============================================================
   LOCAL BAND  ·  inverted, Chennai
   ============================================================ */
.local{position:relative; overflow:hidden; padding-block:var(--sp-20)}
.local .wrap{position:relative; z-index:1}
.local-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-10); align-items:center}
.local-stats{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8) var(--sp-6)}
.local-stats div{display:flex; flex-direction:column; gap:var(--sp-2)}
.local-stats .mono{color:var(--navy-300)}
.local-stats .u{display:block; width:32px; height:5px; background:var(--amber-400);
  transform:skewX(-20deg)}
.local-stats b{font-family:var(--f-display); font-weight:700; color:#fff; line-height:1.15;
  font-size:clamp(1.375rem,1.1rem + 1.1vw,1.875rem); letter-spacing:-.02em}

@media (min-width:1000px){
  .local-grid{grid-template-columns:1.1fr .9fr; gap:var(--sp-20)}
}

/* ============================================================
   FINAL CTA  ·  CSR variant
   ============================================================ */
.final{background:var(--s-tint); border-top:1px solid var(--n-200)}
.final-card{display:grid; gap:var(--sp-5); padding:var(--sp-6);
  background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-media);
  box-shadow:var(--e2)}
.final-card .mono{color:var(--t-muted)}
.final-list{display:grid; gap:var(--sp-3)}
.final-list li{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3);
  align-items:start; font-size:.9375rem; color:var(--t-body)}
.final-list .slash{margin-top:9px}
.final-actions{display:flex; flex-wrap:wrap; gap:var(--sp-3)}
.final-actions .btn{flex:1 1 13rem}

@media (min-width:1000px){
  .final-card{padding:var(--sp-8)}
  .final-actions .btn{flex:0 1 auto}
}