/* Additions on top of base.css (the original UGC Planner landing system).
   Same palette, same three faces: Instrument Serif for display, Fraunces for figures and
   in-app type, DM Sans for everything else. Motion and the phone scenes live in story.css. */

:root{--shadow-float:0 26px 50px -26px rgba(42,37,32,.38),0 6px 14px -8px rgba(42,37,32,.16);--ease-out:cubic-bezier(.16,1,.3,1)}
html{scroll-padding-top:84px}
body{overflow-x:clip}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:8px}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:999px;font-weight:500}
.skip-link:focus{top:12px}
.foot .wm{font-size:32px;color:var(--ink)}
.pain{overflow-x:clip}
.marquee:hover .marquee-track{animation-play-state:running}

/* nav: the original bar plus one quiet call to action; over a dark section it goes dark with it */
.nav .wm,.nav-links a{transition:color .5s var(--ease-out),background-color .5s var(--ease-out)}
.nav.is-night{background:color-mix(in oklab,#1E1A16 86%,transparent);border-bottom-color:rgba(242,235,225,.08)}
.nav.is-night .wm{color:#F2EBE1}
.nav.is-night .wm-tag{color:#A9A298;border-color:rgba(242,235,225,.16)}
.nav.is-night .nav-links a{color:#CFC6BB}
.nav.is-night .nav-links a:hover{color:#F2EBE1}
.nav.is-night .nav-cta{background:#F2EBE1;color:#1E1A16!important}
.nav-cta{padding:10px 16px!important;font-size:14px!important;color:var(--cream)!important;background:var(--ink);border-radius:999px}
.nav-cta:hover{background:#3a342d}

/* hero copy */
.hero{padding-top:40px;padding-bottom:72px}
.hero h1{max-width:12.5ch;margin-top:18px}
.hero-meta{margin-top:26px}

/* italic highlight used in section headings */
.hl{font-style:italic;padding:0 .12em;margin:0 -.08em;border-radius:6px;
  background:linear-gradient(rgba(201,166,120,.32),rgba(201,166,120,.32)) 0 70%/100% 76% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- what it replaces ---------- */
.replaces-sec{background:var(--cream)}
.replaces-sec h2{max-width:16ch}
.ledger{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:72px}
.lrow{display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"from arrow to" "p p p";align-items:baseline;column-gap:16px;row-gap:10px;padding:28px 0;border-top:1px solid var(--border)}
.lrow .from{grid-area:from;font-size:15.5px;color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(176,138,85,.75);text-decoration-thickness:1.5px}
.lrow .arrow{grid-area:arrow;color:var(--gold-deep);font-family:var(--display);font-size:22px;line-height:1}
.lrow .to{grid-area:to;font-family:var(--display);font-size:clamp(28px,2.6vw,36px);line-height:1.05;letter-spacing:-.015em}
.lrow p{grid-area:p;color:var(--ink-2);font-size:15.5px;max-width:46ch}

/* ---------- tour chapters (text column) ---------- */
.tour{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 18%,var(--cream-2) 82%,var(--cream) 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:0}
.tour-head{padding-top:112px}
.tour-head h2{max-width:18ch}
.tour-head .lede{margin-top:18px;max-width:52ch}
.chapter h3{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.6vw,50px);line-height:1.08;letter-spacing:-.018em;max-width:15ch;margin-top:14px}
.chapter h3 em{font-style:italic}
.chapter .lede{margin-top:18px;max-width:46ch;font-size:17.5px;line-height:1.6}
.chapter .story-bullets{margin-top:26px}
.chapter .pro-note{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-size:13.5px;color:var(--ink-2);background:#fff;border:1px solid var(--border);border-radius:999px;padding:7px 14px 7px 7px;align-self:flex-start}
.pro-pill{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--cream);font-weight:700;font-size:10px;letter-spacing:.08em;padding:4px 9px;border-radius:999px}

/* ---------- media hub ---------- */
.hub{background:var(--cream);padding-bottom:96px}
.hub-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:48px;margin-bottom:48px}
.hub-head h2{max-width:15ch}
.hub-head p{max-width:40ch;color:var(--ink-2)}
.btile{position:relative;border-radius:28px;padding:30px;overflow:hidden;border:1px solid var(--border);background:#fff;isolation:isolate}
.btile h3{font-family:var(--display);font-weight:400;font-size:32px;line-height:1.06;letter-spacing:-.015em;max-width:14ch}
.btile h3 em{font-style:italic}
.btile p{color:var(--ink-2);font-size:15px;line-height:1.5;max-width:40ch}
.btile .eyebrow{color:var(--gold-deep)}
.btile .copy{display:flex;flex-direction:column;gap:12px}
.btile .story-bullets{margin-top:6px;gap:9px}
.btile .story-bullets li{font-size:14.5px}

/* ---------- positioning ---------- */
.position{padding:112px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--cream),var(--cream-2));text-align:left}
.pos-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.position h2{text-align:left;margin:0;font-style:normal;font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.02em;max-width:15ch}
.position h2 em{color:inherit}
.position .lede{text-align:left;margin:22px 0 0;max-width:50ch;font-size:18px}
.not-grid{margin:36px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:22px;overflow:hidden}
.not-grid div{background:var(--cream);padding:22px 20px;text-align:left}
.not-grid b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.not-grid b.no{color:var(--ink-3)}
.not-grid span{display:block;margin-top:8px;font-size:15px;color:var(--ink);line-height:1.45}
.pos-visual{display:flex;justify-content:center}
.pos-visual .iphone{--w:clamp(250px,24vw,310px)}
/* privacy: the app's own "Where your data lives", set on the original espresso panel */
.privacy-visual{min-height:0;display:grid;place-items:center;padding:clamp(22px,4vw,44px)}
.privacy-shot{position:relative;z-index:1;width:min(100%,420px);border-radius:26px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(201,166,120,.18)}
.privacy-shot img{display:block;width:100%;height:auto}

/* ---------- faq: every answer visible, two columns ---------- */
.faq .faq-inner{max-width:var(--max)}
.faq h2{text-align:left;margin-bottom:0}
.faq-grid{margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px}
.qa h3{font-size:18.5px;line-height:1.3}
.qa p{margin-top:10px;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.qa a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(176,138,85,.4)}

/* footer: five columns now that the feature pages have their own */
.foot{grid-template-columns:1.3fr repeat(4,1fr)}
@media (max-width:980px){.foot{grid-template-columns:1fr 1fr}}
.plans-more{text-align:center;margin:10px 0 0;font-size:14.5px}
.plans-more a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(176,138,85,.4)}

/* ---------- too many apps → one app: the owner's falling tiles, then what each one became ----------
   One pinned scene, driven by --p (0 → 1) from site.js: the tiles fall into the app icon (0 → .45), the icon
   takes them with a small pulse, and the eight answers come out of it to their places (.5 → .95). */
.pain{height:340vh}
.pain-sticky{padding-top:calc(68px + 1.5vh);padding-bottom:2vh}
.funnel{position:relative;width:100%;max-width:1100px;aspect-ratio:auto;margin:22px auto 14px;container-type:inline-size}
.fstage{position:relative;width:min(100%,calc((100vh - 480px) * 2.25));margin:0 auto;aspect-ratio:2.25/1;container-type:inline-size}
.ficon{--ep:clamp(0, calc((var(--p) - var(--delay) * .5) / .34), 1)}
.fi-remind{--start-x:98%;--start-y:40%;--rot:-4deg;--delay:.15;background:linear-gradient(140deg,#D5EDE0 0%,#A7D6BC 100%);color:#367860}
.fi-kit{--start-x:95%;--start-y:66%;--rot:3deg;--delay:.21;background:linear-gradient(140deg,#F0E4D0 0%,#E2CE9C 100%);color:#8A6A2A}
/* the icon takes the tiles with a small pulse, then opens into the answers and steps back */
.funnel-box{--pulse:max(0, 1 - max(calc((var(--p) - .45) / .07), calc((.45 - var(--p)) / .07)));--open:clamp(0, calc((var(--p) - .5) / .14), 1);
  transform:translate(-50%,-50%) scale(calc((1 + var(--pulse) * .1) * (1 - var(--open) * .55)));opacity:calc(1 - var(--open))}
.pain-bottom{opacity:clamp(0, calc((var(--p) - .5) / .12), 1);translate:0 calc((1 - clamp(0, calc((var(--p) - .5) / .12), 1)) * 14px)}

.mcards{position:absolute;left:0;right:0;top:0;height:calc(min(100cqw, (100vh - 480px) * 2.25) / 2.25);pointer-events:none}
.mcard{--cp:clamp(0, calc((var(--p) - .52 - var(--i) * .04) / .16), 1);position:absolute;left:50%;top:50%;width:23.5cqw;height:128px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:10px;padding:15px 16px;border-radius:18px;
  background:rgba(255,255,255,.92);box-shadow:0 22px 40px -26px rgba(42,37,32,.45),0 0 0 1px rgba(42,37,32,.06);
  transform:translate(-50%,-50%) translate(calc(var(--tx) * 1cqw * var(--cp)),calc(var(--ty) * 1cqw * var(--cp))) scale(calc(.25 + .75 * var(--cp)));
  opacity:calc(var(--cp) * 1.4);pointer-events:auto;will-change:transform,opacity}
.mc-head{display:flex;align-items:center;gap:12px;min-width:0}
.mc-ico{flex:none;width:36px;aspect-ratio:1;border-radius:28%;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.6) inset}
.mc-ico svg{width:55%;height:55%}
.mc-tt{min-width:0}
.mc-to{display:block;font-family:var(--display);font-weight:400;font-size:23px;line-height:1.05;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.mc-from{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-from s{text-decoration-color:rgba(176,138,85,.8);text-decoration-thickness:1.5px}
.mc-p{display:block;font-size:13.5px;line-height:1.42;color:var(--ink-2)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fi-briefs-c{background:linear-gradient(140deg,#FFE9B5,#FFCB72);color:#A57A2A}
.fi-files-c{background:linear-gradient(140deg,#CFE3F7,#A4C5EE);color:#3F6CA8}
.fi-invoices-c{background:linear-gradient(140deg,#E5D5F0,#C7AFE6);color:#7A55B0}
.fi-sheets-new-c{background:linear-gradient(140deg,#D8E9CC,#B5D49C);color:#4A7036}
.fi-feed-c{background:linear-gradient(140deg,#FBE2D8,#F5C5C0);color:#B65548}
.fi-remind-c{background:linear-gradient(140deg,#D5EDE0,#A7D6BC);color:#367860}
.fi-kit-c{background:linear-gradient(140deg,#F0E4D0,#E2CE9C);color:#8A6A2A}
.fi-tax-c{background:linear-gradient(140deg,#F8D6D2,#F0B2B0);color:#A05858}

/* narrower than the flight needs: the section scrolls normally, the tiles still fall, the answers sit in a grid */
@media (max-width:1199px){
  .pain{height:auto}
  .pain-sticky{position:static;height:auto;padding:96px 28px 88px}
  .funnel{width:100%;max-width:980px}
  .mcards{position:static;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;pointer-events:auto}
  .funnel-box{opacity:1;transform:translate(-50%,-50%) scale(calc(1 + var(--pulse) * .1))}
  .mcard{position:static;width:auto;height:auto;transform:none;opacity:1;padding:16px 18px}
  .pain-bottom{opacity:1;translate:none;margin-top:30px}
}
@media (max-width:640px){
  .pain-sticky{padding:80px 20px 72px}
  .fstage{aspect-ratio:1.35/1}
  .mcards{grid-template-columns:1fr;gap:10px}
  .mc-p{display:none}
}
/* no script, or reduced motion: the finished picture, nothing pinned */
html:not(.js) .pain{--p:1 !important}
@media (prefers-reduced-motion:reduce){
  .pain{--p:1 !important;height:auto}
  .pain-sticky{position:static;height:auto}
}

/* ---------- reveal (visible unless script opts in) ---------- */
.js h2[data-reveal]{clip-path:inset(100% -6% -14% -6%);translate:0 .32em;transition:clip-path 1.15s var(--ease-out),translate 1.15s var(--ease-out)}
.js h2[data-reveal].is-in{clip-path:inset(-14% -6% -14% -6%);translate:0 0}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .pos-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:820px){.faq-grid{grid-template-columns:1fr;gap:30px}}
@media (max-width:760px){
  .ledger{grid-template-columns:1fr;margin-top:36px}
  .hub-head{grid-template-columns:1fr;gap:18px}
}
@media (max-width:640px){
  .hero-meta{flex-wrap:wrap;gap:4px 12px}
  .hero-meta .dot-sep{display:none}
  .lrow{grid-template-columns:1fr;grid-template-areas:"from" "to" "p";row-gap:6px}
  .lrow .arrow{display:none}
  .btile{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  .js h2[data-reveal]{clip-path:none;translate:none}
}