/* ======= Design tokens ======= */
:root{
  --bg:#0b1020; --surface:#11162a; --muted:#8ea1c0; --text:#e8eefc;
  --brand:#5aa1ff; --brand-2:#7cf6d6;  --accent: #00ffff;
  --accent-2: #ff00ff;; --radius:16px; --max:1200px;
}

/* ======= Base ======= */
*{ box-sizing:border-box; }
html,body{ height:100%; scroll-behavior:smooth;  background-color:var(--bg);}
body{
  margin:0;
  font:500 16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  
  background:
  /* radial-gradient(1200px 600px at 80% -40%, rgba(90,161,255,.15) 0, rgba(90,161,255,0) 75%),
  radial-gradient(1000px 600px at -10% -10%, rgba(124,246,214,.12) 0, rgba(124,246,214,0) 72%),CHANGED */
  var(--bg);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 20px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ======= Buttons ======= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.1rem; border-radius:calc(var(--radius) - 6px);
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#ffffff;
  font-weight:700; border:none; cursor:pointer; box-shadow:0 8px 24px rgba(42,110,241,.25);
}
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn.secondary{ background:transparent; color:var(--text); border:0px solid rgba(142,161,192,.35); box-shadow:none; }
.btn.small{ padding:.6rem .8rem; font-weight:700; }
.btn.block{ display:block; text-align:center; }

/* ======= Header / Nav ======= */
header{ position:sticky; top:0; z-index:40; backdrop-filter:blur(8px); background:color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:0px solid rgba(142,161,192,.15); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; }
.logo{ display:flex; align-items:center; gap:.6rem; font-weight:900; letter-spacing:.2px; }
.logo-badge{ width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
nav ul{ display:flex; align-items:center; gap:1.2rem; list-style:none; padding:0; margin:0; }
nav a:focus-visible, .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(90,161,255,.35); }
@media (max-width:900px){
  nav ul{ display:none; position:absolute; left:0; right:0; top:64px; background:var(--surface); border-bottom:0px solid rgba(142,161,192,.15); padding:1rem 20px; flex-direction:column; align-items:flex-start; }
  nav ul.open{ display:flex; }
}

/* ======= Sections ======= */
.mp-section{ padding:4.5rem 0; }
.mp-section-title{ font-size:clamp(1.6rem,2.4vw + .5rem,2.4rem); margin:0 0 .6rem; }
.muted{ color:var(--muted); }
.small{ font-size:.9rem; }

/* ======= Hero (MakerPortal) ======= */
.mp-header{ background:color-mix(in oklab, var(--bg) 82%, transparent); }
.mp-hero{ padding:5.5rem 0 3rem; }
.mp-hero-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center; }
.eyebrow{ color:var(--brand-2); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:2rem; margin-top: 3%;}
.mp-hero-cta{ display:flex; gap:.8rem; align-items:center; margin-top:1.2rem; }
.mp-hero-points{ display:grid; grid-auto-flow:column; gap:1rem; margin:1.2rem 0 0; padding:0; list-style:none; color:var(--muted); font-size:.95rem; }

.mp-image{ width:100%; height:auto; display:block; border-radius:calc(10px); aspect-ratio:16/9; }
@media (max-width:900px){
  .mp-hero-grid{ grid-template-columns:1fr; gap:24px; }
  .mp-hero-points{ grid-auto-flow:row; }
}

/* ======= Feature Summary ======= */
.mp-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{ background:var(--surface); border:0px solid rgba(142,161,192,.15); border-radius:var(--radius); padding:20px; }
.card-icon{ font-size:1.4rem; }
.card h3{ margin:.5rem 0; }
.card p{ color:var(--muted); margin:.2rem 0 0; }
@media (max-width:900px){ .mp-feature-grid{ grid-template-columns:1fr; }}

