/* Home page (landing/v2/index), the <style> block of index.html as is, then the inline styles of its markup as classes */

.hero-home{padding-top:18px}
.hero-home .belt{margin-bottom:44px}
/* .trusted ships with no bottom padding, so the next section sat on top of it */
.trusted--hero{padding-bottom:var(--section-y)}

/* ---------- Hero picker: one question, two apps ----------
   The thumb is measured from the chosen button, so it fits whatever the
   labels say at whatever width they end up. */
.pick{margin:clamp(46px,5vw,78px) auto 0;display:flex;flex-direction:column;align-items:center;gap:15px}
.pick-q{font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--muted)}
.seg2{position:relative;display:inline-flex;padding:3px;border-radius:var(--pill);
      background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.seg2__thumb{position:absolute;top:3px;left:0;height:calc(100% - 6px);width:var(--w,0);
      transform:translateX(var(--x,0));border-radius:var(--pill);background:#E8EAEE;
      transition:transform .34s var(--ease),width .34s var(--ease)}
.seg2 button{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;
      font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:-.003em;color:var(--muted);
      line-height:1.55;padding:7.5px 18px;border-radius:var(--pill);white-space:nowrap;
      transition:color .28s var(--ease)}
.seg2 button:hover{color:var(--ink)}
.seg2 button[aria-selected="true"]:hover{color:var(--ink)}
.seg2 button[aria-selected="true"]{color:var(--ink);font-weight:600}
.seg2 button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* the chosen app previews itself, full width under the toggle */
.pick-panel{display:none;width:100%;margin-top:clamp(16px,2.2vw,34px)}
.pick-panel .ph{aspect-ratio:16/9;min-height:0;border-radius:var(--r-lg);
      box-shadow:var(--shadow)}
.pick-cap{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
      margin:20px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.pick-cap .wordmark{height:22px;width:auto;flex:none}
.pick-cap b{color:var(--ink);font-weight:700}
.pick-cap .btn{flex:none;white-space:nowrap}
.pick-panel.on{display:block;animation:pick-in .32s var(--ease) both}
@keyframes pick-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:620px){
  .seg2{width:100%;max-width:340px;flex-direction:column}
  .seg2 button{white-space:normal}
  .seg2__thumb{left:3px;width:calc(100% - 6px);height:var(--h,0);transform:translateY(var(--y,0));
       transition:transform .34s var(--ease),height .34s var(--ease)}
  .pick-panel .ph{aspect-ratio:16/10;border-radius:var(--r)}
  .pick-cap{gap:10px}
}

/* Resopie is one app away from the two that ship today, so it gets the full
   width of the grid rather than a lonely half-row. */

/* ============================================================
   PARALLAX FOOTER (ported from the dira1 concept)
   Scene canvas 1376 x 1554; every offset below is that canvas in %,
   so the whole thing scales with the page. Layer attributes read by
   the engine at the bottom of this file:
     data-pspeed   scroll travel in px, negative starts high and sinks
     data-pmouse   pointer-depth factor (0-1)
     data-pfade    "start,end" opacity window
     data-pscale   starting scale, eases to 1 across the fade
     data-pwindow  "start,end" confines travel to that part of the reveal
   Type and the signup form stay on the site's own scale, not dira1's.
   ============================================================ */
/* the sticky header would cut a frosted band across the middle of the
   scene, so it steps out of the way once the footer takes the screen */
.nav{transition:background-color .35s var(--ease),box-shadow .35s var(--ease),
     backdrop-filter .35s var(--ease),transform .4s var(--ease)}
.fx-nav-away .nav{transform:translateY(-101%)}
.fx-footer{position:relative;border-top:0;height:max(112.936vw,560px);
     background:linear-gradient(#fff 0%,#fff 70%,#191d0f 99%,#191d0f 100%);
     container-type:inline-size}
.fx-clip{position:absolute;inset:0;overflow:hidden}
/* the cloud stack is open at the top so clouds drift in front of the
   section above before sinking into the sky */
.fx-cloudclip{position:absolute;inset:0;overflow-x:clip;overflow-y:visible;pointer-events:none}
.fx-cloudclip .fx-layer{inset:0 0 30% 0}
.fx-contentclip{position:absolute;inset:0;z-index:10;overflow:hidden}
.fx-scene{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
     width:max(100%,496px);aspect-ratio:1376/1554;container-type:inline-size}
.fx-layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.fx-layer img{position:absolute;height:auto}
/* safety fill, only ever seen for a frame mid-resize */
.fx-backdrop{position:absolute;inset:0;background:linear-gradient(180deg,#f2f4fa 0%,#aebcdf 30%,#e8d9c8 47%,#fdb958 55%,#8fae62 63%,#2a3618 76%,#191d0f 100%)}
/* page white melting into the sky */
.fx-fade{position:absolute;left:0;right:0;top:0;height:23%;pointer-events:none;
     background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.96) 14%,rgba(255,255,255,.82) 32%,
     rgba(255,255,255,.58) 52%,rgba(255,255,255,.32) 72%,rgba(255,255,255,.12) 88%,rgba(255,255,255,0) 100%)}

img.fx-sky {left:0;      top:.77%;   width:100%}
img.fx-h4  {left:0;      bottom:0;   width:100%}
img.fx-h3  {left:0;      bottom:0;   width:100%}
img.fx-logo{left:15.70%; top:47.17%; width:69.84%;
     filter:drop-shadow(0 0 20px rgba(255,255,255,.38)) drop-shadow(0 4px 34px rgba(255,255,255,.16))}
img.fx-h2  {left:0;      bottom:0;   width:100%}
img.fx-g1  {left:0;      bottom:0;   width:100%}
/* each cloud is cropped hard on its outer edge, so it sits ~3% further
   out than the artboard and the cut stays off-canvas at full drift */
img.fx-lc2 {left:-3.4%;  top:17.86%; width:44.26%}
img.fx-lc1 {left:-3.4%;  top:2.14%;  width:35.03%}
img.fx-rc3 {left:53.6%;  top:25.43%; width:49.71%}
img.fx-rc2 {left:64.2%;  top:32.57%; width:39.10%}
img.fx-rc1 {left:44.8%;  top:1.86%;  width:58.94%}

/* the tagline keeps this site's display face and heading scale */
.fx-talk{position:absolute;left:0;right:0;top:36.8%;text-align:center;
     font-family:var(--font-head);font-weight:800;line-height:1;letter-spacing:-.03em;
     font-size:clamp(28px,4.2cqw,64px);color:#fff;text-shadow:0 0 24px rgba(255,255,255,.35)}

@keyframes fxdriftA{from{transform:translateX(-2.1%)}to{transform:translateX(2.1%)}}
@keyframes fxdriftB{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}
img.fx-lc1{animation:fxdriftA 46s -12s ease-in-out infinite alternate}
img.fx-lc2{animation:fxdriftB 58s -30s ease-in-out infinite alternate}
img.fx-rc1{animation:fxdriftA 40s  -6s ease-in-out infinite alternate}
img.fx-rc2{animation:fxdriftB 52s -22s ease-in-out infinite alternate}
img.fx-rc3{animation:fxdriftA 64s -40s ease-in-out infinite alternate}

/* ---- content over the scene: the site's own capture form, links, legal ---- */
.fx-content{position:absolute;inset:0;z-index:10;will-change:transform}
/* nowrap: a wrapping flex box measures max-content short and breaks the row */
.fx-join{position:absolute;left:50%;top:70.4%;transform:translateX(-50%);
     width:max-content;max-width:min(94%,900px);gap:14px;flex-wrap:nowrap}
/* a percentage width contributes its *intrinsic* size to the row's
   max-content, which measured the row short - so pin the basis */
.fx-content .capture{margin:0;flex:0 0 420px;width:420px;max-width:420px;
     box-shadow:0 10px 30px rgba(30,70,20,.25)}
/* on the grass, the divider has to be white to read at all */
.fx-join .or{color:#fff;text-shadow:0 1px 6px rgba(20,40,16,.55)}
.fx-join .btn-white{border:1px solid rgba(255,255,255,.55);min-height:55px;
     box-shadow:0 10px 30px rgba(30,70,20,.25)}
.fx-content .capture:focus-within{box-shadow:0 10px 30px rgba(30,70,20,.3),0 16px 36px -22px rgba(20,22,26,.36)}
@media (max-width:760px){.fx-join{flex-direction:column;flex-wrap:wrap;width:min(92%,420px);gap:10px}
  .fx-join .capture{flex:1 1 auto;width:100%;max-width:none}
  .fx-join .btn-white{width:100%;justify-content:center}}
.fx-links{position:absolute;left:3.6%;right:3.5%;top:86.1%;
     display:flex;justify-content:space-between;align-items:center;gap:24px}
.fx-links ul{list-style:none;display:flex;gap:clamp(20px,3.2cqw,52px);margin:0;padding:0}
.fx-links ul:last-child{gap:clamp(24px,5.5cqw,88px)}
.fx-links a{color:#fff;font-weight:600;font-size:14px;opacity:.95;transition:opacity .2s;
     text-shadow:0 1px 6px rgba(30,70,20,.25)}
.fx-links a:hover{opacity:.7}
.fx-links .soon{margin-left:6px;vertical-align:1px}
.fx-legal{position:absolute;left:0;right:0;top:95.05%;text-align:center;
     color:rgba(255,255,255,.92);font-size:13px;text-shadow:0 1px 6px rgba(30,70,20,.25)}
.fx-legal a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.fx-legal a:hover{opacity:.75}
@media (max-width:700px){
  .fx-links{top:83%;flex-direction:column;gap:12px;justify-content:flex-start}
  .fx-links ul{flex-wrap:wrap;justify-content:center;gap:14px 22px}
  .fx-join{top:63%}
  .fx-legal{top:94%;font-size:12px}
}

/* ---------- A word from the team ---------- */
.note-from{display:grid;grid-template-columns:260px 1fr;gap:38px;align-items:center;
      padding:38px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm),0 0 0 1px var(--border)}
.note-from .shot{aspect-ratio:4/5;border-radius:var(--r);background:#EAEDF2;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
      text-align:center}
.note-from .shot svg{width:42px;height:42px;fill:none;stroke:#C2C8D2;stroke-width:1.5}
.note-from .shot span{font-size:11px;font-weight:700;letter-spacing:.09em;
      text-transform:uppercase;color:var(--muted)}
.note-from blockquote{margin:0;font-family:var(--font-head);font-weight:600;
      font-size:clamp(19px,2.1vw,23px);line-height:1.45;letter-spacing:-.015em;color:var(--ink)}
.note-from .by{margin:20px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
      font-size:13.5px;color:var(--muted)}
.note-from .by b{font-size:15px;font-weight:700;color:var(--ink)}
@media (max-width:760px){
  .note-from{grid-template-columns:1fr;gap:26px;padding:26px}
  .note-from .shot{aspect-ratio:3/2;max-width:none}
}
/* ---------- One app, one full-width section ---------- */
.appfull__head{max-width:720px;margin:0 auto 34px;text-align:center}
.appfull__head .wordmark{display:block;height:30px;width:auto;margin:0 auto 18px}
.appfull__head h3{font-size:clamp(26px,3.2vw,36px);margin:0 0 14px;letter-spacing:-.025em}
.appfull__head .lead{margin:0 auto;color:var(--ink-2)}
/* the logo wall reads as rows, closing on the count */
.trusted .logos{max-width:880px;margin:0 auto;gap:clamp(12px,1.3vw,18px) clamp(22px,2.6vw,40px)}
.logos .logos__more{color:var(--muted);font-weight:600}
.logos .logos__more:hover{color:var(--ink-2)}

/* app labels, not step numbers */
.steps .step-num{font-size:13px;font-weight:700;letter-spacing:-.01em;
      text-transform:none;color:var(--ink)}

/* the hero sign-up, lifted off the page */
.hero-join{justify-content:center;margin-top:6px;gap:14px}
.hero-join .capture{margin:0}
.hero-join{position:relative}
.hero-join > form,.hero-join > .or,.hero-join > .btn-white{position:relative;z-index:1}

/* the glow lives on its own layer: it drifts on a long loop, and leans
   toward the pointer. --gx/--gy are set by script, so the drift keyframes
   keep `transform` to themselves. */
.hero-join__glow{position:absolute;left:0;right:0;top:50%;margin:-84px auto 0;
      width:min(640px,100%);height:168px;border-radius:99em;pointer-events:none;z-index:0;
      background:radial-gradient(58% 66% at 50% 50%,rgba(0,110,219,.36),
            rgba(0,110,219,.14) 46%,rgba(0,110,219,0) 72%);
      filter:blur(26px);will-change:transform,translate;
      translate:var(--gx,0px) var(--gy,0px);
      animation:heroGlowDrift 13s ease-in-out infinite alternate}
@keyframes heroGlowDrift{
  0%{transform:translate3d(-12px,-5px,0) scale(.96);opacity:.82}
  50%{transform:translate3d(5px,4px,0) scale(1.05);opacity:1}
  100%{transform:translate3d(13px,-3px,0) scale(.99);opacity:.88}}
@media (prefers-reduced-motion:reduce){
  .hero-join__glow{animation:none;translate:none}}

.hero-join .capture{box-shadow:inset 0 0 0 1px var(--border),
      0 14px 34px -24px rgba(18,22,26,.5);transition:box-shadow .3s var(--ease)}
.hero-join .capture:focus-within{box-shadow:inset 0 0 0 1px var(--blue-20),
      0 16px 38px -22px rgba(0,110,219,.45)}
/* this button has a real border - an inset ring would sit 1px inside it and
   miss the corner radius, so the border itself draws the line */
.hero-join .btn-white{border:1px solid var(--border);min-height:55px;
      box-shadow:0 12px 28px -18px rgba(18,22,26,.5)}
@media (max-width:620px){.hero-join{flex-direction:column;gap:12px}
  .hero-join .capture,.hero-join .btn-white{width:100%;justify-content:center}}

/* anchors that travel */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.shot-link{display:block;text-decoration:none;border-radius:var(--r-lg);
      transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.shot-link:hover{transform:translateY(-3px);
      box-shadow:0 22px 48px -30px rgba(12,22,46,.45)}
.shot-ph{aspect-ratio:16/9;border-radius:var(--r-lg);background:var(--bg-soft);
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
      }
.shot-ph svg{width:54px;height:54px;fill:none;stroke:var(--border-2);stroke-width:1.4;
      stroke-linecap:round;stroke-linejoin:round}
.shot-ph span{font-size:11.5px;font-weight:700;letter-spacing:.09em;
      text-transform:uppercase;color:var(--muted)}

.feat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:40px}
.feat3 article{padding-top:0}
.feat3 h4{margin:0 0 7px;font-size:16.5px}
.feat3 p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.btn-row.center{justify-content:center;margin-top:34px}
@media (max-width:760px){
  .shot-ph{aspect-ratio:16/10}
  .feat3{grid-template-columns:1fr;gap:20px}
}

/* ---------- Resopie, a single line ---------- */
.mention{display:flex;align-items:center;gap:20px;padding:22px 26px;border-radius:var(--r);
      background:var(--bg-soft);box-shadow:inset 0 0 0 1px var(--border)}
.mention .mark,.mention .lot{width:38px;height:38px;flex:none}
.mention > div{flex:1;min-width:0}
.mention b{display:flex;align-items:center;gap:9px;font-family:var(--font-head);
      font-weight:800;font-size:17px;letter-spacing:-.015em}
.mention p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.mention .btn{flex:none}
@media (max-width:700px){
  .mention{flex-direction:column;align-items:flex-start;gap:14px}
  .mention .btn{width:100%;justify-content:center}
}

/* ---- Mini tool previews inside the four app cards -------------------
   Each panel is a size container and everything inside is sized in em off
   a cqw root, so the mocks scale with the card rather than needing
   breakpoints. Pure markup, no images.
   One shared vocabulary across all four: a white sheet with a hairline and
   a soft shadow, a chrome bar, caps micro-labels, and one accent per card. */
.pick-panel .ph{container-type:size}
.apps-panel{box-shadow:var(--shadow)}
.cta.dark .cta-inner{max-width:none}
/* pull the warm sweep into frame */
.cta.dark .cta-inner::before{background-position:78% 34%}

/* The price panel wears the same photograph as the dark band below it. */
.plan .ph-deep{background:var(--blue);position:relative;overflow:hidden;isolation:isolate}
.plan .ph-deep::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
      background:url("../../images/v2/cta-bg.jpg") 34% 50%/cover no-repeat;transform:scale(1.04)}
.plan .ph-deep::after{display:none}
.plan .ph-deep > *{position:relative;z-index:2}

/* One vertical rhythm for the whole page: every section owns the space
   after it, and nothing adds a second helping on top. */
:root{--section-y:clamp(88px,7.4vw,128px)}
.trusted{padding-top:var(--section-y)}
.trusted--hero{padding-bottom:var(--section-y)}
#faq{padding-top:0}
/* a lone heading must not leak its margin out of a padding-less section */
.section-header h2:first-child,
.section-header h3:first-child{margin-top:0}
.section-header{margin-bottom:clamp(40px,3.4vw,58px)}
.pick-panel .ph-blue{background:linear-gradient(135deg,#F4F9FE,var(--blue-10))}
.pick-panel .ph-sky{background:#FBFCFD}
.mini{position:absolute;inset:0;display:flex;flex-direction:column;gap:.85em;
      padding:1.45em;text-align:left;font-size:3.1cqw;line-height:1.3;color:var(--ink)}
.mini *{box-sizing:border-box}
.mini .sheet{background:#fff;border-radius:.6em;
      box-shadow:0 .08em .25em -.12em rgba(18,18,18,.14),
                 0 .85em 1.9em -.9em rgba(18,18,18,.38),
                 0 0 0 1px rgba(18,18,18,.06)}
.mini .cap{font-size:.4em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted);white-space:nowrap}
.mini .chip{display:inline-flex;align-items:center;gap:.42em;font-size:.44em;font-weight:600;
      padding:.4em .78em;border-radius:99em;background:var(--bg-soft);color:var(--ink-2);white-space:nowrap}
.mini .chip i{width:.52em;height:.52em;border-radius:50%;background:currentColor;flex:none}
.mini i.ln{display:block;height:.24em;border-radius:.12em;background:var(--border-2);flex:none}
.mini .top{display:flex;align-items:center;gap:.7em;flex:none}
.mini .top .cap{margin-right:auto}

/* ---------- Templates: a wall of decks, artwork over a caption ---------- */
/* The category bar across the top of the wall. */
.mini-tpl .cats{flex:none;display:flex;gap:.34em;overflow-x:auto;scrollbar-width:none;
      padding-bottom:.12em;
      -webkit-mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.15) 97%,transparent);
      mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.15) 97%,transparent)}
.mini-tpl .cats::-webkit-scrollbar{display:none}
.mini-tpl .cats button{flex:none;white-space:nowrap;border:0;cursor:pointer;
      font-family:inherit;font-size:.37em;font-weight:500;letter-spacing:-.003em;
      color:var(--ink-2);padding:.62em .95em;border-radius:99em;
      background:transparent;box-shadow:none;
      transition:background .18s var(--ease),color .18s var(--ease)}
.mini-tpl .cats button:hover{color:var(--ink)}
.mini-tpl .cats button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:none}
.mini-tpl .wall{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);
      grid-auto-rows:auto;align-content:center;gap:.5em}
