/* ==============================
   Global tokens & page surfaces
============================== */
:root {
  /* Brand + surfaces */
  --page-bg: #f3f5f9;
  --panel-bg: #ffffff;
  --ey-bg: #f5f7fb;

  /* Brand colors */
  --text: #1d1d1f;
  --ey-blue: #0d6efd;
  --ey-blue-dark: #0050e3;
  --ey-neutral-900: #2f2f33;

  /* Layout tokens */
  --panel-radius: 28px;
  --panel-pad-d: 44px;
  --panel-pad-m: 26px;
  --section-gap: clamp(16px, 3vw, 32px);
  --max-panel-h: 810px;

  /* Type system */
  --font-main: 'Poppins', sans-serif;
  --card-body: clamp(14px, 1.05vw, 16px);
  --card-line: 1.65;
  --card-title: clamp(22px, 1.1vw, 28px);
  --card-micro: clamp(13px, 0.9vw, 15px);
}

body {
  font-family: var(--font-main);
  background: var(--page-bg);
  color: var(--text);
}

/* =========================================
   Teams Getting Started (Steps 1–3)
========================================= */
.eylet-teams-started {
  background: #f5f7fb;
  padding: clamp(40px, 6vw, 96px) 16px clamp(20px, 4vw, 36px);
}
.ets-container { max-width: 1180px; margin: 0 auto; }

.ets-title {
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  padding-bottom: 4px;
  font-size: clamp(28px, 3.1vw, 44px);
  background: linear-gradient(90deg, #0071e3, #a246ef, #ff4aa2, #f80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.ets-intro { max-width: 860px; color: #1a1a1a; font-size: clamp(14px, 1.08vw, 16px); }
.ets-intro p { margin: 0 0 12px; line-height: 1.7; }
.ets-intro p:last-child { margin-bottom: 22px; }

.ets-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 960px) { .ets-grid { grid-template-columns: 1fr; gap: 16px; } }

/* Ordered steps with custom counter */
.ets-steps-list { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.ets-steps-list li {
  counter-increment: step;
  position: relative;
  padding-left: 30px;
  margin: 0 0 10px;
  line-height: 1.65;
  font-size: 14px;
  color: #222;
}
.ets-steps-list li::before {
  content: counter(step) ".";
  position: absolute; left: 0; top: 0;
  font-weight: 600; color: #222;
}
.login-btn {
  display: inline-block;
  padding: 12px 32px;
  background-color: #0d6efd;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50px;
  transition: background-color 0.3s ease;
  margin-bottom: 24px; /* 👈 Adds gap below button */
}

.login-btn:hover {
  background-color: #0056d2;
}
.ets-steps-list a { color: var(--ey-blue); text-decoration: underline; }
.ets-sub { margin-top: 4px; }

.ets-card {
  position: relative;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(0,0,0,.07);
  padding: 18px 18px 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 560px;
  overflow: hidden;
}
.ets-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.06); pointer-events: none;
}