/* ======= Workflow header ======= */
.flow-header{ margin-bottom:1.4rem; }
.flow-badge{ display:inline-block; padding:.38rem .75rem; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#ffffff; font-weight:900; letter-spacing:.02em; font-size:.85rem; box-shadow:0 8px 24px rgba(42,110,241,.25); }
.flow-header h2{ margin:.6rem 0 .2rem; font-size:clamp(1.8rem,2.6vw + .6rem,2.6rem); }
.flow-sub{ color:var(--muted); margin:.2rem 0 .6rem; }
.flow-legend{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{ display:inline-block; padding:.3rem .55rem; border-radius:999px; background:color-mix(in oklab, var(--surface) 70%, transparent); border:0px solid rgba(142,161,192,.25); font-size:.83rem; }
.chip.alt{ background:linear-gradient(135deg, rgba(90,161,255,.18), rgba(124,246,214,.18)); border-color:rgba(142,161,192,.15); }
.chip.outline{ background:transparent; }

/* ======= Vertical Timeline (continuous spine, 3-col rows) ======= */
.tl{ position:relative; overflow:visible; }
.tl::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left: calc(var(--backbone-left, 50%) + var(--backbone-nudge, 0px));
  transform: translateX(-50%); /* center the 4–6px line on the pin center */
  width: 6px;
  background: linear-gradient(var(--brand), var(--brand-2));
  opacity:.38;
  pointer-events:none;
  z-index:0;
}
.tl-node{
  display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);
  column-gap:28px; align-items:center; margin:60px 0; position:relative;
  transition:transform .1s ease, filter .1s ease, box-shadow .1s ease; will-change:transform; isolation:isolate; z-index:1;
}

.tl-node .slot.image{ grid-column:1; }
.tl-node .slot.node{ grid-column:2; display:grid; place-items:center; }
.tl-node .slot.card{ grid-column:3; }
.tl-node:nth-child(even) .slot.card{ grid-column:1; }
.tl-node:nth-child(even) .slot.node{ grid-column:2; }
.tl-node:nth-child(even) .slot.image{ grid-column:3; }

.tl-node .tl-pin{
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#081021; font-weight:900;
  border:2px solid color-mix(in oklab, var(--surface) 65%, transparent);
  box-shadow:0 12px 28px rgba(42,110,241,.28), 0 0 0 8px rgba(90,161,255,.08);
}

.tl-media-box, .tl-card{
  background:color-mix(in oklab, var(--surface) 86%, transparent);
  border:1px solid rgba(142,161,192,.15); border-radius:var(--radius);
}
.tl-card{ padding:18px; }
.tl-head{
  padding:.6rem .8rem; margin:-.2rem -.2rem .6rem; border-radius:calc(var(--radius) - 6px);
  background:linear-gradient(135deg, rgba(90,161,255,.14), rgba(124,246,214,.10));
  border:0px solid rgba(142,161,192,.12);
}
.mp-bullets{ margin:.5rem 0 .2rem; padding-left:1rem; }
.mp-bullets li{ margin:.2rem 0; }
.faq.compact{ margin-top:.5rem; padding:12px; }