.mini-tpl .dk{margin:0;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.mini-tpl .art{aspect-ratio:16/9;position:relative;padding:.42em .5em;display:flex;flex-direction:column;
      gap:.22em;overflow:hidden;border-bottom:1px solid var(--border)}
.mini-tpl .art .hd{display:flex;flex-direction:column;gap:.16em}
.mini-tpl .art .hd i{height:.19em;border-radius:.1em;background:var(--ink);opacity:.55}
.mini-tpl .art .hd i:first-child{opacity:.72}
.mini-tpl .art.dark{background:var(--ink)}
.mini-tpl .art.dark .hd i{background:#fff;opacity:.9}
.mini-tpl .art.tint{background:var(--blue-10)}
.mini-tpl .art.warm{background:var(--orange-10)}
.mini-tpl figcaption{flex:1;padding:.42em .5em .5em;display:flex;flex-direction:column;justify-content:center;gap:.12em}
.mini-tpl figcaption b{font-size:.44em;font-weight:700;letter-spacing:-.005em;line-height:1.2;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-tpl figcaption span{display:flex;align-items:center;gap:.4em;font-size:.4em;color:var(--muted);line-height:1.2}
.mini-tpl figcaption span i{width:.42em;height:.42em;border-radius:.1em;flex:none}
.mini-tpl .bars{margin-top:auto;display:flex;align-items:flex-end;gap:.16em;height:54%}
.mini-tpl .bars b{flex:1;border-radius:.1em .1em 0 0;background:var(--blue)}
.mini-tpl .bars b.s{background:var(--sky)}
.mini-tpl .cells{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:.12em;height:56%}
.mini-tpl .cells b{border-radius:.08em;background:var(--bg-soft)}
.mini-tpl .cells b.h{background:var(--blue-20)}
.mini-tpl .spark{margin-top:auto;height:52%}
.mini-tpl .spark svg{width:100%;height:100%;fill:none;stroke:var(--blue);stroke-width:2.2;
      stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mini-tpl .donut{margin:auto auto 0;width:2.15em;height:2.15em;border-radius:50%;
      background:conic-gradient(var(--blue) 0 48%,var(--sky) 48% 76%,var(--orange) 76% 100%);
      -webkit-mask:radial-gradient(circle,transparent 44%,#000 45%);mask:radial-gradient(circle,transparent 44%,#000 45%)}
.mini-tpl .kpi{margin-top:auto;font-size:.95em;font-weight:800;letter-spacing:-.035em;color:var(--blue);line-height:1}
.mini-tpl .rows{margin-top:auto;display:flex;flex-direction:column;justify-content:flex-end;gap:.26em;height:56%}
.mini-tpl .rows i{display:block;height:.3em;border-radius:99em;background:var(--blue-20)}
.mini-tpl .rows i b{display:block;height:100%;border-radius:99em;background:var(--blue)}
.mini-tpl .rows i:nth-child(2) b{background:var(--sky)}
.mini-tpl .rows i:nth-child(3) b{background:var(--orange)}
.mini-tpl .more{position:relative;aspect-ratio:16/9;display:block}
.mini-tpl .more .bk{position:absolute;inset:0;width:100%;height:100%}
.mini-tpl .more .bk path{fill:#FAFCFF;stroke:#CFE2F7;stroke-width:1.4;vector-effect:non-scaling-stroke;
      transition:fill .3s var(--ease),stroke .3s var(--ease)}
.mini-tpl .more:hover .bk path{fill:#1D6FE0;stroke:#1259C2}

/* three decks lifting out of the pocket */
.mini-tpl .more .pk{position:absolute;left:50%;top:26%;width:30%;aspect-ratio:4/3;border-radius:.2em;
      background-size:cover;background-position:center;opacity:0;
      transform:translate(-50%,36%) rotate(0);transform-origin:50% 100%;
      box-shadow:0 .25em .6em -.2em rgba(8,28,60,.55);
      transition:transform .38s var(--ease),opacity .26s var(--ease)}
.mini-tpl .more:hover .pk{opacity:1}
.mini-tpl .more:hover .pk1{transform:translate(-104%,4%) rotate(-11deg)}
.mini-tpl .more:hover .pk2{transform:translate(-50%,-6%)}
.mini-tpl .more:hover .pk3{transform:translate(4%,4%) rotate(11deg)}

/* the pocket in front */
.mini-tpl .more .fr{position:absolute;left:2.5%;right:2.5%;bottom:3.5%;top:46%;border-radius:.42em;
      display:grid;place-items:center;background:transparent;
      box-shadow:none;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.mini-tpl .more:hover .fr{background:linear-gradient(180deg,#2E82EA,#1259C2);
      box-shadow:0 -.25em .7em -.25em rgba(6,26,66,.45)}
.mini-tpl .more .go{display:inline-flex;align-items:center;gap:.4em;font-size:.5em;font-weight:800;
      letter-spacing:-.01em;color:#fff;opacity:0;transform:translateY(.2em);
      transition:opacity .22s var(--ease),transform .3s var(--ease)}
.mini-tpl .more:hover .go{opacity:1;transform:none}
.mini-tpl .more .go s{text-decoration:none;width:.8em;height:.8em;position:relative}
.mini-tpl .more .go s::before{content:"";position:absolute;left:0;right:.1em;top:50%;height:.1em;
      background:currentColor;border-radius:99em}
.mini-tpl .more .go s::after{content:"";position:absolute;right:.06em;top:50%;width:.34em;height:.34em;
      border-top:.1em solid currentColor;border-right:.1em solid currentColor;
      transform:translateY(-50%) rotate(45deg)}

/* what it says when nobody is pointing at it */
.mini-tpl .more .rest{position:absolute;inset:0;display:flex;flex-direction:column;
      align-items:center;justify-content:center;gap:.22em;padding-top:.9em;
      transition:opacity .2s var(--ease)}
.mini-tpl .more:hover .rest{opacity:0}
.mini-tpl .more .rest b{font-size:.62em;font-weight:800;letter-spacing:-.02em;color:var(--blue)}
.mini-tpl .more .rest span{font-size:.4em;color:var(--ink-2)}

/* Library tiles: real artwork from the You Exec library. Each tile paints
   frame one onto a canvas and fades the live GIF in on hover, so the wall
   is still until you point at it. */
.mini-tpl .dk { position:relative;display:block;margin:0;min-height:0;aspect-ratio:16/9;
      border-radius:.6em;overflow:hidden;background:var(--bg-soft);box-shadow:none }
.mini-tpl .gif { position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden }
.mini-tpl .gif img { position:absolute;inset:0;width:100%;height:100%;
      object-fit:cover;display:block;border-radius:inherit }
.mini-tpl .gif .live { opacity:0;transition:opacity .16s var(--ease) }
.mini-tpl .gif.on .live { opacity:1 }

/* ---------- Margin: a film under review, with the comment rail ---------- */
.mini-mrg{padding:0;gap:0}
.mini-mrg .app.sheet{background:none;box-shadow:none;border-radius:0}
.mini-mrg .app{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* title bar */
.mini-mrg .bar{flex:none;display:flex;align-items:center;gap:.42em;padding:1em 1.15em .7em}
.mini-mrg .bar b{font-size:.46em;font-weight:700;letter-spacing:-.012em}
.mini-mrg .cv{flex:none;width:.3em;height:.3em;border-right:.085em solid var(--muted);
      border-bottom:.085em solid var(--muted);transform:translateY(-.06em) rotate(45deg)}
.mini-mrg .ver .cv{width:.34em;height:.34em;border-width:.09em}
.mini-mrg .ver{display:inline-flex;align-items:center;gap:.34em;margin-left:.3em;
      font-size:.4em;font-weight:600;color:var(--ink-2)}
.mini-mrg .bar .chip.st{font-size:.38em;font-weight:700;padding:.32em .64em;
      background:var(--orange-10);color:var(--orange-dark)}
.mini-mrg .bar .chip.st i{width:.46em;height:.46em;background:var(--orange)}
.mini-mrg .avs{margin-left:auto;display:flex;padding-right:.25em}
.mini-mrg .avs i{width:.86em;height:.86em;border-radius:50%;margin-left:-.28em;
      box-shadow:0 0 0 .1em #fff}
.mini-mrg .share{display:inline-flex;align-items:center;gap:.34em;font-size:.38em;font-weight:700;
      color:var(--blue);padding:.34em .66em;border-radius:99em;box-shadow:inset 0 0 0 1px var(--blue-20)}
.mini-mrg .share s{text-decoration:none;position:relative;width:.62em;height:.62em}
.mini-mrg .share s::before{content:"";position:absolute;left:.04em;right:.04em;bottom:0;height:.34em;
      border:.09em solid currentColor;border-top:0;border-radius:0 0 .08em .08em}
.mini-mrg .share s::after{content:"";position:absolute;left:50%;top:0;width:.09em;height:.34em;
      margin-left:-.045em;background:currentColor;
      box-shadow:-.1em .1em 0 -.005em currentColor,.1em .1em 0 -.005em currentColor}

/* two columns: the cut, and the rail */
.mini-mrg .pane{flex:1;display:grid;grid-template-columns:1fr .42fr;min-height:0}
.mini-mrg .stage{display:flex;flex-direction:column;min-height:0;gap:.5em;padding:0 .9em 1em 1.15em}
.mini-mrg .art{position:relative;flex:1;min-height:0;border-radius:.5em;overflow:hidden;background:#12161A}
.mini-mrg .art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* what people drew on it */
.mini-mrg .an{position:absolute;pointer-events:none}
.mini-mrg .an-ell{left:6%;top:10%;width:22%;height:30%;border-radius:50%;
      border:.1em dashed #4FD196;transform:rotate(-9deg)}
.mini-mrg .an-box{left:52%;top:36%;width:18%;height:30%;border-radius:.16em;
      border:.1em dashed var(--orange)}
.mini-mrg .an-arr{left:42%;top:44%;width:13%;height:20%}
.mini-mrg .an-arr svg{width:100%;height:100%;fill:none;stroke:var(--orange);
      stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* the notes themselves */
.mini-mrg .note{position:absolute;width:35%;padding:.46em .55em;border-radius:.45em;background:#fff;
      box-shadow:0 .55em 1.3em -.55em rgba(12,20,16,.5),0 0 0 1px rgba(18,18,18,.05)}
.mini-mrg .note b{display:block;font-size:.44em;font-weight:700;letter-spacing:-.005em}
.mini-mrg .note p{margin:.24em 0 0;font-size:.4em;line-height:1.3;color:var(--ink-2)}
.mini-mrg .note .file{display:inline-flex;align-items:center;gap:.28em;margin-top:.4em;
      font-size:.36em;font-weight:600;color:var(--ink-2);padding:.3em .5em;
      border-radius:.34em;background:var(--bg-soft)}
.mini-mrg .note .file s{text-decoration:none;width:.34em;height:.62em;border-radius:99em;
      box-shadow:inset 0 0 0 .1em var(--muted);transform:rotate(38deg)}
.mini-mrg .note.n1{left:12%;top:29%}
.mini-mrg .note.n2{left:34%;top:60%}

/* scrubber */
.mini-mrg .tl{flex:none;display:flex;align-items:center;gap:.6em}
.mini-mrg .pp{position:relative;flex:none;width:.66em;height:.72em}
.mini-mrg .pp::before,.mini-mrg .pp::after{content:"";position:absolute;top:0;bottom:0;
      width:.2em;border-radius:.06em;background:var(--ink-2)}
.mini-mrg .pp::before{left:0}
.mini-mrg .pp::after{right:0}
.mini-mrg .track{position:relative;flex:1;height:.34em;border-radius:99em;background:var(--border)}
.mini-mrg .track .fill{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);
      border-radius:99em;background:#C4C4CA}
.mini-mrg .track .pin{position:absolute;top:50%;transform:translate(-50%,-50%);
      width:.86em;height:.86em;border-radius:50%}
.mini-mrg .track .pin::after{content:"";position:absolute;left:50%;top:115%;transform:translateX(-50%);
      width:.22em;height:.22em;border-radius:50%;background:var(--orange)}
.mini-mrg .track .pin.k::after{background:var(--blue)}
.mini-mrg .track .pin.g::after{background:#4FD196}

/* the rail */
.mini-mrg .rail{border-left:1px solid var(--border-2);padding:.05em 1.15em 1em .9em;
      display:flex;flex-direction:column;gap:.4em;min-height:0;overflow:hidden}
.mini-mrg .rh{font-size:.46em;font-weight:700;flex:none}
.mini-mrg .tabs{flex:none;display:flex;gap:.9em;background:none;padding:0;border-radius:0;
      border-bottom:1px solid var(--border)}
.mini-mrg .tabs span{position:relative;display:inline-flex;align-items:center;gap:.34em;
      padding-bottom:.32em;font-size:.44em;font-weight:600;color:var(--muted)}
.mini-mrg .tabs .on{color:var(--ink);font-weight:700}
.mini-mrg .tabs .on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
      height:.16em;border-radius:99em;background:var(--blue)}
.mini-mrg .tabs em{font-style:normal;font-weight:700;font-size:.86em;padding:.12em .4em;
      border-radius:.34em;background:var(--blue-10);color:var(--blue)}
.mini-mrg .tabs span:not(.on) em{background:var(--bg-soft);color:var(--muted)}

.mini-mrg .list{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.34em;padding-top:.3em}
.mini-mrg .cmt{flex:none;display:flex;flex-direction:column;gap:.24em;padding:.32em .42em;border-radius:.42em}
.mini-mrg .cmt.hl{background:#FDF4E0}
.mini-mrg .cmt .who{display:flex;align-items:center;gap:.4em;font-size:.42em;font-weight:700}
.mini-mrg .cmt .who i{flex:none;width:1.3em;height:1.3em;border-radius:50%}
.mini-mrg .cmt .stamp{margin-left:auto;font-size:.82em;font-weight:700;color:var(--ink-2);
      background:rgba(18,18,18,.06);padding:.16em .42em;border-radius:.32em;letter-spacing:.01em}
.mini-mrg .cmt p{margin:0;font-size:.38em;line-height:1.26;color:var(--ink-2)}

.mini-mrg .voice{display:flex;align-items:center;gap:.42em;padding:.28em .45em;
      border-radius:.42em;box-shadow:inset 0 0 0 1px var(--border)}
.mini-mrg .voice .pl{flex:none;width:0;height:0;border-left:.34em solid var(--muted);
      border-top:.22em solid transparent;border-bottom:.22em solid transparent}
.mini-mrg .wave{flex:1;display:flex;align-items:center;gap:.13em;height:.68em}
.mini-mrg .wave b{flex:1;border-radius:99em;background:#AEB4BE}
.mini-mrg .wave b:nth-child(3n){background:#8A919C}
.mini-mrg .voice em{font-style:normal;flex:none;font-size:.36em;font-weight:600;color:var(--muted)}

.mini-mrg .vrow{display:flex;align-items:flex-start;gap:.45em}
.mini-mrg .vthumb{position:relative;flex:none;width:42%;aspect-ratio:16/9;border-radius:.36em;overflow:hidden;
      background:linear-gradient(155deg,#F2A65A 0%,#8C6246 48%,#2A3A52 100%)}
.mini-mrg .vthumb s{position:absolute;left:.26em;bottom:.24em;text-decoration:none;
      display:inline-flex;align-items:center;gap:.22em;font-size:.32em;font-weight:700;color:#fff;
      background:rgba(12,14,16,.58);padding:.22em .42em;border-radius:.34em}
.mini-mrg .vthumb s::before{content:"";flex:none;width:0;height:0;border-left:.46em solid #fff;
      border-top:.28em solid transparent;border-bottom:.28em solid transparent}

.mini-mrg .box{flex:none;margin-top:.16em;display:flex;align-items:center;gap:.42em;
      padding:.3em .32em .3em .6em;border-radius:99em;background:var(--bg-soft);
      box-shadow:inset 0 0 0 1px var(--border)}
.mini-mrg .box span{flex:1;font-size:.4em;color:var(--muted)}
.mini-mrg .box i{flex:none;width:1em;height:1em;border-radius:50%;background:var(--blue);
      display:grid;place-items:center}
.mini-mrg .box i::after{content:"";border-left:.32em solid #fff;border-top:.2em solid transparent;
      border-bottom:.2em solid transparent;margin-left:.1em}

/* stand-in faces */
.mini-mrg .f1{background:var(--orange)}
.mini-mrg .f2{background:var(--blue)}
.mini-mrg .f3{background:var(--sky)}
.mini-mrg .f4{background:var(--ink-2)}

/* On a phone the panel is ~326px wide, so the densest mocks thin out. */
@media (max-width:760px){
  .mini{font-size:3.7cqw;padding:1.1em;gap:.6em}
  .mini-mrg{padding:0;gap:0}
  .mini-tpl .wall{grid-template-columns:repeat(3,1fr)}
  .mini-tpl .dk:nth-child(n+9){display:none}
  .mini-mag .langs .lg:nth-child(n+4){display:none}
}
.plan{border-radius:var(--r-lg);padding:56px;display:grid;grid-template-columns:1fr 1.16fr;gap:48px;align-items:center;background:var(--bg-soft)}
.plan .ph{min-height:340px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:32px;color:#fff;border-radius:var(--r)}
.plan .price{font-family:var(--font-head);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.03em}
.plan .price small{font-size:20px;font-weight:600;opacity:.75;letter-spacing:0}
.plan .price-lbl{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-bottom:6px}
.plan .price-note{margin:14px 0 24px;max-width:320px;font-size:13px;opacity:.75}
/* the two columns stop before the price panel gets too narrow for its own note */
@media (max-width:1080px){.plan{grid-template-columns:1fr;padding:32px}}

/* --- Pro list: one shape + one brand colour per point --- */
.list--shapes li::before{border-radius:0;background-size:10px;background-position:center}
.list--shapes li:nth-child(1)::before{background-color:var(--blue);border-radius:50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>")}
.list--shapes li:nth-child(2)::before{background-color:var(--orange);border-radius:5px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>")}
.list--shapes li:nth-child(3)::before{background-color:var(--blue);clip-path:polygon(50% 2%,100% 100%,0 100%);background-size:9px;background-position:center 74%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>")}
.list--shapes li:nth-child(4)::before{background-color:var(--sky);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background-size:9px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006EDB' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>")}
.list--shapes li:nth-child(5)::before{background-color:var(--orange);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>")}
/* --- Price panel: From $6/month is the headline of this card --- */
.plan .ph{justify-content:flex-end}
.plan .price{font-size:78px}
.plan .price small{font-size:26px;opacity:.8}
.plan .price-lbl{font-size:13px;opacity:.8;margin-bottom:2px}
.plan .ph .btn-row{margin-top:30px}
.plan .price-note{margin:28px 0 0;width:100%;max-width:none;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:13px;opacity:.72;line-height:1.6;
  display:flex;flex-wrap:nowrap;gap:0 clamp(16px,2.4vw,40px)}
.plan .price-note span{display:inline-block;white-space:nowrap}
/* between 960 and 1150 the panel is at its narrowest while still side by side,
   so the three notes tighten rather than break the line */
@media (max-width:1150px){.plan .price-note{font-size:12px;gap:0 16px}}
@media (max-width:1080px){.plan .price-note{font-size:13px;gap:0 clamp(16px,2.4vw,40px)}}
@media (max-width:960px){.plan .price{font-size:62px}}
@media (max-width:620px){.plan .price-note{flex-wrap:wrap;gap:10px 28px}}
/* the ecosystem header now sits under the app cards */
.section-header--after{margin:72px auto 0}

/* Inline styles of index.html, as classes */
.plan h2{margin:14px 0 0}
.plan .list--shapes{margin-top:34px}