/* =====================================================================
   ti-v15.css — 2026-08-15  ("break the sameness" pass)
   Homepage hero rebuild + the end of card soup. Loads LAST.
   Additive and reversible: delete the one <link> in index.html and the
   hero returns to its v13/v14 state. Nothing else on the site is touched.

   The problem it fixes: the live demo is the single most persuasive asset
   we own and the hero rendered it small (41vw), dimmed (opacity .94) and
   with a "click to explore" plate parked over the middle of it. So the
   product read as a grey smudge.

   The move: give it roughly twice the room, let it bleed off the right
   edge so it reads as bigger than the window, take the dimming off, and
   move the affordance out of the way of the screen.
   ===================================================================== */

@media (min-width:1241px){

  /* text column yields room to the product */
  .hero-inner{max-width:40% !important; padding:8.5rem 0 6rem}

  /* ---- the product frame ------------------------------------------ */
  .hero-demo{
    right:-4.5vw;                        /* bleeds off the edge */
    width:min(1040px,56vw);
    top:50%;
    transform:translateY(-50%);
    perspective:2200px;
    z-index:1;
  }

  /* soft turquoise bloom behind the frame, so it sits IN the page
     rather than on top of it */
  .hero-demo::before{
    content:"";
    position:absolute;
    inset:-14% -10% -18% -12%;
    background:
      radial-gradient(48% 52% at 38% 42%, rgba(53,201,164,.20), transparent 70%),
      radial-gradient(60% 60% at 72% 68%, rgba(44,110,143,.16), transparent 72%);
    filter:blur(18px);
    pointer-events:none;
    z-index:0;
  }

  .hd-frame{
    position:relative;
    z-index:1;
    border-radius:18px !important;
    border:1px solid rgba(53,201,164,.22) !important;
    box-shadow:
      0 2px 0 rgba(255,255,255,.05) inset,
      0 40px 90px rgba(0,0,0,.62),
      0 10px 34px rgba(0,0,0,.45),
      0 0 0 1px rgba(255,255,255,.03);
    transform:rotateY(-7deg) rotateX(1.6deg) translateZ(0);
    transform-origin:right center;
    transition:transform .85s cubic-bezier(.2,.7,.2,1), box-shadow .85s ease;
  }
  /* straightens up as you approach it — the one bit of hero micro-interaction */
  .hero-demo:hover .hd-frame{
    transform:rotateY(-1.5deg) rotateX(.4deg) translateZ(0);
    box-shadow:
      0 2px 0 rgba(255,255,255,.06) inset,
      0 48px 110px rgba(0,0,0,.66),
      0 12px 40px rgba(0,0,0,.5),
      0 0 0 1px rgba(53,201,164,.14);
  }

  /* the screenshot itself: no dimming, top-anchored so the narrative band
     and the answered-questions cards are what you actually see */
  .hd-cover{background:transparent !important}
  .hd-cover img{
    opacity:1 !important;
    object-position:top center !important;
  }

  /* affordance moves OFF the product: a compact pill in the bottom-left
     corner instead of a plate across the middle */
  .hd-cta{
    left:1rem !important;
    top:auto !important;
    bottom:1rem !important;
    transform:none !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:.55rem !important;
    padding:.5rem .85rem !important;
    border-radius:999px !important;
    background:rgba(8,16,24,.82) !important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border:1px solid rgba(53,201,164,.42) !important;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    transition:background .3s, border-color .3s, transform .3s;
  }
  .hd-cta b{font-size:.82rem !important}
  .hd-cta i{font-size:.74rem !important; opacity:.85}
  .hd-cta::before{
    content:"";
    width:.44rem; height:.44rem; border-radius:50%;
    background:#35c9a4;
    box-shadow:0 0 0 0 rgba(53,201,164,.6);
    animation:heroLive 2.4s ease-out infinite;
    flex:none;
  }
  @keyframes heroLive{
    0%{box-shadow:0 0 0 0 rgba(53,201,164,.55)}
    70%{box-shadow:0 0 0 .5rem rgba(53,201,164,0)}
    100%{box-shadow:0 0 0 0 rgba(53,201,164,0)}
  }
  .hd-cover:hover .hd-cta{
    transform:translateY(-2px) !important;
    background:rgba(10,22,32,.92) !important;
    border-color:rgba(53,201,164,.75) !important;
  }

  /* a fade at the very bottom of the shot so it dissolves into the frame
     instead of ending on a hard crop line */
  .hd-body::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:22%;
    background:linear-gradient(to top, rgba(10,20,32,.92), transparent);
    pointer-events:none; z-index:1;
  }
  .hd-cta{z-index:2}
  .hd-body iframe{z-index:3}       /* once activated, the live app sits on top */
  .hd-cover.gone + *{z-index:3}

  .hd-foot{
    background:rgba(8,16,24,.9) !important;
    border-top:1px solid rgba(255,255,255,.06);
    /* the frame bleeds 4.5vw off the right edge, so pad the footer back in
       or the 'Open full screen' link is clipped by the viewport */
    padding-right:calc(4.5vw + 1.1rem) !important;
  }
}

/* ---- headline + supporting copy: widen the typographic range --------- */
.hero h1{letter-spacing:-.035em}
.hero .sub{
  max-width:44ch;
  font-size:1.07rem;
  line-height:1.62;
}

/* the trust line was 4 near-invisible grey fragments; make it a real,
   readable row that reads as terms rather than decoration */