/* ======= CTA & Footer ======= */
.cta{ padding:5rem 0; }
.cta-inner{
  background: linear-gradient(135deg, rgba(90,161,255,.15), rgba(124,246,214,.15)), var(--surface);
  border:0px solid rgba(142,161,192,.15); border-radius:calc(var(--radius) + 6px);
  padding:24px; display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:center;
}
.cta .lead{ margin:.2rem 0 0; }
.cta-form{ display:flex; gap:10px; align-items:center; }
.cta-form input{
  flex:1; border-radius:12px; border: 1px solid rgb(142, 161, 192); padding:.9rem 1rem;
  background:transparent; color:var(--text);
}
.cta-form input::placeholder{ color: rgba(200, 210, 220, 0.85); }
footer{ padding:2.5rem 0; border-top:0px solid rgba(142,161,192,.15); background:color-mix(in oklab, var(--surface) 40%, transparent); }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
footer nav{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ======= Responsive ======= */
@media (max-width:1000px){
  .tl-node{ grid-template-columns:28px 28px 1fr; column-gap:14px; row-gap:12px; }
  .tl-col.media, .tl-col.card{ grid-column:3; }
  .tl-node .slot.image{ grid-column:3; }
  .tl-node .slot.card{ grid-column:3; }
  .tl-node .slot.node{ grid-column:2; }
  .cta-inner{ grid-template-columns:1fr; }
  .cta-form{ flex-direction:column; align-items:stretch; }
}
@media (max-width:900px){
  .footer-grid{ flex-direction:column; }
}

/* ===== MOBILE TIMELINE (final, complete) ===== */
@media (max-width: 780px){
  /* Pull the workflow section a bit left (controls gutter) */
  #workflow .container{
    padding-left: 10px !important;   /* tighten from 20px; change to 6–12px to taste */
  }

  /* Two-column timeline: [pin | card]; image hidden */
  .tl-node{
    display: grid;
    grid-template-columns: 24px 1fr !important;  /* pin column */
    grid-template-areas: "pin card";
    column-gap: 20px !important;                  /* spacing between pin and card */
    row-gap: 8px;
    margin: 28px 0;
    will-change: auto !important;                /* no transform pre-promotion */
    transform: translateX(-20px);
  }

  .tl-node .slot.node{
    grid-area: pin !important;
    align-self: center;       /* vertical center of pin vs card */
    justify-self: center;     /* horizontal center within 24px column */
  }

  .tl-node .slot.card{ grid-area: card !important; }
  .tl-node .slot.image{ display: none !important; }

  .tl-pin{
    width: 24px;
    height: 24px;
    box-shadow: 0 6px 14px rgba(42,110,241,.20),
                0 0 0 4px rgba(90,161,255,.06);
  }

  .tl-card{ padding: 14px; }
  .tl-head{ margin: 0 0 .5rem; }
  .tl-card, .tl-head{ position: static !important; }

  /* Tiny visual shim for the spine if needed: -1px, 0, or +1px */
  .tl{ --backbone-nudge: 0px; }
}

.mp-hero-media.ipad-stage { 
  position: relative; display: grid;
  place-items: center;
  width: clamp(320px, 30vw, 820px);   /* CHANGED: 20vw target with safe min/max */
  aspect-ratio: 16/10;  
} 

.ipad-img { 
  position: absolute;
  height: auto;
  width: min(44vw, 620px);
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.25));
  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
  transform: translateY(24px); /* CHANGED: add start transform for smoother fade-up */
} 

.ipad-back { 
  z-index: 1;
  left: 12vw; /* more to the left */ 
  top: 4vw; /* higher, no bottom “frame” */ 
  width: min(40vw, 580px); 
} 

.ipad-front { 
  z-index: 2; 
  right: 2vw; /* more to the right */ 
  top: 9vw; 
} /* reveal */ 

.ipad-stage.is-visible .ipad-img { 
  opacity: 1; 
  transform: translateY(0);
} 
 
.ipad-stage.is-visible .ipad-back { transition-delay: 120ms; } 
.ipad-stage.is-visible .ipad-front { transition-delay: 280ms; } 


.mp-hero-media, .mp-hero-media.ipad-stage { 
  background: transparent !important; 
  border: 0 !important; 
  box-shadow: none !important; 
  border-radius: 0 !important; 
  overflow: visible !important; /* <-- key: no clipping */ 
  outline: none !important;
} 

/* ensure the stack sits above backgrounds in the hero */ 
.mp-hero .ipad-stage { z-index: 2; } 
.mp-hero-media::before, .mp-hero-media::after { content: none !important; }

/* Desktop only: keep the 20vw effect you liked */
@media (min-width: 1024px) {
  .mp-hero-media, .mp-hero-media.ipad-stage {
    width: 20vw;                     /* CHANGED: scoped to desktop so mobile isn’t tiny */
    height: 20vw;                    /* CHANGED: scoped to desktop so mobile isn’t tiny */
  }
}

.video-band{ padding:32px 0 56px; }
.video-shell{
  width:min(1100px,92vw);
  margin:0 auto;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}

/* Generic iOS/iPad “window” look (rounded rectangle) */
.ios-window{
  border-radius:10px;   /* tweak 24–36px to taste */
}
.video-shell > *{ width:100%; height:100%; object-fit:cover; display:block; }

