/* ============================================================
   EASY STUDIO — section styles layered on top of base.css.
   base.css carries the shared identity (tokens, nav, buttons,
   hero type, form, FAQ, footer). Everything here is new surface
   that the v4 page did not need: screenshot frames, the feature
   rows, the channel grid and the analytics cards.
   ============================================================ */

/* ============================================
   SCREENSHOT FRAME
   Product shots are the proof on this page, so they get a real
   browser-chrome frame rather than a bare <img>. The amber glow
   underneath matches the hero dashboard treatment on v4.
   ============================================ */
.shot-frame{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#0F0F12;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 30px 70px -20px rgba(0,0,0,.85),
    0 0 90px -40px rgba(255,179,0,.35);
}
.shot-chrome{
  display:flex;align-items:center;gap:7px;
  padding:10px 14px;
  background:rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.shot-dot{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.16);
  flex-shrink:0;
}
.shot-dot:first-child{background:rgba(255,95,86,.5)}
.shot-dot:nth-child(2){background:rgba(255,189,46,.5)}
.shot-dot:nth-child(3){background:rgba(39,201,63,.45)}
.shot-url{
  margin-left:10px;
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;
  color:var(--txt-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shot-img-wrap{
  position:relative;
  background:#0B0B0E;
  line-height:0;
  /* Every capture is 1600x1000 CSS pixels. Declaring the ratio here means
     the frame reserves its full height before the image decodes, so a
     lazy-loaded shot below the fold cannot collapse the section to zero
     height (which also stops it from ever entering the viewport and
     loading at all). */
  aspect-ratio:8/5;
}
.shot-img-wrap img,
.shot-img-wrap video{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:top center;
}

/* Walkthrough slots. The <video> sits above a still of the same screen:
   if the recording is missing or the browser cannot play it, JS drops the
   video and the fallback image is what shows, so the panel is never empty.
   Both are stacked rather than swapped to avoid a layout shift. */
.shot-video{position:relative;z-index:1}
.shot-fallback{
  position:absolute;inset:0;z-index:0;
}
.shot-frame.has-video .shot-fallback{display:none}
.shot-frame.no-video .shot-video{display:none}
.shot-frame.no-video .shot-fallback{position:relative}

/* Placeholder state: until the real PNG is dropped in, the frame
   still holds its space and says what belongs there, so the page
   never renders with broken-image icons. JS adds .is-missing. */
.shot-frame.is-missing .shot-img-wrap{
  aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(135deg, rgba(255,179,0,.05), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px);
}
.shot-frame.is-missing img{display:none}
.shot-frame.is-missing .shot-img-wrap::after{
  content:attr(data-missing-label);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,179,0,.55);
  text-align:center;padding:0 24px;line-height:1.8;
}

/* The v4 hero opens with a chip that carries 36px of bottom margin before
   the headline. Studio drops the chip, so that breathing room has to come
   back as padding or the h1 sits too close under the floating nav. */
.hero{padding-top:132px}
@media(max-width:900px){.hero{padding-top:116px}}

/* ============================================
   HERO BEATS — "One calendar. Every platform. Full analytics."
   The promise restated in its shortest form, directly above the CTA.
   Set larger and tighter than the subhead so it reads as a closing
   line rather than a second paragraph.
   ============================================ */
/* Elastic width: JS sets an explicit width per word. Easing it on roughly
   the same curve as the word's vertical slide makes the headline reflow as
   one motion instead of snapping to the new length. */
.title-rotator{
  transition:width .5s cubic-bezier(0.34,1.2,0.64,1);
  will-change:width;
}
@media(prefers-reduced-motion:reduce){
  .title-rotator{transition:none}
}

/* The shared .sub carries 36px below it, sized for a subhead that sits
   directly on the buttons. Here the beats line comes next, so pull it up
   and let the beats own the gap to the CTA. */
.hero .sub{margin-bottom:20px}

.hero-beats{
  margin:0 auto 30px;
  font-size:clamp(17px,1.9vw,22px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.4;
  color:var(--txt);
  text-wrap:balance;
}
.hero-beats span{
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Hero shot sits under the headline, pulled up into the glow. */
.shot-hero-wrap{
  position:relative;z-index:2;
  max-width:1180px;
  margin:60px auto 0;
  padding:0 24px;
}
.shot-frame--hero{
  transform:perspective(1800px) rotateX(3deg);
  transform-origin:50% 0;
}
@media(max-width:900px){
  .shot-hero-wrap{margin-top:44px;padding:0 16px}
  .shot-frame--hero{transform:none}
}

/* ============================================
   HOW IT WORKS — four steps, titles only
   Without descriptions the vertical spine had nothing to span, so the
   steps run as a horizontal track instead: four equal cards with the
   connector between them, which reads as a sequence at a glance rather
   than as a list you have to work down.
   ============================================ */
.flow{
  background:var(--bg);
  padding:96px 0 110px;
  scroll-margin-top:80px;
}
@media(max-width:900px){.flow{padding:70px 0 80px}}
@media(max-width:720px){.flow{padding:56px 0 70px}}

/* Matches .feat-header's box exactly (760px, 24px gutters) so this heading
   sits on the same measure as every other section title; max-width:20ch was
   giving it a 731px box that read as slightly off-centre against them. */
.flow-head{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(32px,4.2vw,54px);
  line-height:1.08;letter-spacing:-.03em;
  color:var(--txt);
  max-width:760px;
  margin:0 auto 60px;
  padding:0 24px;
  text-align:center;text-wrap:balance;
}
@media(max-width:600px){
  .flow-head{margin-bottom:34px}
}
.flow-head em{
  font-style:normal;font-weight:500;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.flow-steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  max-width:1100px;margin:0 auto;
}
@media(max-width:900px){.flow-steps{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:560px){.flow-steps{grid-template-columns:1fr}}

.flow-step{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:22px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:16px;
  text-align:center;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.flow-step:hover{
  border-color:rgba(255,179,0,.32);
  background:linear-gradient(180deg, rgba(255,179,0,.07), rgba(255,255,255,.015));
  transform:translateY(-3px);
}
.flow-step::after{display:none}
.flow-step h3{
  font-family:var(--sans);font-weight:500;
  font-size:16.5px;line-height:1.35;
  letter-spacing:-.02em;
  color:var(--txt);margin:0;
  text-wrap:balance;
}

/* ============================================
   CHANNEL MARQUEE — official brand marks
   The track holds the six platforms twice and travels exactly -50%, so
   the second copy lands where the first began and the loop is seamless.
   Masked at both edges so chips fade rather than pop at the boundary.
   ============================================ */
.chan-marquee{
  position:relative;
  margin:52px auto 0;
  /* Full-bleed: the strip runs edge to edge of the viewport, not inside
     the 1280px column, so the loop reads as an unbroken stream. */
  margin-inline:calc(50% - 50vw);
  overflow:hidden;
  padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.chan-marquee-track{
  display:flex;width:max-content;
  animation:chanScroll 30s linear infinite;
}
.chan-marquee:hover .chan-marquee-track{animation-play-state:paused}
.chan-marquee-set{display:flex;gap:16px;padding-right:16px;align-items:center}
@keyframes chanScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .chan-marquee-track{animation:none}
  .chan-marquee{overflow-x:auto;scrollbar-width:none}
  .chan-marquee::-webkit-scrollbar{display:none}
}

/* Rounded-square brand tiles: each mark on its own colour, no wordmark.
   The SVGs ship as single-colour paths, so the mark is knocked out to
   white and the tile carries the brand colour behind it. */
.chan-chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;
  border-radius:18px;
  flex-shrink:0;
  transition:transform .25s var(--ease);
}
.chan-chip:hover{transform:translateY(-3px)}
.chan-chip img{
  width:34px;height:34px;display:block;
  filter:brightness(0) invert(1);
}

.chan-chip--instagram{
  background:linear-gradient(135deg,#833AB4 0%,#E1306C 50%,#F77737 100%);
}
.chan-chip--facebook{background:#0866FF}
.chan-chip--threads{background:#101010;border:1px solid rgba(255,255,255,.16)}
.chan-chip--youtube{background:#FF0000}
.chan-chip--tiktok{background:#010101;border:1px solid rgba(255,255,255,.16)}
.chan-chip--linkedin{background:#0A66C2}

@media(max-width:600px){
  .chan-chip{width:54px;height:54px;border-radius:14px}
  .chan-chip img{width:26px;height:26px}
}

/* ============================================
   OFFICIAL INTEGRATIONS NOTE
   One line closing the section. Centred and quiet: it answers an
   objection rather than making a claim of its own.
   ============================================ */
.chan-official{
  display:flex;align-items:center;justify-content:center;gap:10px;
  max-width:640px;margin:30px auto 0;
  font-size:13.5px;line-height:1.6;
  color:var(--txt-mute);
  text-align:center;
}
.chan-official-ico{
  width:18px;height:18px;flex-shrink:0;
  color:#FFB300;
}
.chan-official-ico svg{width:100%;height:100%;display:block}
@media(max-width:560px){
  .chan-official{align-items:flex-start;text-align:left;font-size:13px}
  .chan-official-ico{margin-top:2px}
}

/* ============================================
   FEATURES SECTION
   Lost its own rules when the stacked feature rows were removed, so it
   was position:static with no padding: the hero sits at z-index 2 and
   its tilted screenshot (which overhangs by ~15px thanks to the
   rotateX) painted straight over this section's headline. Giving the
   section a stacking context of its own puts it back on top.
   ============================================ */
.feat{
  position:relative;
  z-index:3;
  background:var(--bg);
  padding:96px 0 110px;
  scroll-margin-top:80px;
}
@media(max-width:900px){.feat{padding:70px 0 80px}}
@media(max-width:720px){.feat{padding:56px 0 70px}}

/* ============================================
   SECTION HEADER
   Shared by the features, enterprise and pricing sections. Went with
   the old stacked feature rows, which is why those headings were
   rendering left-aligned and flush against the block below them.
   ============================================ */
.feat-header{
  max-width:760px;
  margin:0 auto 60px;
  text-align:center;
  padding:0 24px;
}
.feat-header h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(32px,4.2vw,54px);
  line-height:1.08;letter-spacing:-.03em;
  color:var(--txt);margin:0 0 18px;
  text-wrap:balance;
}
.feat-header h2 em{
  font-style:normal;font-weight:500;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.feat-header p{
  font-size:17px;line-height:1.65;
  color:var(--txt-dim);margin:0;
  text-wrap:pretty;
}
@media(max-width:600px){
  .feat-header{margin-bottom:40px}
}

/* ============================================
   FEATURE SHOWCASE
   Rail and screenshot share one framed panel rather than floating as
   two separate blocks with a gap between them: the tabs sit inside the
   same border as the image they control, so the whole thing reads as a
   single piece of product UI.
   ============================================ */
.show-wide{max-width:1240px;margin:0 auto;padding:0 32px}
@media(max-width:900px){.show-wide{padding:0 20px}}

.show{
  display:grid;
  grid-template-columns:minmax(0,272px) minmax(0,1fr);
  align-items:stretch;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border:1px solid var(--line-strong);
  border-radius:20px;
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 34px 80px -34px rgba(0,0,0,.85);
}
@media(max-width:1000px){
  .show{grid-template-columns:1fr}
}

/* Rail sits in its own column inside the panel, divided by a hairline
   rather than by empty space. */
.show-rail{
  display:flex;flex-direction:column;gap:2px;
  padding:14px;
  border-right:1px solid var(--line);
  background:rgba(0,0,0,.18);
}
@media(max-width:1000px){
  .show-rail{
    border-right:none;
    border-bottom:1px solid var(--line);
  }
}

.show-tab{
  position:relative;
  display:flex;align-items:flex-start;gap:11px;
  width:100%;padding:13px 14px;
  background:transparent;
  border:none;border-radius:11px;
  text-align:left;cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.show-tab:hover{background:rgba(255,255,255,.045)}
.show-tab.is-active{background:rgba(255,179,0,.1)}
/* Amber spine on the active tab: reads as a pointer into the stage
   beside it, which a plain fill does not. */
.show-tab.is-active::before{
  content:"";
  position:absolute;left:0;top:12px;bottom:12px;
  width:2px;border-radius:2px;
  background:linear-gradient(180deg,#FFB300,#FF8F00);
}
.show-tab-num{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.06em;line-height:1.6;
  color:var(--txt-mute);
  transition:color .25s var(--ease);
  flex-shrink:0;
}
.show-tab.is-active .show-tab-num{color:#FFB300}
.show-tab-text{display:block;min-width:0}
.show-tab-text b{
  display:block;
  font-size:14px;font-weight:500;
  letter-spacing:-.01em;line-height:1.35;
  color:var(--txt-dim);
  transition:color .25s var(--ease);
}
.show-tab.is-active .show-tab-text b{color:var(--txt);font-weight:600}
.show-tab-text i{
  display:block;margin-top:3px;
  font-style:normal;font-size:12px;line-height:1.45;
  color:var(--txt-mute);
}

/* Stage: the screenshot fills its half of the panel edge to edge, so the
   panel border is the only frame. The inner .shot-frame drops its own
   border and radius to avoid a frame inside a frame. */
.show-stage{position:relative;min-width:0;padding:14px}
.show-panel{display:block}
.show-panel[hidden]{display:none}
.show-stage .shot-frame{
  width:100%;
  border-radius:12px;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.8);
}
.show-panel.is-active .shot-frame{
  animation:showIn .42s var(--ease) both;
}
@keyframes showIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .show-panel.is-active .shot-frame{animation:none}
}

/* ============================================
   PRICING — one board
   The plan cards are the header row of the comparison table: both use
   the same 4-column grid (label column + three plans), so a plan's
   price sits directly above its ticks and the whole thing reads as a
   single surface. Column template must stay identical in .price-board-head
   and the table colgroup proportions below.
   ============================================ */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.pricing{
  background:var(--bg);
  padding:96px 0 110px;
  scroll-margin-top:80px;
}
@media(max-width:900px){.pricing{padding:70px 0 80px}}
@media(max-width:720px){.pricing{padding:56px 0 70px}}

.price-board{
  max-width:1080px;margin:0 auto;
  border:1px solid var(--line-strong);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 34px 80px -34px rgba(0,0,0,.85);
  overflow:hidden;
}

/* ---- header row: switch + three plan cards ---- */
.price-board-head{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--line-strong);
}
.pb-corner{
  display:flex;align-items:flex-end;
  padding:26px 20px 22px 24px;
}

.price-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:6px;
  padding:34px 18px 22px;
  border-left:1px solid var(--line);
  text-align:center;
}
.price-card--rec{background:rgba(255,179,0,.06)}
.price-card-flag{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  padding:4px 12px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:#241700;
  background:linear-gradient(135deg,#FFE082,#FFB300 55%,#FF8F00);
  box-shadow:0 6px 18px -6px rgba(255,179,0,.7);
  white-space:nowrap;
}
.price-card h3{
  font-family:var(--sans);font-weight:600;
  font-size:16px;letter-spacing:-.01em;
  color:var(--txt);margin:0;
}
.price-card-amount{
  display:flex;align-items:baseline;justify-content:center;gap:2px;
  color:var(--txt);line-height:1;margin-top:2px;
}
.price-card-amount .cur{font-size:16px;font-weight:500;align-self:flex-start;margin-top:5px}
.price-card-amount .amt{
  font-size:clamp(30px,3vw,38px);font-weight:600;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.price-card-amount .per{font-size:13px;color:var(--txt-mute)}
.price-card-amount .custom{
  font-size:clamp(22px,2.2vw,27px);font-weight:600;letter-spacing:-.02em;
}
/* The discount math: both prices visible at once, so the reader never has
   to toggle to find out what yearly actually costs. */
.price-card-math{
  font-size:11.5px;line-height:1.55;
  color:var(--txt-mute);margin:2px 0 10px;
  min-height:2.6em;
}
.price-card-math b{color:#FFB300;font-weight:600}

.price-card-cta{
  display:block;width:100%;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--line-strong);
  background:transparent;
  font-size:13.5px;font-weight:600;
  color:var(--txt);text-decoration:none;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.price-card-cta:hover{
  border-color:rgba(255,179,0,.45);
  background:rgba(255,179,0,.08);
}
.price-card-cta--solid{
  background:linear-gradient(135deg,#FFE082,#FFB300 55%,#FF8F00);
  border-color:transparent;color:#241700;
  box-shadow:0 8px 22px -8px rgba(255,179,0,.6);
}
.price-card-cta--solid:hover{
  background:linear-gradient(135deg,#FFE9A8,#FFC02E 55%,#FF9E1B);
}

/* ---- billing switch ---- */
.price-period{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  width:100%;
  gap:4px;padding:4px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:999px;
}
.price-period-btn{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 8px;min-height:40px;
  background:transparent;border:none;border-radius:999px;
  font-family:var(--sans);font-size:13px;font-weight:500;
  color:var(--txt-dim);cursor:pointer;
  transition:color .25s var(--ease);
  white-space:nowrap;
}
.price-period-btn.is-active{color:var(--ink)}
.price-period-pill{
  position:absolute;z-index:1;
  top:4px;bottom:4px;left:4px;
  width:calc(50% - 6px);
  border-radius:999px;
  background:linear-gradient(135deg,#FFE082,#FFB300 55%,#FF8F00);
  box-shadow:0 4px 14px -4px rgba(255,179,0,.55);
  transition:transform .32s var(--ease);
}
.price-period.is-yearly .price-period-pill{transform:translateX(calc(100% + 4px))}
.price-save{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.04em;
  padding:2px 6px;border-radius:5px;
  background:rgba(255,179,0,.16);
  border:1px solid rgba(255,179,0,.34);
  color:#FFB300;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.price-period-btn.is-active .price-save{
  background:rgba(36,23,0,.16);
  border-color:rgba(36,23,0,.28);
  color:rgba(36,23,0,.82);
}
@media(prefers-reduced-motion:reduce){.price-period-pill{transition:none}}

/* ---- table: same 4-column proportions as the header row ---- */
.price-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  table-layout:fixed;
}
.price-table tbody th{
  width:31%;
  padding:13px 18px 13px 24px;
  font-size:13.5px;font-weight:400;
  color:var(--txt-dim);
  text-align:left;
  border-bottom:1px solid var(--line);
}
.price-table tbody td{
  width:23%;
  padding:13px 12px;
  text-align:center;
  border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);
}
.price-table tbody td:nth-child(3){background:rgba(255,179,0,.045)}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td{border-bottom:none}
.price-table tbody tr:hover th{color:var(--txt)}

.pt-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;
}
.pt-mark svg{width:12px;height:12px}
.pt-yes{background:rgba(46,204,113,.14);color:#2ECC71}
.pt-no{background:rgba(255,92,92,.12);color:#FF5C5C}

.price-foot{
  text-align:center;
  margin:26px auto 0;
  font-size:13.5px;color:var(--txt-mute);
}

/* ---- small screens: same board, scrolled ----
   The stacked card layout looked nothing like the desktop board, so the
   board keeps its exact desktop shape and scrolls horizontally inside a
   full-bleed strip instead. ---- */
@media(max-width:860px){
  .price-scroll{
    margin-inline:calc(50% - 50vw);
    padding:0 20px 8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .price-scroll::-webkit-scrollbar{display:none}
  .price-board{min-width:760px}
  .pb-corner{padding:20px 14px 16px 16px}
  .price-card{padding:30px 12px 18px}
  .price-card-amount .amt{font-size:30px}
  .price-card-math{font-size:11px}
  .price-table tbody th{padding:12px 12px 12px 16px;font-size:13px}
}

/* ============================================
   STORY
   The two "not easy" lines are set tight and dim as a single block, so
   the turn lands as a reply to them rather than as a third bullet. An
   amber rule and a glow behind the block give the section a centre of
   gravity it did not have when it was four flat lines.
   ============================================ */
.story{
  position:relative;
  background:var(--bg);
  padding:96px 0 110px;
  scroll-margin-top:80px;
  overflow:hidden;
}
@media(max-width:900px){.story{padding:70px 0 80px}}
@media(max-width:720px){.story{padding:56px 0 70px}}

/* Soft amber pool behind the copy: the section is pure type, so the glow
   is what stops it reading as a footnote between two dense blocks. */
.story::before{
  content:"";
  position:absolute;left:50%;top:50%;
  width:min(760px,90vw);height:min(760px,90vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,179,0,.10), transparent 62%);
  pointer-events:none;
}

.story-inner{
  position:relative;z-index:1;
  max-width:820px;margin:0 auto;
  text-align:center;
}

.story-lead{
  display:flex;flex-direction:column;gap:2px;
  margin:0 0 18px;
  font-size:clamp(17px,2vw,21px);
  line-height:1.35;letter-spacing:-.015em;
  color:var(--txt-mute);
}

.story-head{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(30px,4.6vw,58px);
  line-height:1.06;letter-spacing:-.035em;
  color:var(--txt);
  margin:0;
  text-wrap:balance;
}
.story-head em{
  font-style:normal;font-weight:500;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* inline-block so the rule above it is only as wide as the text, but it
   still has to own its own line: as a bare inline-block the CTA flowed up
   beside it and the two overlapped. */
.story-kicker{
  position:relative;
  display:block;width:max-content;margin-inline:auto;
  margin:26px auto 0;padding-top:22px;
  font-size:clamp(16px,1.8vw,19px);
  color:var(--txt-dim);
  letter-spacing:-.01em;
}
/* Short amber rule instead of a full-width border: it ties the kicker to
   the headline without cutting the section in half. */
.story-kicker::before{
  content:"";
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:56px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#FFB300,#FF8F00);
}

.story-cta{margin-top:34px;display:inline-flex}

@media(max-width:600px){
  .story-lead{font-size:15.5px;margin-bottom:14px}
  .story-kicker{margin-top:22px;padding-top:18px}
  .story-cta{margin-top:28px}
}

/* ============================================
   TRIAL FORM — VIP success variant
   The base .eh-success styles come from base.css; this only adds
   the qualified-lead call-to-action that v4 had no equivalent for.
   ============================================ */
.eh-success--vip .eh-vip-cta{
  width:100%;
  margin-top:18px;
  text-decoration:none;
}
.eh-success--vip p b{color:#FFB300;font-weight:600}

/* The band that the qualified answer reveals inline on step 2, so the
   $100k+ user learns about the call BEFORE submitting, not only after. */
.eh-vip-note{
  display:none;
  align-items:flex-start;gap:11px;
  padding:13px 15px;
  margin:2px 0 18px;
  background:rgba(255,179,0,.07);
  border:1px solid rgba(255,179,0,.28);
  border-radius:10px;
  font-size:13px;line-height:1.6;
  color:rgba(255,255,255,.85);
}
.eh-vip-note.is-on{display:flex}
.eh-vip-note svg{
  width:16px;height:16px;flex-shrink:0;
  color:#FFB300;margin-top:1px;
}
.eh-vip-note b{color:#FFB300;font-weight:600}

/* ============================================
   SCROLL REVEAL
   base.css defines .fade-in for the v4 sections; Studio reuses the
   same class name and the same IntersectionObserver in studio.js.
   ============================================ */
.fade-in{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.fade-in.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .fade-in{opacity:1;transform:none;transition:none}
  .shot-frame--hero{transform:none}
}

/* ============================================================
   FEATURE LIST
   Was defined alongside the old stacked feature rows and went with
   them; the showcase panels still use it, so it lives here now.
   ============================================================ */
.feat-list{
  list-style:none;
  display:flex;flex-direction:column;gap:13px;
  margin:0;padding:0;
}
.feat-list li{
  position:relative;
  padding-left:25px;
  font-size:14.5px;line-height:1.65;
  color:var(--txt-dim);
}
.feat-list li b{color:var(--txt);font-weight:600}
.feat-list li::before{
  content:"";
  position:absolute;left:0;top:.55em;
  width:10px;height:10px;
  border-radius:3px;
  background:linear-gradient(135deg,#FFB300,#FF8F00);
  box-shadow:0 0 12px -2px rgba(255,179,0,.6);
}

/* ============================================================
   MOBILE
   Everything below 720px. The desktop layout assumes a wide stage
   beside a tab rail and a hero screenshot that can afford to be
   small; neither holds on a phone, so the rules here are about
   giving the product shots real size and the text real margins.
   ============================================================ */
@media(max-width:720px){

  /* --- hero --- */
  /* The desktop hero reserves room for a large tilted dashboard. On a
     phone that reservation reads as a hole between the CTA and the
     screenshot, so the gap closes right up. */
  /* base.css pins .hero-inner to calc(100svh - 100px) so the v4 hero
     fills the first screen. Studio's copy is much shorter, so that
     minimum became 216px of dead space between the CTA and the
     screenshot. Height comes from the content here instead. */
  .hero{
    /* Clears the floating nav pill (about 66px tall plus its offset) with
       room to breathe; 104px put the h1 right under it. */
    padding:124px 20px 0;
  }
  .hero-inner{min-height:0;display:block}
  .hero .sub{margin-bottom:22px;font-size:15.5px}
  .shot-hero-wrap{margin-top:30px;padding:0}

  /* Screenshots are the proof on this page and were rendering at a
     third of the screen. Let them run to the full width, with the
     browser chrome kept so they still read as product. */
  .shot-frame{border-radius:12px}
  .shot-chrome{padding:8px 11px}
  .shot-url{font-size:9.5px}
  /* A 16:10 crop of a dense dashboard is unreadable this small: taller
     framing keeps more of the actual UI on screen. */
  .shot-img-wrap{aspect-ratio:4/3}

  /* --- section headings --- */
  .feat-header{margin-bottom:34px;padding:0}
  .feat-header h2{font-size:clamp(26px,7.4vw,32px);margin-bottom:12px}
  .feat-header p{font-size:15px}
  .flow-head{font-size:clamp(26px,7.4vw,32px);margin-bottom:34px}

  /* --- showcase --- */
  .show{gap:20px}
  .show-wide{padding:0 20px}
  /* Full-bleed scroller: the rail is padded back inside so the first
     and last tab line up with the page margin while the strip itself
     scrolls edge to edge. */
  /* Inherits the full-bleed scroller above; only the bottom gap changes. */
  .show-rail{padding-bottom:8px}
  .show-tab{
    /* Was max-width:250px, which cut the second tab mid-word and made
       the rail look broken rather than scrollable. */
    width:min(74vw,290px);
    max-width:none;
    padding:13px 15px;
    border-radius:12px;
    background:rgba(255,255,255,.03);
    border-color:var(--line);
  }
  .show-tab.is-active{
    background:rgba(255,179,0,.08);
    border-color:rgba(255,179,0,.34);
  }
  .show-tab-num{font-size:11px}
  .show-tab-text b{font-size:14px}
  .show-tab-text i{font-size:12px}

  .show-panel{gap:20px}
  .show-copy h3{font-size:22px;margin-bottom:12px}
  .show-copy > p{font-size:15px;margin-bottom:18px}
  .feat-list li{font-size:14px;padding-left:23px}

  /* --- flow --- */
  .flow{padding-bottom:70px}
  .flow-steps{gap:10px}
  .flow-step{
    /* Stacked cards read better as a row on a phone: the number sits
       beside the title instead of above it, halving the height. */
    flex-direction:row;align-items:center;gap:14px;
    padding:16px 18px;border-radius:14px;
  }
        .flow-step h3{font-size:15.5px}
  .chan-marquee{margin-top:34px}
  .chan-chip{padding:11px 17px;gap:9px}
  .chan-chip img{width:22px;height:22px}
  .chan-chip b{font-size:13.5px}

  /* --- pricing --- */
  .price-wrap{gap:26px}
  .price-panel{padding:12px;border-radius:20px}
  .price-period-btn{padding:11px 10px;font-size:13px}
  .price-opt{padding:14px 15px}
  .price-opt-name{font-size:15px}
  .price-opt-sub{font-size:12px}
  .price-num{font-size:clamp(46px,13vw,58px)}
  .price-inc-col h4{font-size:13px}
  .price-list li{font-size:13.5px}

  /* --- enterprise --- */
  .ent{padding-bottom:70px}
  .ent-cta{margin-top:38px}
  .ent-cta > p{font-size:15px}

  /* --- story --- */
  .story{padding-bottom:70px}
  .story-head{font-size:clamp(23px,6.6vw,30px);margin-bottom:26px}

  /* --- tap targets --- */
  /* Anything you press should clear 44px, which the period switch and
     the footer links did not. */
  .price-period-btn{min-height:44px}
  .footer-section-body a,
  .footer-section-body span{
    display:inline-block;padding:5px 0;min-height:34px;
  }
  .footer-social a{width:40px;height:40px}
}

/* Very narrow phones: the tab rail should not force a wide scroll. */
@media(max-width:400px){
  .show-tab{width:min(80vw,270px)}
  .flow-step h3{font-size:15px}
}


/* ============================================
   FINAL CTA refinements
   ============================================ */
/* The rain is scenery for the headline, not wallpaper for the form: the
   band stops at 320px and fades out, so the form below sits on clean
   ground. */
/* One radial mask handles both fades: the rain pools around the headline
   (left third of the row) and dies out before it reaches the form. */
.matrix-band{
  position:absolute;inset:0 0 auto 0;height:380px;
  overflow:hidden;pointer-events:none;
  opacity:.75;
  -webkit-mask-image:radial-gradient(ellipse 42% 90% at 26% 42%, #000 35%, transparent 78%);
  mask-image:radial-gradient(ellipse 42% 90% at 26% 42%, #000 35%, transparent 78%);
}
@media(max-width:900px){
  /* Headline is centred on small screens, so the pool follows it. */
  .matrix-band{
    -webkit-mask-image:radial-gradient(ellipse 70% 85% at 50% 30%, #000 35%, transparent 80%);
    mask-image:radial-gradient(ellipse 70% 85% at 50% 30%, #000 35%, transparent 80%);
  }
}
.matrix-band .matrix-bg{position:absolute;inset:0}


/* Showcase tabs without the number column. */
.show-tab{gap:0}

@media(max-width:720px){
  /* Final CTA on a phone. The form used to want the full width; now the
     section is copy + button, so it keeps a side gutter like every other
     section on the page. */
  .final-cta{padding:56px 20px 64px}
  .final-cta-inner{gap:26px}
  .cta-copy h2{font-size:clamp(26px,7.6vw,32px)}
  .matrix-band{height:220px}
}

/* ============================================================
   COMMUNITY CTA
   The final section used to be a two-column grid (copy | signup
   form). With the form gone there is a single child, so the grid
   collapses to one centred column instead of leaving the copy
   squeezed into the old 1fr track.
   ============================================================ */
.final-cta-inner--solo{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  max-width:760px;
}
.final-cta-inner--solo .cta-copy p,
.final-cta-inner--solo .cta-copy h2{margin-left:auto;margin-right:auto}

.cta-copy-sub{max-width:60ch}

/* Three proof points under the sub-headline. Centred as a block,
   but each line stays left-aligned so the ticks form one column. */
.cta-copy-list{
  list-style:none;margin:0 auto 32px;padding:0;
  display:inline-flex;flex-direction:column;gap:12px;
  text-align:left;
}
.cta-copy-list li{
  position:relative;padding-left:30px;
  font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.85);
}
.cta-copy-list li::before{
  content:"";position:absolute;left:0;top:.34em;
  width:16px;height:16px;border-radius:50%;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
}
.cta-copy-list li::after{
  content:"";position:absolute;left:5px;top:.62em;
  width:5px;height:8px;
  border:solid #1a1205;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.cta-copy-btn{margin-top:4px}

@media(max-width:640px){
  .cta-copy-list li{font-size:14.5px}
  .cta-copy-list{gap:10px}
  /* Let the button size to its label instead of stretching edge to edge. */
  .final-cta-inner--solo .cta-copy-btn{width:auto;max-width:100%}
}