.ets-copy { padding: 2px 6px 10px; }
.ets-steps { color: #222; font-size: 14px; line-height: 1.65; margin: 0; }
.ets-steps .n { font-weight: 600; color: #111; margin-right: 4px; }
.ets-link { color: var(--ey-blue); text-decoration: underline; }
.ets-microhead { color: #d83b01; font-weight: 600; margin: 0 0 6px; font-size: 14px; line-height: 1.5; }

.ets-shot { display: grid; place-items: end center; min-height: clamp(340px,38vw,480px); padding: 10px 10px 0; }
.ets-shot img { width: clamp(260px, 90%, 440px); height: auto; display: block; transform: translate(90px,120px) scale(1.64); }

/* desktop/tablet defaults */
.ets-shot img{
  --tx: 100px;   /* right */
  --ty: 180px;   /* down  */
  --sc: 1.64;
  transform: translate(var(--tx), var(--ty)) scale(var(--sc));
}

@media (max-width: 960px){
  .ets-card { min-height: 520px; }
  .ets-shot { min-height: 420px; }
  /* mobile offsets */
  .ets-shot img{
    --tx: 80px;  /* left */
    --ty: 180px;  /* down */
    /* optionally reduce scale a bit */
    /* --sc: 1.5; */
  }
}


/* Step badge helpers */
.ets-step-badge,
.step-badge {
  position: absolute; left: 16px;
  background: #000; color: #fff; font-weight: 600;
  padding: 4px 10px; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.ets-step-badge { top: 16px; font-size: 16px; border-radius: 50px; }
.step-badge { top: -12px; font-size: 0.85rem; }
.ets-card { position: relative; padding-top: 2.5rem; }
.ets-steps-list { margin-top: .1rem; }
.ets-copy { position: relative; padding-top: 2.5rem; }

/* =========================
   Subteam (Explainers 4–5)
========================= */
.eylet-subteam { background: #f5f7fb; padding: clamp(10px, 3vw, 28px) 16px; }
.subteam-wrap {
  max-width: 1180px; margin: 0 auto; background: #fff; border-radius: 28px;
  box-shadow: 0 10px 28px rgba(0,0,0,.07); position: relative; overflow: hidden;
}
.subteam-wrap::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(17,17,17,.06); pointer-events:none; }

.subteam-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(16px,3vw,40px);
  align-items: center; padding: clamp(28px,5vw,56px);
}

.subteam-title {
  font-weight: 800; letter-spacing:-.02em; line-height:1.05;
  font-size: clamp(28px,4.5vw,64px); margin: 0 0 18px; color: #111;
}
.subteam-desc { max-width: 520px; color:#333; font-size: clamp(14px,1.05vw,18px); line-height:1.7; margin:0; }

.subteam-shot { display: grid; place-items: end center; min-height: clamp(320px, 38vw, 520px); padding: 0; }
.subteam-shot img { width: min(520px, 100%); height: auto; display: block; transform: translate(40px,60px) scale(1.12); }

@media (max-width: 960px) {
  .subteam-grid { grid-template-columns: 1fr; padding: clamp(22px,6vw,36px); }
  .subteam-copy { order: 1; }
  .subteam-shot { order: 2; min-height: 440px; }
  .subteam-shot img { transform: translate( 80px, 120px) scale(1.34); }
}

/* Step 5 (image lift) */
.eylet-subteam.step5 .subteam-shot { max-width: 300px; margin: auto; margin-top: -120px; }
.eylet-subteam.step5 .subteam-shot img { width: 100%; height: auto; display: block; }

/* =========================
   Step 4 (two-panel layout)
========================= */
.eylet-step4 { background: var(--ey-bg); padding: clamp(12px,3vw,32px) 0; }
.step4-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:4fr 6fr; gap:var(--section-gap); align-items:stretch; }

/* Left blue panel */
.step4-info {
  background: linear-gradient(180deg, #0d6efd 0%, #0061ff 45%, var(--ey-blue-dark) 100%);
  color: #fff; border-radius: var(--panel-radius); box-shadow: 0 10px 28px rgba(0,0,0,.08);
  overflow: hidden; max-height: var(--max-panel-h);
}
.step4-info .info-inner { padding: var(--panel-pad-d); display:flex; flex-direction:column; gap:18px; height:100%; }
.info-title { font-weight:600; font-size: clamp(28px, 4vw + .5rem, 39px); line-height:1.06; letter-spacing:-.5px; margin:0; }
.info-copy { font-size: clamp(16px, .6vw + 14px, 20px); line-height: 1.55; color: #e9f2ff; max-width: 50ch; margin: 6px 0 10px; }

.pill-list { display:grid; gap:20px; margin-top:200px; }
.pill { display:inline-flex; align-items:center; justify-content:center; height:56px; padding:0 22px; border-radius:999px; font-weight:700; font-size: clamp(16px, .4vw + 15px, 22px); white-space:nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.12); }
.pill-dark { background:#33383f; color:#fff; }
.pill-green { background:#4db06a; color:#fff; }
.pill-orange { background:#f28322; color:#fff; }

/* Right white panel */
.step4-panel {
  background:#fff; border-radius: var(--panel-radius); box-shadow: 0 10px 28px rgba(0,0,0,.06);
  overflow:hidden; position:relative; max-height: var(--max-panel-h);
}
.panel-inner { padding: var(--panel-pad-d); display:grid; grid-template-rows:auto auto auto 1fr; gap:10px; height:100%; }
.step-chip { display:inline-block; background:var(--ey-neutral-900); color:#fff; font-weight:700; font-size:15px; line-height:1; padding:11px 16px; border-radius:999px; width:fit-content; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.panel-title { margin:6px 0 2px; font-weight:600; color:var(--ey-blue); font-size: clamp(22px, .9vw + 18px, 34px); line-height:1.2; }
.panel-copy { margin:0; color:#222; font-size: clamp(16px, .6vw + 14px, 20px); line-height:1.55; max-width:65ch; }

/* ==== Step 4 phone art (parametric offsets) ==== */
.phone-wrap{
  display: grid;
  place-items: center;
  align-self: end;
  width: 100%;
  min-height: 240px;
  margin: 0;                 /* no layout pushing via margins */
  position: relative;
}

.manage_team_img{
  width: min(550px, 110%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 56px rgba(0,0,0,.18));
  pointer-events: none;
  user-select: none;

  /* Desktop defaults — tweak to taste */
  --tx: 100px;  /* + = right,  - = left  */
  --ty: 380px;  /* + = down,   - = up    */
  --sc: 1;      /* scale */
  transform: translate(var(--tx), var(--ty)) scale(var(--sc));
}

/* Tablet */
@media (max-width: 1024px){
  .manage_team_img{
    width: min(700px, 130%);
    --tx: 0px;
    --ty: 600px;
    /* --sc: 1;  keep scale unless you want to adjust */
  }
}

/* Mobile */
@media (max-width: 860px){
  .step4-grid{ grid-template-columns: 1fr; }
  .info-inner, .panel-inner{ padding: var(--panel-pad-m); }

  .phone-wrap{ min-height: 220px; }

  /* mobile offsets (example: a little right & down) */
  .manage_team_img{
    --tx: 80px;   /* move right; use negative to move left */
    --ty: 180px;  /* move down   */
    --sc: 1.5;  /*uncomment to slightly shrink */
  }
}

/* Reduced motion keeps the nice shadow but that’s it */
@media (prefers-reduced-motion: reduce){
  .manage_team_img{ filter: drop-shadow(0 18px 42px rgba(0,0,0,.2)); }
}


/* Small phones tune */
@media (max-width: 600px) {
  .step4-info { max-height: none; }
  .step4-info .info-inner { padding: 18px 16px 20px; gap: 12px; }
  .info-title { font-size: 32px; line-height:1.05; margin:0 0 8px; }
  .info-copy { font-size: 15.5px; line-height:1.55; max-width:none; margin:0 0 10px; text-align:left; }
  .pill-list { margin-top:0 !important; gap:12px; }
  .pill { height:48px; padding:0 18px; font-size:16px; }
  .step4-info .info-inner > *:last-child { margin-bottom:0; }
}
/* Force white text within blue panel */
.eylet-step4 .step4-info, .eylet-step4 .step4-info * { color: #fff !important; }

/* =========================
   Two blocks (lock + members)
========================= */
.two-blocks-grid {
  max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(16px,3vw,32px);
}
@media (max-width:768px){ .two-blocks-grid { grid-template-columns:1fr; } }

.block-card {
  background: var(--panel-bg);
  border-radius: 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 32px;
  min-height: 710px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.lock-templates { background: linear-gradient(135deg, #7dfcc2, #66d39b); color:#111; }
.lock-templates .block-illustration {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(480px,100%); pointer-events:none;
}
.lock-templates .block-illustration img { width:100%; height:auto; display:block; filter: drop-shadow(0 12px 28px rgba(0,0,0,.18)); }
@media (max-width:768px){ .lock-templates .block-illustration { right:16px; bottom:16px; width:min(320px,100%); } }

.block-inline-img { text-align:center; margin:12px 0 16px; }
.block-inline-img img { max-width:520px; width:100%; height:auto; display:inline-block; }

/* Unified section heading */
.section-heading { font-size: clamp(1.75rem, 2vw + .5rem, 2.25rem); font-weight: 700; line-height: 1.2; margin-bottom: 12px; color:#000; }

/* =========================
   Steps 7–8 (v2 cards)
========================= */
.eylet-two-steps.v2 { background: transparent; padding: clamp(12px,3vw,32px) 0; }
.two-steps-grid.v2 {
  max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(16px,3vw,32px); align-items:stretch;
}
.two-step-card.v2 {
  position:relative; background: var(--panel-bg); border-radius:28px; box-shadow:0 8px 22px rgba(0,0,0,.06);
  padding: 28px clamp(22px,3vw,36px); min-height: 750px; height: 750px; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
}
.two-step-card.v2 .step-tag {
  align-self:flex-start; display:inline-flex; padding:6px 14px; border-radius:999px; margin-bottom:18px;
  font-weight:700; font-size: clamp(14px,.9vw,16px); background:#1f1f21; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.two-step-card.v2 .section-heading { font-weight:800; letter-spacing:-.2px; margin:0 0 10px; }
.two-step-card.v2 .block-desc { margin:0 0 8px; }
.two-step-card.v2 .ets-steps-list { margin:0; }
.two-step-card.v2 .ets-steps-list li { margin:0 0 8px; }

.step7-card { padding-bottom: 260px; }
.step8-card { padding-bottom: 230px; }

.two-step-illustration img { width:100%; height:auto; display:block; filter: drop-shadow(0 16px 36px rgba(0,0,0,.18)); pointer-events:none; user-select:none; }
.two-step-illustration.left-phone { position:absolute; left:22px; bottom:20px; width:min(410px,85%); }
.two-step-illustration.center-devices { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:min(520px,100%); }

.two-step-card.v2:hover { transform: translateY(-2px); transition: transform .18s ease; }

@media (max-width:768px){
  .two-steps-grid.v2 { grid-template-columns:1fr; }
  .two-step-card.v2 { min-height:610px; height:610px; padding-bottom:160px; }
  .two-step-illustration.left-phone { left:50%; transform:translateX(-50%); width:min(360px,95%); }
  .two-step-illustration.center-devices { width:min(380px,95%); }
}

/* In-flow images (when not anchored) */
.step8-illustration-top { margin:16px 0 20px; text-align:center; }
.step8-illustration-top img { width:min(460px,100%); height:auto; display:inline-block; filter: drop-shadow(0 12px 28px rgba(0,0,0,.15)); }

/* desktop/tablet (your current rule) */
.step7-illustration img{
  --tx: 100px;     /* desktop X */
  --ty: 50px;      /* desktop Y */
  --scale: 1;
  transform: translate(var(--tx), var(--ty)) scale(var(--scale));
}

@media (max-width: 768px){
  .step7-illustration img{
    --tx: 60px;
    --ty: 0px;
    --scale: 1;    /* or 0.95 if you want it slightly smaller */
    width: min(420px, 92vw);
    margin-inline: auto;
  }
}

/* =========================
   Attach / Detach (40/60)
========================= */
.eylet-attach-detach { background: transparent; padding: clamp(16px,3vw,32px) 0; }
.attach-detach-grid {
  max-width:1180px; margin:0 auto; display:grid; grid-template-columns:4fr 6fr;
  gap: clamp(16px,3vw,32px); align-items:stretch;
}

/* v3 cards (810 desktop / 610 mobile) */
.two-step-card.v3 {
  position:relative; border-radius:28px; box-shadow:0 10px 28px rgba(0,0,0,.08);
  padding: clamp(22px,4vw,40px); display:flex; flex-direction:column; overflow:hidden;
  min-height:810px; height:810px;
}

/* Left gradient card */
.attach-self-card { background: linear-gradient(135deg, #7a7cff 0%, #8466ff 45%, #9a65ff 100%); color:#fff; }
.attach-self-card .attach-title {
  margin:10px 0; font-weight:800; line-height:1.08; letter-spacing:-.3px;
  font-size: clamp(28px, 3.1vw, 44px); color:#fff;
}
.attach-self-card .attach-lead { margin:6px 0 10px; color: rgba(255,255,255,.95); font-size: clamp(15px,1.05vw,18px); line-height:1.65; }

/* Ensure list text + numbers are white inside gradient card (uses custom counter) */
.attach-self-card .ets-steps-list,
.attach-self-card .ets-steps-list li { color:#fff; }
.attach-self-card .ets-steps-list li::before { color:#fff; font-weight:700; }

/* Image first, translate controls */
.attach-device-art { --tx:0px; --ty:-6px; --scale:1; transform: translate(var(--tx),var(--ty)) scale(var(--scale)); transform-origin:center; margin-bottom:12px; text-align:left; }
.attach-device-art img { width:min(420px,92%); height:auto; display:block; filter: drop-shadow(0 16px 36px rgba(0,0,0,.2)); }

/* Right white card */
.detach-card { background:#fff; color:#1d1d1f; }
.detach-title {
  margin:0 0 8px; font-weight:800; letter-spacing:-.2px; line-height:1.15;
  font-size: clamp(26px, 2.6vw, 40px); color: var(--ey-blue);
}
.detach-lead, .detach-note { margin:8px 0 12px; color:#222; font-size: clamp(15px,1.05vw,18px); line-height:1.65; }
.detach-note { opacity:.9; }

/* App image translate controls */
.detach-app-art { --tx:100px; --ty:20px; --scale:1; margin-top:12px; transform: translate(var(--tx),var(--ty)) scale(var(--scale)); transform-origin:center; text-align:left; }
.detach-app-art img { width:min(480px,95%); height:auto; display:block; filter: drop-shadow(0 18px 42px rgba(0,0,0,.22)); }

/* Lists spacing */
.attach-steps, .detach-card .ets-steps-list { margin:8px 0 8px 20px; padding:0; }
.attach-steps li, .detach-card .ets-steps-list li { margin: 0 0 8px; }

@media (max-width:768px){
  .attach-detach-grid { grid-template-columns:1fr; gap:16px; }
  .two-step-card.v3 { height:auto; min-height:610px; }
  .detach-app-art { --tx:80px; --ty:60px; --scale:1.2; text-align:center; }
}

/* =========================
   Global typography normalizer
========================= */
.ets-intro,
.ets-intro p,
.ets-steps,
.ets-steps-list li,
.subteam-desc,
.info-copy,
.panel-copy {
  font-size: var(--card-body) !important;
  line-height: var(--card-line) !important;
  letter-spacing: 0;
  color: #222;
}
.ets-microhead { font-size: var(--card-micro) !important; line-height: 1.5 !important; font-weight: 600 !important; }
.panel-title { font-size: var(--card-title) !important; line-height:1.25 !important; font-weight:700 !important; }
.info-title { font-weight:800 !important; letter-spacing:-.02em !important; line-height:1.06 !important; font-size: clamp(28px, 4.2vw, 39px) !important; }
.eylet-step4 { font-family: var(--font-main); }
.ets-steps-list li { font-size: var(--card-body) !important; }
.ets-step-badge, .step-chip { font-size: var(--card-micro) !important; font-weight:700 !important; }
@media (max-width:420px){ .info-title { font-size: clamp(32px, 7vw, 39px) !important; } }

/* =========================
   Help (icon + text, no cards)
========================= */
.eylet-help { padding: clamp(28px, 6vw, 80px) 16px; }
.help-grid {
  max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(28px,4vw,72px);
}
@media (max-width:768px){ .help-grid { grid-template-columns:1fr; } }
.help-item { display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:flex-start; }
.help-icon { width:80px; height:80px; object-fit:contain; }
.help-title { font-weight:800; font-size: clamp(22px, 2.2vw, 28px); line-height:1.2; margin:0 0 8px; color:#1d1d1f; }
.help-text { font-size: clamp(14px, 1.05vw, 16.5px); line-height:1.65; color:#333; margin:0; }

/* === Step 5 isolated art controls === */
/* Put this AFTER the generic `.subteam-shot img{...}` rules */
/* === Step 5 art — desktop controls === */
/* Put AFTER any generic .subteam-shot rules */
.step5-art{
  position: relative;
  display: grid;
  place-items: end center;              /* same anchor feel as mock */
  min-height: clamp(320px, 38vw, 520px);
  overflow: visible;

  /* Desktop tuning — tweak these only for large screens */
  --tx: 20px;                           /* +right / -left */
  --ty: 40px;                           /* +down  / -up   */
  --scale: 1.00;                        /* size */
  --w: min(420px, 100%);                /* image width cap */
}

.step5-art img{
  width: var(--w);
  height: auto;
  display: block;
  transform: translate(var(--tx), var(--ty)) scale(var(--scale));
  transform-origin: center;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.18));
  will-change: transform;
}

/* --- Mobile fixes: remove translate/scale and center the image --- */
@media (max-width: 960px){
  .step5-art{ min-height: 420px; place-items: center; }

  .step5-art img{
    width: min(420px, 92vw);
    transform: none;                    /* ✅ no offset/scale on mobile */
  }
}

@media (max-width: 480px){
  .step5-art{ min-height: 360px; }
  .step5-art img{ width: min(360px, 92vw); }
}

/* Safety: if any legacy Step 5 rules still target .subteam-shot,*
/* Step 5 — put the image AFTER the text on mobile */
@media (max-width: 960px) {
  .eylet-subteam.step5 .subteam-grid { grid-template-columns: 1fr; }

  /* text first, image second */
  .eylet-subteam.step5 .subteam-copy { order: 1; }
  .eylet-subteam.step5 .step5-art   { order: 2; margin-top: 16px; place-items: center; }

  /* keep the mobile image tidy */
  .eylet-subteam.step5 .step5-art img {
    transform: none;               /* no translate/scale on mobile */
    width: min(420px, 92vw);       /* clamp width */
  }
}
/* --- Step 5: stop text clipping on mobile --- */
.eylet-subteam.step5 .subteam-copy{
  position: relative;
  z-index: 2;             /* text above any ::after outline or art */
  padding-right: 10px;    /* tiny breathing room to avoid edge cuts */
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* The art stays below the text */
.eylet-subteam.step5 .step5-art{ position: relative; z-index: 1; }

/* Only relax the mask on mobile; keep it on desktop for the tidy crop */
@media (max-width: 960px){
  .eylet-subteam.step5 .subteam-wrap{ overflow: visible; }  /* ✅ no clipping */
}
/* Step 5 — add inner padding (mobile) */
@media (max-width: 960px){
  /* add left/right padding to the whole card content */
  .eylet-subteam.step5 .subteam-grid{
    padding-right: clamp(16px, 6vw, 24px);
    padding-left:  clamp(16px, 6vw, 24px);
  }

  /* extra right padding just on the text column */
  .eylet-subteam.step5 .subteam-copy{
    padding-right: clamp(12px, 4vw, 18px);
    box-sizing: border-box;
  }
}

/* Optional: pull the decorative inner outline slightly inward */
.eylet-subteam.step5 .subteam-wrap::after{ inset: 2px; }
/* Step 5 — add inner padding (mobile) */
@media (max-width: 960px){
  /* add left/right padding to the whole card content */
  .eylet-subteam.step5 .subteam-grid{
    padding-right: clamp(16px, 6vw, 24px);
    padding-left:  clamp(16px, 6vw, 24px);
  }

  /* extra right padding just on the text column */
  .eylet-subteam.step5 .subteam-copy{
    padding-right: clamp(12px, 4vw, 18px);
    box-sizing: border-box;
  }
}

/* Optional: pull the decorative inner outline slightly inward */
.eylet-subteam.step5 .subteam-wrap::after{ inset: 2px; }

/* ===== Mobile width normalizer (use at END) ===== */
:root { --gutter: 16px; }

@media (max-width: 768px){

  /* 1) Remove side padding from sections */
  .eylet-teams-started,
  .eylet-step4,
  .eylet-subteam,
  .eylet-two-blocks,
  .eylet-two-steps,
  .eylet-attach-detach,
  .eylet-help {
    padding-left: 0;
    padding-right: 0;
  }

  /* 2) Give every inner wrapper the SAME width */
  .ets-container,
  .step4-grid,
  .subteam-wrap,
  .two-blocks-grid,
  .two-steps-grid.v2,
  .attach-detach-grid,
  .help-grid {
    width: min(1180px, calc(100% - var(--gutter)*2));  /* consistent gutter */
    margin-inline: auto;
  }

  /* 3) Safety: make sure nothing overflows horizontally */
  *, *::before, *::after { box-sizing: border-box; }
  img { max-width: 100%; height: auto; }

  .subteam-wrap,
  .step4-panel { overflow: hidden; }      /* keep rounded-mask tidy */

  /* Large translated images keep their transform origin centered */
  .ets-shot img,
  .subteam-shot img { transform-origin: center; }
}
/* Kill the inner outline on Step 5 so no hairline appears */
.eylet-subteam.step5 .subteam-wrap::after{
  content: none !important;   /* or: box-shadow: none !important; */
}
/* Heading styling used on the purple left card */
.two-step-heading{
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.12;
  margin: 6px 0 8px;
  font-size: clamp(28px, 2.6vw, 40px);
}

/* already present, but you can tweak if needed */
.big-heading{
  font-size: 28px;
  line-height: 1.3;
}

/* ensure it stays white on the gradient card */
.attach-self-card .two-step-heading{ color:#fff; }

/* Hidden by default */
#portrait-only{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: #fff;         /* or a brand color w/ contrast */
  color: #111;
  z-index: 9999;
  font: 600 18px/1.4 'Poppins', system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
}
#portrait-only .inner{ max-width: 26rem; }

/* Show overlay only on small screens in landscape */
@media (max-width: 900px) and (orientation: landscape){
  #portrait-only{ display: flex; }
  html, body{ height: 100%; overflow: hidden; } /* prevent scrolling content behind */
}