.cta-card {
  display: inline-block;
  background: rgba(0,0,0,0.6);
  padding: 1.5rem 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.cta-card .primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;

  padding: 1.2rem 2rem;   /* taller */
  font-size: 1.15rem;     /* bigger text */
  font-weight: 600;

  background: #f4f8fb;
  color: #111;
  border-radius: 10px;
  text-decoration: none;
  margin-bottom: 1rem;

  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.cta-card .primary-btn:hover {
  background: #fff;
}

.cta-card .cta-links {
  font-size: .9rem;
  margin-bottom: .5rem;
}

.cta-card .cta-links a {
  color: var(--brand, #5aa1ff);
  text-decoration: underline;
}

.cta-card .cta-note {
  font-size: .8rem;
  color: var(--muted, #aaa);
  margin: 0;
}

.cta-card .cta-note a {
  color: var(--brand, #5aa1ff);
  text-decoration: underline;
}

.mp-hero {
  position: relative;
  text-align: center;
  padding: 6rem 1rem;
  overflow: hidden;
  
}

.mp-hero-center {
  position: relative;
  z-index: 1;
}

.mp-hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  margin: 0 0 2rem;
  color: #e8eefc;
}

.cta-card {
  display: block;                /* let it behave like a block */
  max-width: 480px;              /* control width, adjust as needed */
  margin: 0 auto;                /* centers horizontally */
  padding: 1.5rem 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.9rem 1.4rem;
  border-radius: 8px;
  background: #f3f6fb;
  color: #111;
  text-decoration: none;
}

.primary-btn:hover {
  filter: brightness(0.95);
}

.btn-icon {
  font-size: 1.2rem;
}

.cta-links {
  margin-top: 1rem;
  font-size: 0.95rem;
}

.cta-links a {
  color: #5aa1ff;
  text-decoration: none;
}

.cta-links a:hover {
  text-decoration: underline;
}

.cta-note {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: #8ea1c0;
}

.cta-note a {
  color: #8ea1c0;
  text-decoration: underline;
}

.tree-muted{ color:var(--muted); font-size: small;}

.card-title {
  /* font-family: 'Montserrat', sans-serif; Consistent with main title */
  font-weight: 600; /* Semi-bold for sub-titles */
  font-size: 1.25em; /* 24-28pt range for prominence */
  letter-spacing: 0.5px; /* Modern spacing */
  text-transform: none; /* Title case for approachability */
  color: #00eeff; /* Softer teal/cyan for accents */
  margin-bottom: 12px; /* Space before description */
}

/* ≤1000px: make even rows match odd rows, and hide videos */
@media (max-width:1000px){
  /* same placement as odd rows in your tablet grid (cols: 28px 28px 1fr) */
  .tl-node:nth-child(even) .slot.card { grid-column: 3 !important; }
  .tl-node:nth-child(even) .slot.node { grid-column: 2 !important; }

  /* hide media containers on tablet too (you only hid .slot.image at ≤780px) */
  .tl-node .slot.video { display: none !important; }
}

/* ≤1000px: make even rows identical to odd; keep 3-col tablet grid */
@media (max-width:1000px){
  /* Tablet grid you’re using: 28px | 28px | flexible */
  .tl-node{
    grid-template-columns: 28px 28px 1fr !important;
    column-gap: 14px !important;
  }

  /* Hide media on tablet too */
  .tl-node .slot.video{ display:none !important; }
  /* (you already hide .slot.image at ≤780px; keep or add here if desired)
     .tl-node .slot.image{ display:none !important; } */

  /* Put BOTH items on the SAME grid row and correct columns */
  .tl-node .slot.node{ grid-column: 2 !important; grid-row: 1 !important;
                       display:grid !important; place-items:center !important;
                       align-self:center !important; justify-self:center !important; }
  .tl-node .slot.card{ grid-column: 3 !important; grid-row: 1 !important; }

  /* Explicitly override desktop alternation for even rows */
  .tl-node:nth-child(even) .slot.node{ grid-column: 2 !important; grid-row: 1 !important; }
  .tl-node:nth-child(even) .slot.card{ grid-column: 3 !important; grid-row: 1 !important; }
}