.hero .trust{
  margin-top:2.4rem;
  display:flex; flex-wrap:wrap; gap:.5rem .55rem;
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
}
.hero .trust span{
  display:inline-flex; align-items:center;
  padding:.38rem .62rem;
  border:1px solid rgba(53,201,164,.24);
  border-radius:999px;
  background:rgba(53,201,164,.06);
  color:#bfe9dc;
}
.hero .trust span::before{content:none !important}

@media (prefers-reduced-motion:reduce){
  .hd-frame{transition:none}
  .hd-cta::before{animation:none}
}

/* =====================================================================
   THE END OF CARD SOUP
   ---------------------------------------------------------------------
   #offer used to stack TWO card grids back to back (4 pillars, then 3
   "subscription cannot copy" boxes) directly after the 4 door cards.
   Three rounded-rectangle grids in a row, all the same width, radius and
   padding, so the eye stopped distinguishing them and nothing landed.

   Neither grid is deleted — every word survives. They stop being cards:
   the pillars become a full-bleed numbered rail with big ghost numerals
   and hairline rules, the trailing three become a plain statement run.
   That gives the page its full-bleed moment and its scale contrast.
   ===================================================================== */

/* ---- 1. the four pillars: full-bleed rail, no boxes ------------------ */
.pillars{
  counter-reset:pil;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:100vw;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  padding:0 max(4vw, calc(50vw - 590px));
  border-top:1px solid rgba(53,201,164,.22);
  background:
    linear-gradient(180deg, rgba(53,201,164,.045), transparent 42%);
}
@media (max-width:1080px){ .pillars{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .pillars{grid-template-columns:1fr} }

.pillars .pillar{
  counter-increment:pil;
  position:relative;
  background:transparent !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.075) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  padding:2.6rem 1.9rem 2.4rem !important;
  transform:none !important;
  transition:background .45s ease;
}
.pillars .pillar:last-child{border-right:0 !important}
@media (max-width:1080px){
  .pillars .pillar:nth-child(2n){border-right:0 !important}
  .pillars .pillar:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.075) !important}
}
@media (max-width:620px){
  .pillars .pillar{border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.075) !important}
}

/* the big ghost numeral replaces the top rail — this is the scale contrast */
.pillars .pillar::before{
  content:counter(pil,decimal-leading-zero) !important;
  position:static !important;
  display:block !important;
  height:auto !important;
  width:auto !important;
  background:none !important;
  transform:none !important;
  font-family:var(--display,-apple-system,sans-serif);
  font-weight:800;
  font-size:3.5rem;
  line-height:.9;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.4px rgba(53,201,164,.42);
  margin-bottom:1.1rem;
  transition:color .45s ease, -webkit-text-stroke-color .45s ease;
}
.pillars .pillar:hover{background:rgba(53,201,164,.045) !important}
.pillars .pillar:hover::before{
  color:rgba(53,201,164,.95);
  -webkit-text-stroke-color:transparent;
}
.pillars .pillar:hover{transform:none !important; box-shadow:none !important}

/* the little eyebrow chip loses its filled pill; it is a label, not a badge */
.pillars .p-step{
  background:none !important;
  color:#7fd8c0 !important;
  padding:0 !important;
  font-family:var(--mono) !important;
  font-size:.64rem !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  font-weight:400 !important;
}
.pillars .pillar h3{font-size:1.3rem; margin-top:.5rem}
.pillars .pillar > p{font-size:.92rem}
.pillars .pillar ul{margin-top:1rem}
.pillars .pillar li{font-size:.85rem}
.pillars .p-fee{
  margin-top:1.4rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:block;
  font-size:.78rem !important;
}

/* ---- 2. "the part a subscription cannot copy": statement, not boxes -- */
.loop3{
  margin-top:5rem;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:100vw;
  padding:4.5rem max(4vw, calc(50vw - 590px)) 4rem;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(53,201,164,.10), transparent 70%),
    rgba(255,255,255,.018);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.loop3 .l3-head{max-width:none; text-align:center; margin-bottom:3rem}
.loop3 .l3-head h3,.loop3 .l3-head h2{
  font-size:clamp(1.6rem,3.2vw,2.5rem);
  letter-spacing:-.03em;
  max-width:22ch; margin:0 auto;
}
.loop3 .l3-head p{max-width:56ch; margin:1rem auto 0}

.loop3 .l3-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  counter-reset:l3;
}
@media (max-width:820px){ .loop3 .l3-row{grid-template-columns:1fr} }

.loop3 .l3{
  counter-increment:l3;
  position:relative;
  background:transparent !important;
  border:0 !important;
  border-left:1px solid rgba(255,255,255,.09) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 2rem 0 2rem !important;
  transform:none !important;
}
.loop3 .l3:first-child{border-left:0 !important; padding-left:0 !important}
@media (max-width:820px){
  .loop3 .l3{border-left:0 !important; padding-left:0 !important; padding-bottom:2rem !important}
}
/* NOTE: no generated numeral here — the copy in <b> already begins
   "01 · ", "02 · ", "03 · ", so a counter would print the number twice. */
.loop3 .l3 b{display:block; font-size:1.06rem; color:#eaf2f7; margin-bottom:.55rem; letter-spacing:-.01em}
.loop3 .l3 b::first-line{color:#eaf2f7}
.loop3 .l3:hover{transform:none !important; box-shadow:none !important}

@media (prefers-reduced-motion:reduce){
  .pillars .pillar,.pillars .pillar::before,.loop3 .l3{transition:none}
}