/* =====================================================================
   Smart PDF Pilot — Design System v3
   Light, steady, text-led. Thin rules instead of boxes. Larger type.
   Edit the tokens below to re-theme the whole site in one place.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{
  --ink:#101b34;          /* headings */
  --text:#3a4863;         /* body copy */
  --muted:#65738c;        /* secondary copy */
  --line:#e3e8f0;         /* hairlines */
  --soft:#f6f8fb;         /* quiet background band */
  --paper:#ffffff;
  --red:#e63f4b;          /* brand accent */
  --red-dark:#c92f3b;
  --navy:#0e1a36;
  --blue:#2563eb;
  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:Manrope,Inter,ui-sans-serif,system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--font-body);font-size:17px;line-height:1.7;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);font-weight:800;letter-spacing:-.03em;line-height:1.12}
h1{font-size:clamp(42px,5.4vw,76px);letter-spacing:-.045em;line-height:1.04}
h2{font-size:clamp(32px,3.6vw,50px);letter-spacing:-.04em}
h3{font-size:clamp(21px,1.8vw,26px);letter-spacing:-.025em}
h4{font-size:15px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
p{max-width:68ch}
section{padding:112px 0}
.container{width:min(var(--maxw),calc(100% - 64px));margin-inline:auto}
::selection{background:#ffd9dd}
:focus-visible{outline:3px solid rgba(37,99,235,.45);outline-offset:3px;border-radius:6px}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:0;background:var(--red);z-index:1000;transition:width .08s linear}

/* ---------- announcement + header ---------- */
.announcement{background:var(--navy);color:#dbe4f5;text-align:center;font-size:15px;font-weight:500;padding:10px 16px;display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.announcement a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.4)}
.announcement-dot{width:8px;height:8px;border-radius:50%;background:#ff6a73;box-shadow:0 0 0 0 rgba(255,106,115,.7);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(255,106,115,0)}100%{box-shadow:0 0 0 0 rgba(255,106,115,0)}}

.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 24px rgba(16,27,52,.05)}
.nav{height:84px;display:flex;align-items:center;justify-content:space-between;gap:28px;transition:height .3s var(--ease)}
.site-header.scrolled .nav{height:70px}
.brand{display:flex;align-items:center}
.brand-image img{height:46px;width:auto;mix-blend-mode:multiply}  /* hides the logo's off-white background on white */
.navlinks{display:flex;align-items:center;gap:30px;font-size:16px;font-weight:600;color:var(--ink)}
.navlinks>a,.dropdown>a{position:relative;padding:8px 0}
.navlinks>a:after,.dropdown>a:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.navlinks>a:hover:after,.dropdown:hover>a:after{transform:scaleX(1)}

/* Active page indicator */
.navlinks > a, .mobile-nav > a { position: relative; }

.navlinks > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: #ff4054;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}

.navlinks > a:hover::after,
.navlinks > a.active::after {
  transform: scaleX(1);
}

.navlinks > a.active { color: #ff4054; }

.navlinks > a { position: relative; }

.navlinks > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px;
  height: 2px; background: #ff4054; transform: scaleX(0);
  transition: transform .25s ease;
}

.navlinks > a:not(.btn):hover::after,
.navlinks > a:not(.btn).active::after { transform: scaleX(1); }

.navlinks > a.active { color: #ff4054; }


@media (prefers-reduced-motion: reduce) {
  .navlinks > a::after { transition: none; }
}

.nav-chevron{font-size:12px;margin-left:3px;opacity:.6}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;left:-20px;min-width:240px;padding:12px 0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px rgba(16,27,52,.12);display:block;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .25s var(--ease)}
.dropdown:hover .dropdown-menu,.dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:none}
.dropdown-menu a{display:block;padding:9px 22px;font-size:16px;font-weight:500;color:var(--text)}
.dropdown-menu a:hover{color:var(--red);background:var(--soft)}
.navright{display:flex;align-items:center;gap:10px}
.nav-search{font-size:20px;padding:8px 10px;color:var(--ink)}
.mobile-toggle{display:none;border:0;background:none;font-size:28px;color:var(--ink);cursor:pointer}
.mobile-nav{display:none;border-top:1px solid var(--line);background:#fff;padding:10px 32px 26px}
.mobile-nav.open{display:block;animation:slideDown .3s var(--ease)}
.mobile-nav>a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-size:19px;font-weight:600;color:var(--ink)}
.mobile-nav-actions{display:flex;gap:10px;margin-top:20px}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 26px;border-radius:10px;font-size:16px;font-weight:700;border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s;white-space:nowrap}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 26px rgba(230,63,75,.22)}
.btn-red:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 16px 34px rgba(230,63,75,.3)}

.btn-outline{border-color:#c5cfdf;color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--ink);background:#f9fafc;transform:translateY(-2px)}

.hero-btn-outline{border-color:#cbd5e2;
    color: #ffffff;
    background: linear-gradient(135deg, rgb(239, 67, 82), rgb(232, 56, 73));
}
.hero-btn-outline:hover{border-color:var(--ink);background:#f9fafc;transform:translateY(-2px);  color: #000;}


.btn-quiet{color:var(--ink);background:transparent}
.btn-quiet:hover{color:var(--red)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{transform:translateY(-2px)}
.btn-large{min-height:58px;padding:15px 32px;font-size:18px}
.btn span{transition:transform .25s var(--ease)}.btn:hover span{transform:translateX(4px)}
.text-link,.arrow-link,.center-link,.learn{font-weight:700;color:var(--ink);font-size:17px;display:inline-flex;gap:8px;align-items:center;border-bottom:2px solid var(--red);padding-bottom:2px;transition:gap .25s var(--ease),color .2s}
.text-link:hover,.arrow-link:hover,.center-link:hover,.learn:hover{gap:14px;color:var(--red)}
.center-link{display:flex;width:max-content;margin:48px auto 0}
.actions,.hero-actions,.final-actions,.footer-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.btn-border{border:1px solid #5f5c5c;}
/* ---------- shared typographic bits ---------- */
.eyebrow,.section-kicker,.story-index,.footer-kicker,.editorial-eyebrow{display:inline-block;font-family:var(--font-head);font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:18px;background:none;border:0;padding:0}
.lead-text{font-size:clamp(20px,1.7vw,24px);line-height:1.55;color:var(--ink);font-weight:500}
.breadcrumb{font-size:15px;color:var(--muted);margin-bottom:26px}
.breadcrumb a{color:var(--red);font-weight:600}
.section-intro,.section-head{max-width:760px;margin-bottom:64px}
.section-intro.center,.section-head{text-align:center;margin-inline:auto}
.section-intro p,.section-head p{font-size:19px;margin:20px auto 0;color:var(--muted)}
.editorial-split{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start;margin-bottom:56px}
.editorial-split p{margin-bottom:18px}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:88px 0 96px;background:linear-gradient(180deg,#fbfcfe,#fff)}
.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.page-hero h1{font-size:clamp(40px,4.8vw,66px);margin-bottom:24px}
.page-hero p{font-size:clamp(19px,1.6vw,22px);color:var(--muted);line-height:1.6;margin-bottom:34px}
.page-hero img{border-radius:14px;box-shadow:0 40px 90px rgba(16,27,52,.14);animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-10px)}}

/* ---------- homepage hero ---------- */
.sp-hero{padding:96px 0 56px;background:radial-gradient(900px 480px at 85% 10%,rgba(230,63,75,.07),transparent 60%),radial-gradient(800px 500px at 0% 0%,rgba(37,99,235,.06),transparent 60%),#fff;overflow:hidden}
.sp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:72px;align-items:center}
.sp-hero h1 em{font-style:normal;color:var(--red)}
.hero-lead{font-size:clamp(19px,1.7vw,22px);line-height:1.65;color:var(--muted);margin:28px 0 38px}
.hero-note{margin-top:28px;font-size:15.5px;color:var(--muted)}
.hero-note span{color:var(--red);font-weight:800;margin:0 6px}
.demo-frame{position:relative;border-radius:16px;background:#fff;box-shadow:0 50px 110px rgba(16,27,52,.18),0 0 0 1px var(--line);animation:floaty 8s ease-in-out infinite}
.demo-frame img{border-radius:0 0 16px 16px}
.demo-top{display:flex;align-items:center;gap:8px;padding:13px 18px;font-size:14px;color:var(--muted);border-bottom:1px solid var(--line)}
.mac-dot{width:12px;height:12px;border-radius:50%;background:#ccc}.mac-dot.red{background:#ff5f57}.mac-dot.yellow{background:#febc2e}.mac-dot.green{background:#28c840}
.demo-status{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.1em}
.demo-float{position:absolute;background:#fff;border-radius:999px;padding:11px 20px;font-size:15px;font-weight:700;color:var(--ink);box-shadow:0 14px 36px rgba(16,27,52,.16);animation:floaty 5s ease-in-out infinite}
.float-one{left:-34px;top:26%}.float-two{right:-26px;top:48%;animation-delay:-1.5s}.float-three{left:12%;bottom:-18px;animation-delay:-3s}
.hero-proof{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:84px;padding-top:30px;border-top:1px solid var(--line);font-family:var(--font-head);font-weight:800;letter-spacing:.16em;font-size:15px;color:#9aa6bb}
.hero-proof span{transition:color .3s}.hero-proof span:hover{color:var(--red)}

/* ---------- task list (rows, not boxes) ---------- */
.task-list{margin-top:8px;border-top:1px solid var(--line)}
.task-row{display:grid;grid-template-columns:90px 1fr 50px;gap:24px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);transition:padding .35s var(--ease),background .3s}
.task-row:hover{padding-left:20px;background:linear-gradient(90deg,#fff5f6,transparent)}
.task-no{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--red)}
.task-row h3{margin-bottom:6px}.task-row p{color:var(--muted);font-size:18px}
.task-arrow{font-size:30px;color:var(--ink);transition:transform .3s var(--ease)}
.task-row:hover .task-arrow{transform:translate(6px,-6px);color:var(--red)}

/* ---------- video ---------- */
.sp-video{background:var(--soft)}
.video-stage{max-width:1040px;margin:0 auto}
.video-poster{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 40px 100px rgba(16,27,52,.2);aspect-ratio:16/9;background:#0e1a36;cursor:pointer}
.video-poster>img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.video-poster:hover>img{transform:scale(1.04)}
.video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,54,.15),rgba(14,26,54,.7))}
.play-button{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:0;background:#fff;color:var(--red);font-size:30px;padding-left:6px;cursor:pointer;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:ring 2.4s infinite;transition:transform .3s var(--ease)}
.play-button:hover{transform:scale(1.08)}
@keyframes ring{70%{box-shadow:0 0 0 28px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.video-caption{position:absolute;left:34px;bottom:28px;right:34px;color:#fff}
.video-caption span{font-size:13px;letter-spacing:.14em;font-weight:700;opacity:.8}
.video-caption strong{display:block;font-family:var(--font-head);font-size:clamp(20px,2.2vw,30px);margin-top:6px;letter-spacing:-.02em}

/* ---------- story rows ---------- */
.story-row{display:grid;grid-template-columns:1.1fr 1fr;gap:88px;align-items:center;margin-top:96px}
.story-row.reverse .story-media{order:2}
.story-media img,.story-media.placeholder-media{border-radius:14px;box-shadow:0 36px 80px rgba(16,27,52,.13)}
.story-copy h3{font-size:clamp(28px,2.8vw,40px);margin-bottom:20px}
.story-copy p{margin-bottom:22px}
.story-copy ul,.prose ul{list-style:none;margin:0 0 28px}
.story-copy li,.prose li{position:relative;padding:12px 0 12px 34px;border-top:1px solid var(--line);color:var(--ink);font-weight:500}
.story-copy li:last-child{border-bottom:1px solid var(--line)}
.story-copy li:before,.prose li:before{content:"✓";position:absolute;left:0;top:12px;color:var(--red);font-weight:800}
.placeholder-media,.demo-slot{position:relative;display:grid;place-items:center;min-height:380px;background:repeating-linear-gradient(135deg,#f4f7fb 0 14px,#eef2f8 14px 28px);border:1.5px dashed #b9c5da;border-radius:14px;color:var(--muted);text-align:center;padding:36px}
.placeholder-inner span,.demo-slot span{display:block;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--red);margin-bottom:12px}
.placeholder-inner strong,.demo-slot strong{font-family:var(--font-head);font-size:24px;color:var(--ink);letter-spacing:-.02em}
.placeholder-inner p,.demo-slot p{margin:10px auto 0;font-size:16px}

/* ---------- stats ---------- */
.sp-stats{padding:72px 0;border-block:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.stats-grid strong{display:block;font-family:var(--font-head);font-size:clamp(44px,5vw,72px);font-weight:800;letter-spacing:-.05em;color:var(--ink);line-height:1}
.stats-grid span{display:block;margin-top:12px;color:var(--muted);font-size:17px}

/* ---------- solutions words ---------- */
.solution-words{border-top:1px solid var(--line)}
.solution-words a{display:grid;grid-template-columns:200px 1fr 40px;gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:padding .35s var(--ease),background .3s}
.solution-words a:hover{padding-left:20px;background:linear-gradient(90deg,#f3f7ff,transparent)}
.solution-words span{font-family:var(--font-head);font-size:14px;font-weight:800;letter-spacing:.14em;color:var(--red)}
.solution-words strong{font-family:var(--font-head);font-size:clamp(20px,2.2vw,30px);letter-spacing:-.025em;color:var(--ink)}
.solution-words i{font-style:normal;font-size:26px;transition:transform .3s var(--ease)}
.solution-words a:hover i{transform:translate(5px,-5px)}

/* ---------- pricing (preview + full) ---------- */
.sp-pricing{background:var(--soft)}
.pricing-intro{display:grid;grid-template-columns:1.2fr 1fr auto;gap:56px;align-items:end;margin-bottom:56px}
.mini-pricing{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cfd8e6}
.mini-plan{padding:36px 36px 36px 0;border-right:1px solid #cfd8e6}
.mini-plan+.mini-plan{padding-left:36px}.mini-plan:last-child{border-right:0}
.mini-plan span{font-family:var(--font-head);font-weight:800;letter-spacing:.14em;font-size:14px;color:var(--red)}
.mini-plan strong{display:block;font-family:var(--font-head);font-size:56px;letter-spacing:-.05em;color:var(--ink);line-height:1.2;margin:8px 0}
.mini-plan p{margin-bottom:16px}.mini-plan a{font-weight:700;color:var(--ink);border-bottom:2px solid var(--red)}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.price-card{padding:40px 30px 40px 0;border-right:1px solid var(--line);position:relative;transition:background .3s}
.price-card+.price-card{padding-left:30px}.price-card:last-child{border-right:0}
.price-card:hover{background:linear-gradient(180deg,#fafbfe,#fff)}
.price-card h3{font-size:26px}
.price-card p{font-size:16px;color:var(--muted);margin:8px 0 22px}
.price{font-family:var(--font-head);font-weight:800;font-size:56px;letter-spacing:-.05em;color:var(--ink);line-height:1;margin-bottom:26px}
.price small{font-size:17px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:4px}
.price-card ul{list-style:none;margin:26px 0 30px}
.price-card li{padding:10px 0 10px 28px;position:relative;font-size:16.5px;border-top:1px solid var(--line)}
.price-card li:before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:800}
.price-card.popular{background:#fffafa}
.price-card.popular h3:after{content:"Most chosen";margin-left:10px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--red);padding:4px 10px;border-radius:99px;vertical-align:middle}
.price-card .btn{width:100%}

/* ---------- testimonials / user experience ---------- */
.testimonial-editorial,.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.experience-card,.quote{padding:44px 40px 44px 0;border-right:1px solid var(--line)}
.experience-card+.experience-card,.quote+.quote{padding-left:40px}
.experience-card:last-child,.quote:last-child{border-right:0}
.experience-card>span{font-family:var(--font-head);font-weight:800;color:var(--red);font-size:15px;letter-spacing:.1em}
.experience-card blockquote,.quote p{font-family:var(--font-head);font-size:clamp(21px,1.9vw,26px);line-height:1.4;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:16px 0 28px}
.experience-card strong,.person strong{display:block;color:var(--ink)}
.experience-card small,.person span{color:var(--muted);font-size:15px}
.stars{color:#f4a31a;letter-spacing:3px;font-size:18px;margin-bottom:6px}
.person{display:flex;align-items:center;gap:14px}
.avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#ffb3b9,#b9c9ff);display:grid;place-items:center;font-weight:800;color:#fff}

/* ---------- FAQ ---------- */
/* =====================================================================
   Smart PDF Pilot — FAQ page v3.2
   Split hero, numbered topic list, question panel, gradient borders.
   Load AFTER css/site.css:
   <link rel="stylesheet" href="css/site.css">
   <link rel="stylesheet" href="css/faq-v3.css">
   All classes are prefixed .fq- (old .faq-* rules in site.css are unused).
   ===================================================================== */

.fq-page {
  /* gradient used for borders — swap in your exact logo colours */
  --grad: linear-gradient(135deg, #ef4352, #2d68d8);
  background: #fff;
  overflow: clip;
}
.fq-page section { padding: 0; }
.fq-page [hidden] { display: none !important; }
.fq-page .container { width: min(1180px, calc(100% - 64px)); }

/* ---------- extra button colours (used in the bottom band) ------------ */

.fq-btn-dark {
  background: linear-gradient(135deg, #111a2e, #1d2f5a);
  color: #fff;
  box-shadow: 0 12px 28px rgba(17, 26, 46, .24);
}
.fq-btn-dark:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(17, 26, 46, .3); }
.fq-btn-glass {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.fq-btn-glass:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }

/* ---------- hero: title left, lead + search right --------------------- */

.fq-hero {
  position: relative;
  text-align: left;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 0, rgba(239, 67, 82, .10), transparent 55%),
    radial-gradient(ellipse at 92% 78%, rgba(45, 104, 216, .09), transparent 45%),
    linear-gradient(180deg, #fbfcff, #fff);
}
.fq-page .fq-hero { padding: 72px 0 64px; }
.fq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#c9d3e4 1.2px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 0, transparent 68%);
          mask-image: radial-gradient(ellipse at 50% 35%, #000 0, transparent 68%);
  opacity: .6;
  pointer-events: none;
}
.fq-hero .container { position: relative; z-index: 1; }

.fq-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: end;
}
.fq-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}
.fq-hero h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.05em;
}
.fq-hero h1 span { color: var(--red); }
.fq-hero-lead {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.fq-search {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 56px;
  margin: 24px 0 0;
  padding: 0 14px 0 20px;
  border: 1px solid #d3dcea;
  border-radius: 16px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 24px 60px rgba(17, 26, 46, .10), 0 2px 6px rgba(17, 26, 46, .04);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.fq-search:focus-within {
  border-color: rgba(239, 67, 82, .55);
  box-shadow: 0 28px 70px rgba(17, 26, 46, .12), 0 0 0 5px rgba(239, 67, 82, .10);
  transform: translateY(-2px);
}
.fq-search-icon { flex: 0 0 auto; color: var(--red); font-size: 24px; line-height: 1; }
.fq-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; }
.fq-search input::placeholder { color: #98a3b5; }
.fq-search kbd {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 10px;
  background: #eef2f9;
  color: #5f6c82;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
}

/* ---------- layout ---------------------------------------------------- */

.fq-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding: 56px 0 90px;
}

/* ---------- topic list (numbered, with descriptions) ------------------ */

.fq-nav {
  position: sticky;
  top: 108px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.fq-nav-title,
.fq-count { display: none; }

.fq-nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 16px 16px 12px;
  border: 0;
  border-bottom: 1px solid #e6ebf3;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.fq-nav button:last-child { border-bottom: 0; }
.fq-nav button:hover { background: #f6f8fd; transform: none; }

.fq-ico {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #eef3fc;
  color: var(--red);
  font-size: 19px;
  font-style: normal;
  box-shadow: none;
}
.fq-nav-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.fq-num { color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.fq-nav-text strong { font-family: var(--font-head); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.fq-desc { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.fq-chev { text-decoration: none; color: #8793a7; font-size: 24px; line-height: 1; }

/* active item: soft pink + gradient border */
.fq-nav button[aria-current="true"] {
  overflow: hidden;
  border-radius: 18px;
  border-bottom-color: transparent;
  background: linear-gradient(90deg, #ffe8eb, #fff6f7);
  box-shadow: 0 10px 26px rgba(239, 67, 82, .10);
}
.fq-nav button[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ef4352, #2d68d8); 
}
.fq-nav button[aria-current="true"] .fq-ico { background: #fff; }
.fq-nav button[aria-current="true"] .fq-chev { color: var(--red); }

/* ---------- question panel -------------------------------------------- */

.fq-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e6ebf3;
  border-radius: 26px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 18px 50px rgba(17, 26, 46, .05);
}

.fq-group { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }

/* group heading becomes a small label */
.fq-group-head { display: flex; align-items: center; padding: 4px 8px 12px; border: 0; background: none; gap: 0; }
.fq-group-icon,
.fq-group-head p,
.fq-group-count { display: none; }
.fq-group-head > div { flex: 1; min-width: 0; }
.fq-group-head h2 {
  margin: 0;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fq-list { display: flex; flex-direction: column; gap: 10px; }
.fq-list details {
  position: relative;
  border: 1px solid #e3e9f2;
  border-radius: 16px;
  background: #fff;
  transition: background .25s, box-shadow .25s;
}
.fq-list details:hover { background: #fafbfe; }
.fq-list details[open] {
  border-color: transparent;
  background: linear-gradient(180deg, #ffeef0, #fff6f7);
  box-shadow: 0 10px 28px rgba(239, 67, 82, .08);
}

/* gradient border on the open card */
   .fq-list details[open]::before {
     content: "";
     position: absolute;
     left: 0; top: 0; bottom: 0;
     width: 4px;
     background: linear-gradient(180deg, #ef4352, #2d68d8);
     pointer-events: none;
   }

.fq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.fq-list summary::-webkit-details-marker { display: none; }
.fq-list summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1.5px solid #d3dcea;
  border-radius: 50%;
  background: #fff;
  color: var(--red);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: background .25s, color .25s, border-color .25s;
}
.fq-list summary:hover::after { background: #fff0f2; }
.fq-list details[open] summary { color: var(--ink); }
.fq-list details[open] summary::after {
  content: "−";
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.fq-answer { padding: 0 64px 22px 22px; animation: fqIn .3s var(--ease); }
.fq-answer p { max-width: 66ch; color: var(--muted); font-size: 15px; line-height: 1.75; }
.fq-answer a { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--red); }
.fq-answer a:hover { color: var(--red); }
@keyframes fqIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.fq-empty {
  display: none;
  padding: 44px 30px;
  border: 1px dashed #cdd6e4;
  border-radius: 20px;
  background: #fafbfe;
  color: var(--muted);
  font-size: 17px;
  text-align: center;
}
.fq-empty.is-visible { display: block; }
.fq-empty strong { color: var(--ink); }
.fq-empty a { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--red); }

/* ---------- split band: contact | download (unchanged) ---------------- */

.fq-contact-section { padding: 0 0 110px !important; }
.fq-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid #f0dce0;
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(17, 26, 46, .10);
}
.fq-contact > div { padding: 54px 52px; }
.fq-contact > div:first-child {
  background: radial-gradient(ellipse at 0 100%, rgba(239, 67, 82, .13), transparent 55%), #fff5f6;
}
.fq-contact > div + div {
  background:
    radial-gradient(ellipse at 100% 0, rgba(239, 67, 82, .36), transparent 50%),
    radial-gradient(ellipse at 0 100%, rgba(45, 104, 216, .28), transparent 50%),
    linear-gradient(135deg, #0d1730, #172950);
  color: #c1cce0;
}
.fq-contact h2 { margin-bottom: 10px; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.04em; }
.fq-contact > div + div h2 { color: #fff; }
.fq-contact p { max-width: 38ch; margin-bottom: 28px; color: var(--muted); font-size: 16.5px; }
.fq-contact > div + div p { color: #bfcbe0; }
.fq-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- responsive ------------------------------------------------ */

@media (max-width: 960px) {
  .fq-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .fq-layout { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 64px; }

  .fq-nav {
    position: static;
    flex-direction: row;
    gap: 8px;
    margin-inline: -18px;
    padding: 4px 18px 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .fq-nav::-webkit-scrollbar { display: none; }
  .fq-nav button,
  .fq-nav button:last-child {
    flex: 0 0 auto;
    width: auto;
    padding: 8px 16px 8px 8px;
    border: 1px solid #e3e9f2;
    border-radius: 99px;
    background: #fff;
  }
  .fq-nav button[aria-current="true"]::before { display: none; }
.fq-nav button[aria-current="true"] { border-color: #ef4352; background: #fff0f2; }
  .fq-desc, .fq-num, .fq-chev { display: none; }
  .fq-ico { flex-basis: 30px; width: 30px; height: 30px; }
  .fq-nav-text strong { font-size: 14px; }

  .fq-main { padding: 10px; border-radius: 20px; }
  .fq-contact { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .fq-page .container { width: calc(100% - 36px); }
  .fq-page .fq-hero { padding: 48px 0 52px; }
  .fq-search { height: 56px; padding-left: 16px; border-radius: 16px; }
  .fq-search kbd { display: none; }
  .fq-list summary { padding: 16px 18px; font-size: 16px; }
  .fq-answer { padding: 0 20px 22px 18px; }
  .fq-contact > div { padding: 38px 26px; }
  .fq-contact-actions .btn { width: 100%; }
  .fq-contact-section { padding-bottom: 70px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fq-answer { animation: none; }
  .fq-nav button, .fq-search { transition: none; }
}
/* ---------- final CTA ---------- */
.sp-final{padding:0 0 112px}
.final-panel,.cta{display:flex;justify-content:space-between;align-items:center;gap:48px;padding:72px 64px;border-radius:22px;background:linear-gradient(135deg,#0e1a36,#1a2d5a);color:#cbd6ec;position:relative;overflow:hidden}
.final-panel:after,.cta:after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(230,63,75,.35),transparent 65%)}
.final-panel h2,.cta h2{color:#fff;margin-bottom:14px}.final-panel p,.cta p{font-size:19px}
.final-panel>*,.cta>*{position:relative;z-index:1}
.cta{margin-top:40px}

/* ---------- inner page content ---------- */
.content-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:96px;align-items:start}
.prose h2{font-size:clamp(30px,3vw,42px);margin:64px 0 20px}.prose h2:first-child{margin-top:0}
.prose h3{margin:40px 0 12px}
.prose p{font-size:18.5px;line-height:1.8;margin-bottom:20px;max-width:none}
.prose ol{padding-left:26px;margin-bottom:26px}.prose ol li{padding:10px 0 10px 8px;font-size:18px;border:0;font-weight:400;color:var(--text)}.prose ol li:before{display:none}
.prose li{font-size:18px}
.side-card{position:sticky;top:110px;padding:6px 0 6px 32px;border-left:3px solid var(--red)}
.side-card h3{font-size:24px;margin-bottom:14px}.side-card p{font-size:17px;margin-bottom:22px;color:var(--muted)}
.feature-band{margin:48px 0;padding:0}
.feature-band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.mini-card{padding:28px 26px 28px 0;border-right:1px solid var(--line);transition:transform .3s var(--ease)}
.mini-card+.mini-card{padding-left:26px}.mini-card:last-child{border-right:0}
.mini-card:hover{transform:translateY(-4px)}
.mini-card h3{font-size:21px;margin-bottom:8px}.mini-card p{font-size:16.5px;color:var(--muted);line-height:1.65;margin:0}
.icon{width:48px;height:48px;display:grid;place-items:center;font-size:24px;margin-bottom:16px;color:var(--red)}
.i-blue,.i-purple,.i-green,.i-red{background:none}

/* ---------- tools / resources / industry listing ---------- */
.tool-grid,.resource-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:72px;border-top:1px solid var(--line)}
.tool-card,.resource{display:block;padding:34px 0;border-bottom:1px solid var(--line);transition:padding .3s var(--ease)}
.tool-card:hover,.resource:hover{padding-left:14px}
.tool-card h3,.resource h3{margin-bottom:8px}
.tool-card p,.resource p{font-size:17.5px;color:var(--muted);margin-bottom:12px}
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.industry{padding:34px 30px 34px 0}

/* ---------- tables, forms ---------- */
table{width:100%;border-collapse:collapse;font-size:17px}
th,td{text-align:left;padding:18px 14px 18px 0;border-bottom:1px solid var(--line)}
th{font-family:var(--font-head);color:var(--ink);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.form-card{max-width:560px;padding:8px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:16px;color:var(--ink)}
.field input,.field textarea,.field select{padding:15px 16px;border:1.5px solid #cdd6e4;border-radius:10px;background:#fff;font-size:17px;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.form-note{font-size:15px;color:var(--muted);margin-top:14px}
.upload-zone{padding:56px;border:2px dashed #b9c5da;border-radius:14px;text-align:center;background:var(--soft)}

/* ---------- app shells (dashboard / editor) ---------- */
.app-shell,.editor-app{min-height:100vh;background:var(--soft)}
.app-top{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;background:#fff;border-bottom:1px solid var(--line)}
.app-layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 70px)}
.app-side{padding:28px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.app-side a{padding:11px 14px;border-radius:8px;font-weight:600}.app-side a.active,.app-side a:hover{background:#fff1f2;color:var(--red)}
.app-main{padding:40px}
.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dashboard-card,.doc-row{padding:24px;background:#fff;border:1px solid var(--line);border-radius:12px}
.full-editor{display:grid;grid-template-columns:90px 1fr 280px;min-height:calc(100vh - 70px)}
.editor-left,.editor-right{background:#fff;padding:18px}.editor-canvas{padding:40px;display:grid;place-items:center}
.big-paper,.paper{background:#fff;box-shadow:0 20px 60px rgba(16,27,52,.12);padding:48px;min-height:420px;width:min(560px,100%)}



/* ---------- Footer ---------- */
.site-footer{background:var(--soft);border-top:1px solid var(--line);padding:0}
.footer-main{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(150px,1fr));gap:64px;padding:64px 0 48px;align-items:start}
.footer-brand{min-width:0}
.footer-brand p{margin:18px 0 22px;color:var(--muted);font-size:16.5px;max-width:30ch}
.footer-logo img{height:44px;width:auto}

/* App Store button */
.footer-appstore{display:inline-flex;align-items:center;justify-content:flex-start;width:190px;max-width:100%;margin-top:24px;transition:transform .25s var(--ease),opacity .25s}
.footer-appstore img{display:block;width:100%;height:auto;max-height:62px;object-fit:contain}
.footer-appstore:hover{transform:translateY(-3px);opacity:.9}

/* Footer columns */
.footer-col h4{margin-bottom:20px;color:var(--ink)}
.footer-col a{display:block;padding:6px 0;font-size:16.5px;color:var(--text);transition:color .2s,transform .2s}
.footer-col a:hover{color:var(--red);transform:translateX(4px)}

/* Copyright and social links: one horizontal row */
.copyright{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:nowrap;padding:26px 0 36px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.copyright>span{flex:0 0 auto}
.footer-social-section{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:0 0 0 auto;flex-shrink:0}
.footer-social-title{margin:0;color:var(--ink);font-family:var(--font-head);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.footer-social-section .socials{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.footer-social-section .socials a{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:1.5px solid #cdd6e4;border-radius:50%;color:var(--ink);background:transparent;font-size:14px;font-weight:700;transition:background .25s,border-color .25s,color .25s,transform .25s}
.footer-social-section .socials a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)}
.copyright_apple{text-align:center; display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:nowrap;padding:26px 0 36px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* Tablet */
@media(max-width:900px){
  .footer-main{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(120px,1fr));gap:32px}
  .copyright{gap:14px}
  .footer-social-section{gap:10px}
  .footer-social-section .socials{gap:6px}
  .footer-social-section .socials a{width:34px;height:34px;flex-basis:34px}
}

/* Mobile */
@media(max-width:650px){
  .footer-main{grid-template-columns:1fr 1fr;gap:30px 22px;padding:44px 0 34px}
  .footer-brand{grid-column:1/-1}
  .footer-appstore{margin-top:20px;width:180px}
  .copyright{align-items:flex-start;flex-direction:column;gap:18px;flex-wrap:wrap}
  .footer-social-section{margin:0;justify-content:flex-start;flex-wrap:wrap}
}
@media(max-width:380px){
  .footer-main{grid-template-columns:1fr;gap:26px}
  .footer-brand{grid-column:auto}
  .footer-social-section{align-items:flex-start;flex-direction:column}
}


/* ---------- reveal animations (scroll transitions) ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.slide-left{transform:translateX(-60px)}.reveal.slide-right{transform:translateX(60px)}
.reveal.zoom{transform:scale(.94)}
.reveal.in-view{opacity:1;transform:none}
.reveal-delay{--d:.18s}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---------- popups ---------- */
.modal{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:24px;background:rgba(14,26,54,.62);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.modal.open{opacity:1;visibility:visible}
.modal-card{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:20px;padding:48px 44px 40px;box-shadow:0 50px 120px rgba(0,0,0,.35);transform:translateY(40px) scale(.97);transition:transform .45s var(--ease)}
.modal.open .modal-card{transform:none}
.modal-card.wide{width:min(1000px,100%);padding:0;background:#000;border-radius:16px;overflow:hidden}
.modal-close{position:absolute;right:16px;top:14px;width:42px;height:42px;border:0;border-radius:50%;background:var(--soft);font-size:24px;cursor:pointer;line-height:1;z-index:3;transition:background .2s,transform .3s}
.modal-close:hover{background:#ffe3e6;transform:rotate(90deg)}
.modal-card h2{font-size:32px;margin-bottom:12px}.modal-card>p{margin-bottom:26px;color:var(--muted)}
.modal-options{display:grid;gap:0;border-top:1px solid var(--line)}
.modal-options a{display:grid;grid-template-columns:1fr 24px;gap:14px;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .25s var(--ease)}
.modal-options a:hover{padding-left:10px}
.modal-options strong{display:block;font-family:var(--font-head);font-size:19px;color:var(--ink)}.modal-options small{color:var(--muted);font-size:15.5px}
.modal-options em{font-style:normal;color:var(--red);font-size:22px;align-self:center}
.video-frame{aspect-ratio:16/9;width:100%;display:grid;place-items:center;color:#fff;text-align:center;background:linear-gradient(135deg,#0e1a36,#25396b)}
.video-frame iframe{width:100%;height:100%;border:0}
.slide-in{position:fixed;right:24px;bottom:24px;z-index:700;width:min(380px,calc(100% - 48px));padding:28px 28px 24px;background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(16,27,52,.25);border-top:4px solid var(--red);transform:translateX(130%);transition:transform .6s var(--ease)}
.slide-in.show{transform:none}
.slide-in h3{font-size:21px;margin-bottom:8px}.slide-in p{font-size:16px;color:var(--muted);margin-bottom:16px}
.slide-in .modal-close{width:34px;height:34px;font-size:20px;right:10px;top:10px}
.back-top{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:20px;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(16px);transition:all .3s var(--ease);z-index:600}
.back-top.show{opacity:1;visibility:visible;transform:none}

/* ---------- extra page blocks ---------- */
.steps-text{counter-reset:s;border-top:1px solid var(--line)}
.steps-text .step-item{display:grid;grid-template-columns:90px 1fr 1.2fr;gap:32px;padding:36px 0;border-bottom:1px solid var(--line);align-items:start}
.steps-text .step-item:before{counter-increment:s;content:"0" counter(s);font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--red);padding-top:4px}
.steps-text h3{font-size:26px}.steps-text p{color:var(--muted);font-size:18px}
.band{background:var(--soft)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.value-list{border-top:1px solid var(--line)}
.value-list .value{display:grid;grid-template-columns:.9fr 1.3fr;gap:48px;padding:34px 0;border-bottom:1px solid var(--line)}
.value-list h3{font-size:24px}.value-list p{color:var(--muted);font-size:18px}
.toggle-wrap{display:flex;justify-content:center;gap:14px;align-items:center;margin-bottom:56px;font-weight:600;color:var(--ink)}
.switch{position:relative;width:60px;height:32px;border-radius:99px;background:#cdd6e4;border:0;cursor:pointer;transition:background .3s}
.switch:after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .3s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.switch.on{background:var(--red)}.switch.on:after{transform:translateX(28px)}
.save-tag{background:#e8f7ee;color:#157347;font-size:13px;font-weight:800;padding:4px 10px;border-radius:99px}
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:26px 0;white-space:nowrap}
.ticker-track{display:inline-flex;gap:64px;animation:ticker 32s linear infinite;font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:.06em;color:#b3bdd0}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- full pricing page cards restored ---------- */
.pricing-offers{background:#fff}
.pricing-page-grid{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pricing-page-grid .price-card{min-height:540px;padding-top:42px;padding-bottom:42px}
.pricing-page-grid .price-card.popular{background:linear-gradient(180deg,#fff7f8 0%,#fff 100%);box-shadow:inset 0 4px 0 var(--red)}
.pricing-page-grid .price-card .eyebrow{font-size:11px;margin-bottom:10px}
.pricing-page-grid .price-card ul{min-height:205px}
.pricing-note{display:flex;gap:18px;align-items:flex-start;padding-top:22px;font-size:13px;color:var(--muted)}
.pricing-note span{flex:0 0 auto;font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--red);padding-top:4px}
.pricing-comparison{background:var(--soft)}
.comparison-table-wrap{overflow-x:auto}
.comparison-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:15px}
.comparison-table th,.comparison-table td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.comparison-table th{font-family:var(--font-head);font-size:13px;color:var(--ink);background:#fafbfc}
.comparison-table th:not(:first-child),.comparison-table td:not(:first-child){text-align:center}
.comparison-table td:not(:first-child){font-weight:800;color:var(--red)}
.comparison-table tr:last-child td{border-bottom:0}
@media(max-width:1180px){.pricing-page-grid{grid-template-columns:repeat(2,1fr)}.pricing-page-grid .price-card:nth-child(2){border-right:0}.pricing-page-grid .price-card:nth-child(3){padding-left:0;border-top:1px solid var(--line)}.pricing-page-grid .price-card:nth-child(4){border-top:1px solid var(--line)}}
@media(max-width:900px){.pricing-page-grid{grid-template-columns:1fr}.pricing-page-grid .price-card,.pricing-page-grid .price-card:nth-child(3),.pricing-page-grid .price-card:nth-child(4){padding:34px 0;border-right:0;border-top:0;border-bottom:1px solid var(--line)}.pricing-page-grid .price-card:last-child{border-bottom:0}.pricing-note{display:block}.pricing-note span{display:block;margin-bottom:7px}}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  section{padding:84px 0}
  .navlinks,.nav-search,.nav-pricing,.nav-signin{display:none}.mobile-toggle{display:block}
  .sp-hero-grid,.page-hero-grid,.editorial-split,.story-row,.faq-layout,.content-grid,.two-col{grid-template-columns:1fr;gap:48px}
  .story-row.reverse .story-media{order:0}
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .price-card:nth-child(odd){padding-left:0}.price-card:nth-child(2){border-right:0}.price-card{border-bottom:1px solid var(--line)}
  .pricing-intro{grid-template-columns:1fr;gap:24px}
  .footer-main{grid-template-columns:1fr 1fr}
  .side-card{position:static}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .float-one{left:-8px}.float-two{right:-8px}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .container{width:calc(100% - 36px)}
  section{padding:68px 0}
  .tool-grid,.resource-grid,.industry-grid,.feature-band-grid,.testimonial-editorial,.testimonial-grid,.mini-pricing,.pricing-grid,.form-grid,.dashboard-grid{grid-template-columns:1fr}
  .experience-card,.quote,.mini-plan,.mini-card,.price-card{border-right:0;padding:32px 0!important;border-bottom:1px solid var(--line)}
  .task-row{grid-template-columns:44px 1fr 24px;gap:14px}
  .solution-words a{grid-template-columns:1fr 30px}.solution-words span{grid-column:1/-1}
  .steps-text .step-item,.value-list .value{grid-template-columns:1fr;gap:10px}
  .final-panel,.cta{flex-direction:column;align-items:flex-start;padding:48px 28px}
  .footer-main{grid-template-columns:1fr}
  .demo-float{display:none}
  .hero-proof{gap:14px;font-size:13px}
  .modal-card{padding:40px 24px 28px}
  .app-layout,.full-editor{grid-template-columns:1fr}
  .navright .nav-start{display:none}
}

/* ---------- listing rows with icons, FAQ jump links, misc ---------- */
.tool-card,.resource{grid-template-columns:auto 1fr;column-gap:26px;align-items:start}
.tool-card>img,.resource>img{grid-row:1/5;width:56px;height:56px;object-fit:contain}
.tool-card>*:not(img),.resource>*:not(img){grid-column:2}
.tool-card,.resource{display:grid}
.tool-card>.icon{grid-row:1/5;grid-column:1;margin:0}
.faq-nav{display:flex;flex-wrap:wrap;gap:10px 34px;padding:22px 0;border-block:1px solid var(--line);font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--ink)}
.faq-nav a{transition:color .2s}.faq-nav a:hover{color:var(--red)}
.page-hero>.container:not(.page-hero-grid){max-width:860px;margin-inline:auto}
.sp-app{background:var(--paper)}
.final-panel .section-kicker,.cta .section-kicker{color:#ff8b93}
.band .section-intro p{margin-left:0}

/* ---------- header fit fixes ---------- */
.brand{flex-shrink:0}
.brand-image img{max-width:none;height:46px;width:auto}
.navlinks{white-space:nowrap;gap:26px;font-size:15.5px}
.navlinks a,.dropdown>a{white-space:nowrap}
.nav{gap:20px}
.navright .btn{min-height:46px;padding:11px 20px;font-size:15px}
@media(max-width:1320px){.nav-signin{display:none}}
@media(max-width:1200px){.nav-pricing{display:none}}

/* ---------- mobile overflow guards ---------- */
html,main{overflow-x:clip}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:640px}

/* =====================================================================
   Smart PDF Pilot — Mac-first visual layer v4
   Keep the existing type system (Inter + Manrope), but make the product
   feel like premium Mac software rather than a browser PDF SaaS.
   ===================================================================== */

:root{
  --ink:#111a2e;
  --text:#46536a;
  --muted:#718096;
  --line:#dfe5ee;
  --soft:#f6f8fb;
  --paper:#ffffff;
  --red:#ef4352;
  --red-dark:#d62f3f;
  --navy:#0d1730;
  --blue:#2d68d8;
  --maxw:1280px;
  --ease:cubic-bezier(.2,.75,.2,1);
}

body{
  font-size:18px;
  line-height:1.72;
  color:var(--text);
  background:#fff;
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  font-weight:800;
  letter-spacing:-.042em;
}
h1{font-size:clamp(48px,5.4vw,82px);line-height:1.01}
h2{font-size:clamp(38px,4vw,58px);line-height:1.05}
h3{font-size:clamp(23px,2vw,31px);line-height:1.12}
p{max-width:70ch}
section{padding:128px 0}
.container{width:min(var(--maxw),calc(100% - 72px))}
.section-kicker,.eyebrow,.story-index,.footer-kicker{
  font-size:13px;
  letter-spacing:.17em;
  line-height:1.2;
  margin-bottom:20px;
}
.lead-text{font-size:clamp(21px,1.75vw,26px);line-height:1.52;font-weight:500;color:var(--ink)}
.section-intro,.section-head{margin-bottom:72px}
.section-intro p,.section-head p{font-size:20px;line-height:1.65}
.editorial-split{gap:100px;margin-bottom:70px}

/* ---------- logo lockup ---------- */
.brand-lockup{display:inline-flex;align-items:center;gap:11px;min-width:max-content}
.brand-lockup img{width:46px;height:46px;object-fit:cover;border-radius:12px;flex:none;box-shadow:0 6px 18px rgba(17,26,46,.12)}
.brand-name{font-family:var(--font-head);font-size:21px;font-weight:800;letter-spacing:-.045em;color:var(--ink);white-space:nowrap}
.footer-logo img{width:46px;height:46px}
.footer-logo .brand-name{font-size:23px}

/* ---------- header ---------- */
.announcement{
  background:#111a2e;
  color:#dce5f5;
  padding:10px 18px;
  font-size:14px;
  letter-spacing:.01em;
}
.announcement a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.site-header{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(223,229,238,.75);
}
.nav{height:86px;gap:26px}
.site-header.scrolled .nav{height:72px}
.navlinks{gap:31px;font-size:15px;font-weight:700}
.navlinks>a,.dropdown>a{padding:10px 0}
.dropdown-menu{border-radius:16px;padding:12px;background:rgba(255,255,255,.98);box-shadow:0 28px 80px rgba(17,26,46,.14)}
.dropdown-menu a{border-radius:9px;padding:10px 14px}
.navright .btn{min-height:48px;padding:11px 19px;border-radius:12px}
.nav-start{box-shadow:0 12px 28px rgba(239,67,82,.2)}
.btn{border-radius:12px;font-size:16px;letter-spacing:-.01em}
.btn-large{min-height:60px;padding:16px 29px;font-size:18px;border-radius:13px}
.btn-red{background:linear-gradient(135deg,#ef4352,#e83849)}


/* ---------- homepage: Mac hero ---------- */
.mac-hero{
  position:relative;
  padding:112px 0 72px;
  overflow:hidden;
  background:
    radial-gradient(760px 500px at 94% 18%,rgba(239,67,82,.09),transparent 68%),
    radial-gradient(720px 520px at 4% 20%,rgba(45,104,216,.08),transparent 66%),
    linear-gradient(180deg,#fff 0%,#fbfcff 100%);
}
.mac-hero-grid{display:grid;  grid-template-columns: minmax(0, .95fr) minmax(0, 0.78fr);gap:54px;align-items:center}
.mac-hero-copy{position:relative;z-index:2}
.mac-hero h1{max-width:780px}
.mac-hero h1 em{font-style:normal;color:var(--red)}
.mac-hero .hero-lead{max-width:680px;font-size:clamp(20px,1.65vw,24px);line-height:1.65;color:var(--muted);margin:28px 0 38px}
.hero-actions{gap:14px}
.hero-note{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px;font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--ink)}
.hero-note span{color:var(--ink);margin:0}.hero-note i{font-style:normal;color:#a5afbf}
.hero-microcopy{font-size:13px;color:#8a96a9;margin-top:12px}
.hero-microcopy code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--red)}
.hero-product{position:relative;min-width:0}
.product-window{
  position:relative;
  background:#fff;
  border:1px solid #dce3ed;
  border-radius:22px;
  overflow:visible;
  box-shadow:0 40px 100px rgba(17,26,46,.16),0 12px 30px rgba(17,26,46,.06);
  transform:perspective(1200px) rotateY(-2deg) rotateX(1deg);
  transition:transform .8s var(--ease),box-shadow .8s var(--ease);
}
.product-window:hover{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-4px);box-shadow:0 52px 120px rgba(17,26,46,.2)}
.product-window-bar{height:52px;border-bottom:1px solid #e6eaf1;display:flex;align-items:center;gap:13px;padding:0 18px;color:var(--muted);font-size:13px}
.product-window-bar strong{font-family:var(--font-head);color:var(--ink);font-size:14px}
.window-file{color:#8994a6}
.window-status{margin-left:auto;font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--red)}
.window-dots{display:flex;gap:7px}.window-dots i,.product-window-bar .window-dots i{width:11px;height:11px;border-radius:50%;display:block;background:#cbd1da}
.window-dots i:nth-child(1){background:#ff5f57}.window-dots i:nth-child(2){background:#febc2e}.window-dots i:nth-child(3){background:#28c840}
.product-preview{min-height:480px;display:grid;grid-template-columns:165px minmax(0,1fr) 170px;background:#f7f9fc;border-radius:0 0 22px 22px;overflow:hidden}
.preview-sidebar,.preview-inspector{background:#fff;padding:22px 15px}
.preview-sidebar{border-right:1px solid #e2e7ef}
.preview-inspector{border-left:1px solid #e2e7ef}
.preview-label{display:block;font-size:9px;letter-spacing:.14em;font-weight:800;color:#a1aaba;margin-bottom:18px}
.preview-sidebar b{display:block;padding:10px 9px;margin-bottom:3px;border-radius:8px;font-size:12px;color:#5f6c80;font-weight:600}
.preview-sidebar b.active{background:#fff0f2;color:var(--red);font-weight:800}
.preview-sidebar-note{margin-top:80px;padding:12px;border:1px dashed #cbd5e2;border-radius:10px;background:#fbfcfe}
.preview-sidebar-note small{display:block;font-size:8px;letter-spacing:.13em;font-weight:800;color:var(--red);margin-bottom:6px}
.preview-sidebar-note strong{font-size:10px;line-height:1.4;color:var(--ink);display:block}
.preview-paper{padding:22px 26px;min-width:0}
.paper-toolbar{height:32px;display:flex;justify-content:space-between;color:#8b96a7;font-size:10px;margin-bottom:12px}
.paper-sheet{position:relative;background:#fff;min-height:390px;padding:34px 36px;box-shadow:0 15px 35px rgba(17,26,46,.09);border:1px solid #edf0f5}
.paper-kicker{font-size:8px;letter-spacing:.13em;font-weight:800;color:var(--red)}
.paper-sheet h3{font-size:25px;margin:12px 0 18px}
.paper-line{height:7px;width:62%;border-radius:8px;background:#e3e8f0;margin:12px 0}
.paper-line.long{width:88%}.paper-line.medium{width:48%}
.paper-block{height:88px;border-radius:8px;background:linear-gradient(135deg,#f1f4f8,#e6ebf3);margin:24px 0}
.paper-sign{position:absolute;right:34px;bottom:30px;border-top:1px solid #cbd3df;padding-top:7px;width:130px;font-size:9px;color:#7d899c}
.inspector-line{height:7px;border-radius:5px;background:#e9edf3;margin-bottom:10px}.inspector-line.short{width:68%}
.inspector-control{height:34px;border:1px solid #e0e5ed;border-radius:8px;margin-top:12px;background:#fbfcfd}
.product-float{position:absolute;z-index:3;background:#fff;border:1px solid #e6eaf1;border-radius:13px;padding:13px 16px;box-shadow:0 18px 44px rgba(17,26,46,.14);display:flex;flex-direction:column;gap:2px;animation:productFloat 6s ease-in-out infinite}
.product-float strong{font-family:var(--font-head);font-size:13px;color:var(--ink)}
.product-float span{font-size:11px;color:var(--muted)}
.product-float.float-one{left:-42px;top:18%}.product-float.float-two{right:-34px;top:47%;animation-delay:-2s}.product-float.float-three{left:10%;bottom:-26px;animation-delay:-4s}
@keyframes productFloat{50%{transform:translateY(-9px)}}
.hero-proof{margin-top:72px;padding-top:27px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.18em;color:#99a4b5}
.hero-proof span{transition:color .25s}.hero-proof span:hover{color:var(--red)}

/* ---------- text-led strips ---------- */
.insight-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.insight-strip>div{padding:30px 34px 34px;border-right:1px solid var(--line)}
.insight-strip>div:last-child{border-right:0}
.insight-strip span{display:block;font-family:var(--font-head);font-size:12px;font-weight:800;color:var(--red);letter-spacing:.12em;margin-bottom:14px}
.insight-strip strong{display:block;font-family:var(--font-head);font-size:22px;color:var(--ink);margin-bottom:7px}
.insight-strip p{font-size:16px;color:var(--muted);line-height:1.55}
.task-section{background:#fff}
.task-list{border-top:1px solid var(--line)}
.task-row{grid-template-columns:86px 1fr 40px;padding:38px 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease),background .35s,transform .35s}
.task-row:hover{padding-left:22px;background:linear-gradient(90deg,#fff7f8,transparent)}
.task-no{font-size:14px;letter-spacing:.1em}
.task-row h3{margin-bottom:8px}.task-row p{font-size:18px;line-height:1.55;color:var(--muted)}
.task-arrow{font-size:28px}
.task-row:hover .task-arrow{transform:translate(7px,-5px)}

/* ---------- demo carousel ---------- */
.demo-section{background:#f7f9fc;overflow:hidden}
.demo-carousel{position:relative;border:1px solid #dfe5ee;border-radius:24px;background:#fff;box-shadow:0 28px 70px rgba(17,26,46,.08);padding:52px 72px 78px}
.demo-slides{position:relative;min-height:500px}
.demo-slide{display:none;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:center;min-height:470px}
.demo-slide.active{display:grid;animation:demoIn .7s var(--ease)}
@keyframes demoIn{from{opacity:0;transform:translateX(35px)}to{opacity:1;transform:none}}
.demo-copy>span{font-size:12px;letter-spacing:.16em;font-weight:800;color:var(--red)}
.demo-copy h3{font-size:clamp(28px,3vw,42px);margin:18px 0 18px}
.demo-copy p{font-size:18px;color:var(--muted);line-height:1.7;margin-bottom:25px}
.demo-art{min-height:400px;position:relative;display:grid;place-items:center}
.demo-art-window{width:min(100%,620px);height:360px;border-radius:18px;border:1px solid #d8e0eb;background:#f5f7fa;box-shadow:0 25px 60px rgba(17,26,46,.12);overflow:hidden;transform:rotate(1deg)}
.demo-art-top{height:44px;border-bottom:1px solid #e0e5ec;background:#fff;display:flex;align-items:center;gap:8px;padding:0 14px}
.demo-art-top i{width:10px;height:10px;border-radius:50%;background:#cbd1da}.demo-art-top i:nth-child(1){background:#ff5f57}.demo-art-top i:nth-child(2){background:#febc2e}.demo-art-top i:nth-child(3){background:#28c840}.demo-art-top b{font-size:12px;margin-left:6px}
.demo-art-body{height:calc(100% - 44px);display:grid;grid-template-columns:100px 1fr 110px}
.demo-art-side{background:#fff;border-right:1px solid #e1e6ed}
.demo-art-page{margin:22px;background:#fff;box-shadow:0 8px 25px rgba(17,26,46,.08);padding:28px;position:relative}
.demo-art-page span,.demo-art-page b,.demo-art-page i{display:block;height:7px;border-radius:5px;background:#e0e5ed;margin-bottom:10px}.demo-art-page span{width:45%;background:#ef4352}.demo-art-page b{width:85%;height:15px}.demo-art-page i{width:70%}.demo-art-page em{position:absolute;left:27%;top:44%;width:44%;height:28px;border:2px solid #ef4352;border-radius:5px}
.demo-art-panel{background:#fff;border-left:1px solid #e1e6ed}
.demo-tag{position:absolute;right:4%;bottom:3%;font-size:10px;letter-spacing:.15em;font-weight:800;color:#9ba6b7}
.demo-nav{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;border:1px solid #d6deea;background:#fff;color:var(--ink);font-size:20px;z-index:2;cursor:pointer;transition:all .25s}
.demo-nav:hover{background:var(--ink);color:#fff;transform:scale(1.05)}
.demo-prev{left:18px}.demo-next{right:18px}
.demo-dots{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:center;gap:8px}
.demo-dots button{width:7px;height:7px;border-radius:50%;border:0;background:#cbd4e0;padding:0;cursor:pointer;transition:all .3s}
.demo-dots button.active{width:25px;border-radius:8px;background:var(--red)}
.demo-carousel:after{content:"";position:absolute;left:50%;bottom:15px;width:120px;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,var(--red) var(--demo-progress,0%),#dce3ed var(--demo-progress,0%));opacity:.65;pointer-events:none}.demo-carousel:hover:after{opacity:.9}
.page-stack{position:relative;width:220px;height:270px}.page-stack i{position:absolute;inset:0;display:grid;place-items:center;background:#fff;border:1px solid #dce3ed;border-radius:10px;box-shadow:0 18px 35px rgba(17,26,46,.1);font-style:normal;font-family:var(--font-head);font-size:48px;color:#b0bac8;transform:rotate(-8deg)}.page-stack i:nth-child(2){transform:translate(25px,10px) rotate(4deg)}.page-stack i:nth-child(3){transform:translate(48px,22px) rotate(-2deg)}.page-stack i:nth-child(4){transform:translate(70px,34px) rotate(7deg)}.page-stack i.selected{border:2px solid var(--red);color:var(--red);z-index:4}.demo-note-popup{position:absolute;right:0;bottom:45px;padding:14px 18px;background:#fff;border:1px solid #e1e6ed;border-radius:12px;box-shadow:0 20px 40px rgba(17,26,46,.14);display:flex;flex-direction:column}.demo-note-popup b{font-size:13px}.demo-note-popup span{font-size:11px;color:var(--muted)}
.signature-paper{width:300px;height:330px;background:#fff;border:1px solid #dce3ed;box-shadow:0 25px 55px rgba(17,26,46,.12);padding:35px;display:flex;flex-direction:column;gap:15px;transform:rotate(2deg)}.signature-paper span{font-size:10px;letter-spacing:.14em;color:var(--red);font-weight:800}.signature-paper b{font-family:var(--font-head);font-size:26px}.signature-paper em{margin-top:auto;border-bottom:1px solid #8995a7;padding-bottom:8px;font-family:cursive;font-size:30px}.signature-paper small{color:var(--muted)}.demo-success{position:absolute;right:8%;bottom:18%;padding:12px 18px;background:#effaf3;color:#197044;border-radius:999px;font-weight:800;font-size:13px;box-shadow:0 14px 30px rgba(17,26,46,.1)}

/* ---------- story sections ---------- */
.feature-story{background:#fff}
.story-row{grid-template-columns:1.15fr .85fr;gap:100px;margin-bottom:130px;align-items:center}
.story-row.reverse{grid-template-columns:.85fr 1.15fr}
.story-row.reverse .story-media{order:2}.story-row.reverse .story-copy{order:1}
.story-copy p{font-size:18px;line-height:1.72;color:var(--muted);margin-bottom:22px}
.story-copy ul{list-style:none;margin:0 0 25px;border-top:1px solid var(--line)}
.story-copy li{padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)}
.story-copy li:before{content:"✓";color:var(--red);font-weight:800;margin-right:12px}
.story-media{min-height:470px}
.demo-slot-large{border:1px dashed #c6d1df;border-radius:24px;background:linear-gradient(135deg,#f6f8fb,#eef2f7);display:grid;place-items:center;overflow:hidden;position:relative}
.demo-slot-large:before{content:"";position:absolute;inset:18px;border:1px solid rgba(177,188,204,.55);border-radius:17px}
.demo-slot-large.warm{background:radial-gradient(circle at 70% 25%,rgba(239,67,82,.08),transparent 35%),linear-gradient(135deg,#fbfaf9,#f5f7fa)}
.placeholder-inner{position:relative;z-index:1;text-align:center;padding:45px;max-width:560px}
.placeholder-inner span{display:block;font-size:10px;letter-spacing:.18em;color:var(--red);font-weight:800;margin-bottom:12px}
.placeholder-inner strong{display:block;font-family:var(--font-head);font-size:25px;color:var(--ink);margin-bottom:9px}
.placeholder-inner p{font-size:15px;color:var(--muted);margin:auto}
.side-note-section{background:#f7f9fc}
.side-note-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:110px}
.note-list{border-top:1px solid var(--line)}
.note-list>div{display:grid;grid-template-columns:45px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.note-list b{font-family:var(--font-head);font-size:12px;color:var(--red);letter-spacing:.1em}
.note-list strong{font-family:var(--font-head);font-size:20px;color:var(--ink);display:block;margin-bottom:6px}.note-list p{font-size:16px;color:var(--muted);margin:0}

/* ---------- use cases / pricing / experiences ---------- */
.use-case-lines{border-top:1px solid var(--line)}
.use-case-lines a{display:grid;grid-template-columns:170px 1fr 35px;gap:30px;align-items:center;padding:27px 0;border-bottom:1px solid var(--line);transition:padding .35s var(--ease),background .25s}
.use-case-lines a:hover{padding-left:18px;background:#fff7f8}
.use-case-lines span,.pricing-lines>div>span{font-size:11px;letter-spacing:.14em;font-weight:800;color:var(--red)}
.use-case-lines strong{font-family:var(--font-head);font-size:23px;color:var(--ink)}
.use-case-lines i{font-style:normal;font-size:24px}
.pricing-preview{background:#f7f9fc}
.pricing-intro{display:grid;grid-template-columns:1fr .9fr;gap:90px;align-items:end}
.pricing-lines{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pricing-lines>div{padding:34px 30px 38px;border-right:1px solid var(--line)}
.pricing-lines>div:first-child{padding-left:0}.pricing-lines>div:last-child{border-right:0;padding-right:0}
.pricing-lines>div.featured{background:#fff;margin:0;padding-left:30px;padding-right:30px}
.pricing-lines strong{display:block;font-family:var(--font-head);font-size:27px;color:var(--ink);margin:12px 0 8px}.pricing-lines p{font-size:16px;color:var(--muted);margin-bottom:16px}.pricing-lines a{font-weight:800;color:var(--ink);font-size:15px}.pricing-lines a:hover{color:var(--red)}
.experience-section{background:#fff}
.experience-lines{border-top:1px solid var(--line)}
.experience-line{display:grid;grid-template-columns:70px 1fr 190px;gap:30px;align-items:start;padding:40px 0;border-bottom:1px solid var(--line)}
.experience-line>span{font-family:var(--font-head);font-size:12px;color:var(--red);font-weight:800}
.experience-line blockquote{font-family:var(--font-head);font-size:clamp(23px,2.1vw,31px);line-height:1.35;letter-spacing:-.025em;color:var(--ink);margin:0}
.experience-line div{display:flex;flex-direction:column;gap:2px}.experience-line strong{font-size:15px;color:var(--ink)}.experience-line small{font-size:13px;color:var(--muted)}
.center-action{display:flex;justify-content:center;margin-top:40px}
.faq-section{background:#f7f9fc}
.faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:110px;align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);padding:0}
.faq-list summary{list-style:none;cursor:pointer;padding:24px 42px 24px 0;position:relative;font-family:var(--font-head);font-size:19px;font-weight:700;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";position:absolute;right:0;top:20px;font-size:24px;color:var(--red);transition:transform .25s}.faq-list details[open] summary:after{transform:rotate(45deg)}.faq-list details p{padding:0 45px 25px 0;color:var(--muted);font-size:17px;line-height:1.65}
.final-mac-cta{padding-top:70px;padding-bottom:120px}
.final-panel{position:relative;display:flex;justify-content:space-between;align-items:center;gap:50px;padding:68px 74px;border-radius:24px;background:linear-gradient(120deg,#111a2e 0%,#182746 65%,#243b68 100%);overflow:hidden;box-shadow:0 30px 80px rgba(17,26,46,.2)}
.final-panel:after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-150px;top:-180px;background:radial-gradient(circle,rgba(239,67,82,.28),transparent 65%)}
.final-panel>*{position:relative;z-index:1}.final-panel h2{color:#fff;max-width:760px}.final-panel p{color:#bfcbe0;font-size:18px;margin-top:14px}.final-panel .section-kicker{color:#ff8b93}
.final-panel .btn-light{background:#fff;border-color:#fff;color:var(--ink)}
.info-tab{position:fixed;right:-2px;top:52%;z-index:650;border:1px solid #d7dfe9;border-right:0;background:#fff;color:var(--ink);font-family:var(--font-head);font-size:12px;font-weight:800;letter-spacing:.08em;padding:14px 11px;border-radius:12px 0 0 12px;writing-mode:vertical-rl;box-shadow:0 12px 30px rgba(17,26,46,.12);cursor:pointer;transition:transform .25s}
.info-tab:hover{transform:translateX(-4px)}

/* ---------- make old inner-page cards more editorial ---------- */
.tool-grid,.resource-grid,.industry-grid{grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:0}
.tool-card,.resource,.industry{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-right:1px solid var(--line)!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:34px 34px 38px!important;
  transition:background .25s,transform .35s var(--ease);
}
.tool-card:hover,.resource:hover,.industry:hover{background:#fff7f8!important;transform:translateY(-3px)}
.price-card,.dashboard-card,.doc-row{
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 10px 35px rgba(17,26,46,.05);
}
.price-card:hover{transform:translateY(-5px);box-shadow:0 22px 55px rgba(17,26,46,.1)}
.value-list .value{padding:38px 0}
.page-hero{padding:105px 0 110px;background:radial-gradient(700px 400px at 85% 15%,rgba(239,67,82,.07),transparent 65%),linear-gradient(180deg,#fbfcff,#fff)}
.page-hero h1{font-size:clamp(45px,5vw,72px)}
.page-hero p{font-size:20px;line-height:1.7}
.page-hero img{border-radius:20px;box-shadow:0 35px 85px rgba(17,26,46,.15)}
.demo-slot{border:1px dashed #c8d2df;border-radius:20px;background:#f7f9fc;min-height:360px;display:grid;place-items:center;text-align:center;padding:30px}
.band{background:#f7f9fc}

/* ---------- modal / popup refinements ---------- */
.modal{background:rgba(13,23,48,.58);backdrop-filter:blur(12px)}
.modal-card{border-radius:24px;padding:52px 48px 44px;box-shadow:0 50px 120px rgba(0,0,0,.28)}
.slide-in{border:1px solid var(--line);border-top:3px solid var(--red);border-radius:18px}
.back-top{background:var(--ink);box-shadow:0 10px 30px rgba(17,26,46,.2)}
.scroll-progress{background:linear-gradient(90deg,var(--red),#ff7c87)}

/* ---------- full pricing page cards restored ---------- */
.pricing-offers{background:#fff}
.pricing-page-grid{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pricing-page-grid .price-card{min-height:540px;padding-top:42px;padding-bottom:42px}
.pricing-page-grid .price-card.popular{background:linear-gradient(180deg,#fff7f8 0%,#fff 100%);box-shadow:inset 0 4px 0 var(--red)}
.pricing-page-grid .price-card .eyebrow{font-size:11px;margin-bottom:10px}
.pricing-page-grid .price-card ul{min-height:205px}
.pricing-note{display:flex;gap:18px;align-items:flex-start;padding-top:22px;font-size:13px;color:var(--muted)}
.pricing-note span{flex:0 0 auto;font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--red);padding-top:4px}
.pricing-comparison{background:var(--soft)}
.comparison-table-wrap{overflow-x:auto}
.comparison-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:15px}
.comparison-table th,.comparison-table td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.comparison-table th{font-family:var(--font-head);font-size:13px;color:var(--ink);background:#fafbfc}
.comparison-table th:not(:first-child),.comparison-table td:not(:first-child){text-align:center}
.comparison-table td:not(:first-child){font-weight:800;color:var(--red)}
.comparison-table tr:last-child td{border-bottom:0}
@media(max-width:1180px){.pricing-page-grid{grid-template-columns:repeat(2,1fr)}.pricing-page-grid .price-card:nth-child(2){border-right:0}.pricing-page-grid .price-card:nth-child(3){padding-left:0;border-top:1px solid var(--line)}.pricing-page-grid .price-card:nth-child(4){border-top:1px solid var(--line)}}
@media(max-width:900px){.pricing-page-grid{grid-template-columns:1fr}.pricing-page-grid .price-card,.pricing-page-grid .price-card:nth-child(3),.pricing-page-grid .price-card:nth-child(4){padding:34px 0;border-right:0;border-top:0;border-bottom:1px solid var(--line)}.pricing-page-grid .price-card:last-child{border-bottom:0}.pricing-note{display:block}.pricing-note span{display:block;margin-bottom:7px}}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .navlinks{gap:20px}
  .nav-pricing{display:none}
  .mac-hero-grid{grid-template-columns:1fr;gap:60px}
  .mac-hero-copy{max-width:800px}
  .product-window{max-width:900px;margin-inline:auto}
  .side-note-grid,.pricing-intro,.faq-layout{grid-template-columns:1fr;gap:55px}
}
@media(max-width:900px){
  .container{width:calc(100% - 44px)}
  section{padding:95px 0}
  .insight-strip,.pricing-lines{grid-template-columns:1fr}
  .insight-strip>div,.pricing-lines>div,.pricing-lines>div:first-child,.pricing-lines>div:last-child{border-right:0;padding:27px 0;border-bottom:1px solid var(--line)}
  .pricing-lines>div:last-child{border-bottom:0}
  .demo-carousel{padding:35px 50px 70px}
  .demo-slide{grid-template-columns:1fr;gap:25px}
  .demo-art{min-height:330px}
  .story-row,.story-row.reverse{grid-template-columns:1fr;gap:50px}
  .story-row.reverse .story-media,.story-row.reverse .story-copy{order:initial}
  .story-media{min-height:380px}
  .experience-line{grid-template-columns:50px 1fr}
  .experience-line div{grid-column:2}
  .use-case-lines a{grid-template-columns:120px 1fr 30px}
  .product-float.float-one{left:-12px}.product-float.float-two{right:-12px}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .container{width:calc(100% - 32px)}
  section{padding:74px 0}
  h1{font-size:clamp(42px,12vw,62px)}
  h2{font-size:clamp(34px,9vw,48px)}
  .mac-hero{padding-top:78px}
  .mac-hero .hero-lead{font-size:19px}
  .hero-actions .btn{width:100%}
  .product-preview{grid-template-columns:70px 1fr}
  .preview-inspector{display:none}
  .preview-sidebar{padding:16px 8px}.preview-sidebar b{font-size:9px;padding:9px 6px}.preview-sidebar-note{display:none}
  .preview-paper{padding:15px}.paper-sheet{padding:22px 18px;min-height:330px}
  .product-window-bar{padding:0 12px}.window-file{display:none}.window-status{font-size:8px}
  .product-float{display:none}
  .hero-proof{gap:13px;font-size:10px}
  .demo-carousel{padding:28px 22px 65px;border-radius:18px}
  .demo-slide{min-height:560px}.demo-art-window{height:270px}.demo-art-body{grid-template-columns:55px 1fr 60px}
  .demo-art-page{margin:14px;padding:18px}.demo-nav{width:38px;height:38px}.demo-prev{left:9px}.demo-next{right:9px}
  .story-media{min-height:320px}.placeholder-inner{padding:25px}.placeholder-inner strong{font-size:21px}
  .use-case-lines a{grid-template-columns:1fr 28px;gap:7px;padding:23px 0}.use-case-lines span{grid-column:1/-1}.use-case-lines strong{font-size:20px}
  .final-panel{padding:44px 28px;align-items:flex-start;border-radius:19px}
  .final-actions{width:100%}.final-actions .btn{width:100%}
  .info-tab{top:auto;bottom:110px}
  .brand-name{font-size:19px}.brand-lockup img{width:39px;height:39px}
}

/* ---------- connected image bundle ---------- */
.product-window-real{overflow:hidden}
.product-real-image{background:#eef2f7;padding:0;line-height:0}
.product-real-image img{width:100%;height:auto;display:block;object-fit:cover}
.demo-image-art{min-height:400px!important;border-radius:18px;overflow:hidden;background:#f1f4f8;box-shadow:0 24px 60px rgba(17,26,46,.12)}
.demo-image-art img{width:100%;height:100%;min-height:400px;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.demo-slide.active .demo-image-art img{transform:scale(1.02)}
.story-image{min-height:470px;border-radius:24px;overflow:hidden;background:#eef2f7;box-shadow:0 36px 80px rgba(16,27,52,.13);line-height:0}
.story-image img{width:100%;height:100%;min-height:470px;object-fit:cover;display:block}
.warm-image{background:#fff5f5}
.visual-feature-strip{padding:30px 0 110px;background:#fff}
.visual-strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.visual-feature{position:relative;min-height:310px;padding:22px 22px 28px;border-top:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,#fff,#f7f9fc);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.visual-feature:hover{transform:translateY(-8px);box-shadow:0 25px 60px rgba(17,26,46,.1)}
.visual-feature img{width:100%;height:205px;object-fit:contain;display:block;mix-blend-mode:multiply;transition:transform .6s var(--ease)}
.visual-feature:hover img{transform:scale(1.05) translateY(-5px)}
.visual-feature span{display:block;margin-top:10px;font-size:11px;letter-spacing:.15em;font-weight:800;color:var(--red)}
.visual-feature strong{display:block;margin-top:7px;font-family:var(--font-head);font-size:20px;color:var(--ink)}
@media(max-width:900px){.visual-strip-grid{grid-template-columns:1fr}.visual-feature{min-height:270px}.visual-feature img{height:175px}.story-image,.story-image img{min-height:330px}.demo-image-art,.demo-image-art img{min-height:300px}}

/* ---------- real product image slots ---------- */
.image-slot{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:#f4f7fb;box-shadow:0 28px 70px rgba(16,27,52,.10);line-height:0;min-height:320px}
.image-slot img{display:block;width:100%;height:100%;min-height:320px;object-fit:cover;transition:transform .7s var(--ease),filter .5s ease}
.image-slot:hover img{transform:scale(1.025)}
.demo-slot.image-slot{display:flex;align-items:center;justify-content:center}
.demo-slot.image-slot img{object-fit:cover}

/* The actual Mac screenshots should feel like product evidence, not generic stock art. */
.page-hero-grid > img{background:#eef2f7}
.visual-feature img{object-fit:contain!important;padding:20px;background:#f6f8fb}

@media(max-width:700px){
  .image-slot,.image-slot img{min-height:240px}
}

/* ---------- real product image slots ---------- */
.image-slot{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:#f4f7fb;box-shadow:0 28px 70px rgba(16,27,52,.10);line-height:0;min-height:320px}
.image-slot img{display:block;width:100%;height:100%;min-height:320px;object-fit:cover;transition:transform .7s var(--ease),filter .5s ease}
.image-slot:hover img{transform:scale(1.025)}
.demo-slot.image-slot{display:flex;align-items:center;justify-content:center}
.page-hero-grid > img{background:#eef2f7}
.visual-feature img{object-fit:contain!important;padding:20px;background:#f6f8fb}
@media(max-width:700px){.image-slot,.image-slot img{min-height:240px}}


/* =========================================================
   v4 precision fixes — preserve the previous site, change only
   the requested navigation, branding, checklist and card spread.
   ========================================================= */
.brand-lockup{gap:12px}
.brand-lockup img{width:56px;height:56px;object-fit:cover;border-radius:13px;box-shadow:0 8px 22px rgba(17,26,46,.14)}
.brand-name{display:inline-flex;align-items:baseline;gap:0;font-family:var(--font-head);font-size:23px;font-weight:800;letter-spacing:-.055em;color:var(--ink);white-space:nowrap}
.brand-name em{font-style:normal;color:var(--red)}
.brand-name span{color:var(--ink)}
.nav-support{display:inline-flex!important;align-items:center;padding:9px 14px!important;border:1px solid #ccd5e2;border-radius:9px;color:var(--ink)!important;background:#fff}
.nav-support:after{display:none!important}
.nav-support:hover{border-color:var(--ink);background:#f8fafc}
.mobile-support{font-weight:800!important;color:var(--ink)!important;background:#f7f9fc;border:1px solid var(--line);border-radius:9px;text-align:center;margin:10px 0;padding:12px!important}
.footer-logo{gap:12px}
.footer-logo img{width:48px;height:48px}
.footer-logo .brand-name{font-size:25px}

/* The hero keeps the original real Mac screenshot supplied with the site. */
.product-real-image{background:#eef2f7}
.product-real-image img{display:block;width:100%;height:auto;object-fit:contain}

/* Fix checkmarks: dedicated circular badge, never over the first word. */
.story-copy li{position:relative;padding:14px 0 14px 43px}
.story-copy li:before{content:'✓';position:absolute;left:0;top:11px;width:25px;height:25px;display:grid;place-items:center;margin:0;border-radius:50%;background:#edf8f1;border:1px solid #c9ead7;color:#188458;font-size:12px;font-weight:900}
.story-copy li:hover:before{transform:scale(1.08);box-shadow:0 6px 16px rgba(24,132,88,.14)}

/* Premium spread section — visual depth without returning to a card-grid homepage. */
.card-spread-section{padding:125px 0 145px;background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);overflow:hidden}
.card-spread-head{display:grid;grid-template-columns:1fr .85fr;gap:90px;align-items:end;margin-bottom:65px}
.card-spread-head h2{max-width:680px}
.card-spread-head p{font-size:18px;color:var(--muted);line-height:1.7}
.card-spread-stage{position:relative;min-height:600px;display:grid;place-items:center;perspective:1400px}
.spread-panel{position:absolute;width:280px;min-height:205px;padding:25px;background:#fff;border:1px solid #dfe5ee;border-radius:20px;box-shadow:0 24px 65px rgba(17,26,46,.12);transition:transform .65s var(--ease),box-shadow .65s var(--ease),opacity .5s ease;z-index:2}
.spread-panel span{display:block;font-size:10px;letter-spacing:.15em;font-weight:800;color:var(--red);margin-bottom:9px}
.spread-panel strong{display:block;font-family:var(--font-head);font-size:22px;line-height:1.15;color:var(--ink);margin-bottom:9px}
.spread-panel p{font-size:14px;line-height:1.55;color:var(--muted)}
.spread-panel.one{left:4%;top:17%;transform:translateZ(-30px) rotate(-10deg)}
.spread-panel.two{right:4%;top:17%;transform:translateZ(-20px) rotate(10deg)}
.spread-panel.three{left:10%;bottom:8%;transform:translateZ(-10px) rotate(7deg)}
.spread-panel.four{right:10%;bottom:8%;transform:translateZ(-5px) rotate(-7deg)}
.spread-core{position:relative;width:min(720px,72%);z-index:5;background:#fff;border:1px solid #dfe5ee;border-radius:22px;overflow:hidden;box-shadow:0 38px 100px rgba(17,26,46,.18);transform:translateY(20px);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.spread-core:before{content:'';display:block;height:42px;background:#f8fafc;border-bottom:1px solid #e4e9f0}
.spread-dots{position:absolute;left:17px;top:15px;display:flex;gap:6px}.spread-dots i{width:10px;height:10px;border-radius:50%}.spread-dots i:nth-child(1){background:#ff5f57}.spread-dots i:nth-child(2){background:#febc2e}.spread-dots i:nth-child(3){background:#28c840}
.spread-core img{width:100%;display:block;background:#eef2f7}
.spread-core-caption{padding:20px 24px 23px}.spread-core-caption span{font-size:10px;letter-spacing:.15em;font-weight:800;color:var(--red)}.spread-core-caption strong{display:block;font-family:var(--font-head);font-size:22px;margin-top:6px;color:var(--ink)}
.card-spread-stage.in-view .spread-core{transform:translateY(0)}
.card-spread-stage.in-view .spread-panel.one{transform:translate(-24px,-10px) rotate(-13deg)}
.card-spread-stage.in-view .spread-panel.two{transform:translate(24px,-10px) rotate(13deg)}
.card-spread-stage.in-view .spread-panel.three{transform:translate(-18px,12px) rotate(9deg)}
.card-spread-stage.in-view .spread-panel.four{transform:translate(18px,12px) rotate(-9deg)}
.spread-panel:hover{z-index:8;transform:translateY(-12px) rotate(0)!important;box-shadow:0 34px 85px rgba(17,26,46,.18)}

/* Make the demo carousel unmistakably automatic + manual. */
.demo-carousel{overflow:hidden;position:relative}
.demo-slide{transition:opacity .55s ease,transform .65s var(--ease)}
.demo-slide.active{animation:demoSlideIn .65s var(--ease)}
@keyframes demoSlideIn{from{opacity:0;transform:translateX(35px)}to{opacity:1;transform:none}}
.demo-nav{transition:transform .2s var(--ease),background .2s,border-color .2s}.demo-nav:hover{transform:translateY(-2px) scale(1.04);background:#fff7f8;border-color:#f2a1a8;color:var(--red)}
.demo-dots button{transition:width .25s ease,background .25s ease,transform .25s ease}.demo-dots button:hover{transform:scale(1.15)}

/* Keep inner pages distinct while sharing the same brand system. */
.page-hero,.hiw-hero{background:linear-gradient(180deg,#f7f9fc 0%,#fff 100%)}

@media(max-width:900px){
  .card-spread-head{grid-template-columns:1fr;gap:20px}
  .card-spread-stage{min-height:720px}
  .spread-core{width:82%}
  .spread-panel{width:235px}
  .spread-panel.one{left:-2%}.spread-panel.two{right:-2%}.spread-panel.three{left:0}.spread-panel.four{right:0}
}
@media(max-width:700px){
  .brand-lockup img{width:40px;height:40px;border-radius:11px}.brand-name{font-size:19px}.footer-logo .brand-name{font-size:21px}
  .card-spread-stage{min-height:690px}.spread-core{width:96%}.spread-panel{width:170px;padding:17px;min-height:160px}.spread-panel strong{font-size:16px}.spread-panel p{font-size:11px}.spread-panel.one{top:8%;left:-5%}.spread-panel.two{top:8%;right:-5%}.spread-panel.three{bottom:3%;left:-3%}.spread-panel.four{bottom:3%;right:-3%}
}


/* ---------- dedicated How It Works page ---------- */
.hiw-hero{padding:110px 0 95px;background:radial-gradient(700px 460px at 86% 25%,rgba(230,63,75,.10),transparent 65%),linear-gradient(180deg,#f8faff,#fff)}
.hiw-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}.hiw-hero h1{max-width:720px}.hiw-hero p{font-size:20px;line-height:1.7;color:var(--muted);max-width:660px;margin:25px 0 35px}.hiw-hero-visual{position:relative}.hiw-hero-visual .image-slot{border-radius:24px}.hiw-hero-visual img{width:100%;display:block}.hiw-badge{position:absolute;right:-24px;bottom:28px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 17px;font-size:11px;letter-spacing:.14em;font-weight:800;color:var(--red);box-shadow:0 18px 45px rgba(16,27,52,.13)}
.hiw-timeline{background:#fff}.hiw-steps{position:relative;border-top:1px solid var(--line)}.hiw-step{display:grid;grid-template-columns:70px .85fr 1.15fr;gap:38px;align-items:center;padding:68px 0;border-bottom:1px solid var(--line)}.hiw-num{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1px solid #cfd8e5;background:#fff;font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--red);box-shadow:0 10px 25px rgba(16,27,52,.06)}.hiw-copy>span{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--red)}.hiw-copy h3{font-size:clamp(28px,2.6vw,39px);margin:9px 0 14px}.hiw-copy p{font-size:17px;line-height:1.72;color:var(--muted)}.hiw-media{overflow:hidden;border-radius:20px;border:1px solid var(--line);background:#f1f4f8;box-shadow:0 24px 65px rgba(16,27,52,.11)}.hiw-media img{width:100%;display:block;transition:transform .8s var(--ease)}.hiw-step:hover .hiw-media img{transform:scale(1.025)}
.hiw-principles{background:#f7f9fc}.hiw-principle-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hiw-principle{padding:34px 30px 42px}.hiw-principle+.hiw-principle{border-left:1px solid var(--line)}.hiw-principle b{font-size:11px;color:var(--red);letter-spacing:.12em}.hiw-principle h3{font-size:25px;margin:14px 0 9px}.hiw-principle p{font-size:15px;color:var(--muted);line-height:1.65}
@media(max-width:1000px){.hiw-hero-grid{grid-template-columns:1fr;gap:45px}.hiw-step{grid-template-columns:55px 1fr}.hiw-media{grid-column:2}.hiw-principle-grid{grid-template-columns:1fr}.hiw-principle+.hiw-principle{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:700px){.hiw-hero{padding:75px 0 65px}.hiw-hero h1{font-size:44px}.hiw-hero p{font-size:16px}.hiw-step{grid-template-columns:45px 1fr;gap:18px;padding:45px 0}.hiw-num{width:45px;height:45px}.hiw-copy h3{font-size:27px}.hiw-copy p{font-size:14px}.hiw-media{grid-column:2}.hiw-badge{right:12px;bottom:12px;font-size:9px}}

.hero-original-media{position:relative;width:calc(100% + 38px);margin-left:-10px}.hero-original-image{border-radius:24px;overflow:hidden;line-height:0;background:#0d1630;box-shadow:0 40px 110px rgba(16,27,52,.22),0 0 0 1px rgba(216,225,238,.9);animation:floaty 8s ease-in-out infinite}.hero-original-image img{width:100%;height:auto;display:block}.hero-original-media .product-float{z-index:4}.hero-original-media .float-one{left:-28px;top:18%}.hero-original-media .float-two{right:-22px;top:52%}.hero-original-media .float-three{left:14%;bottom:-20px}
@media(max-width:1180px){.mac-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px}.hero-original-media{width:100%;margin-left:0}}
@media(max-width:700px){.hero-original-media .float-one,.hero-original-media .float-two,.hero-original-media .float-three{display:none}}


/* =========================================================
   V4.2 — persistent navigation + FAQ refinement
   Keep the existing visual system; only strengthen navigation
   persistence and make FAQ feel like a finished product section.
   ========================================================= */

/* Persistent header:
   the JS promotes the header to fixed after the visitor scrolls. */
.header-fixed-spacer{
  display:block;
  width:100%;
  height:0;
  pointer-events:none;
}
.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:900;
  width:100%;
}
.site-header.is-floating{
  position:fixed !important;
  top:0 !important;
  left:0;
  right:0;
  animation:headerDrop .28s var(--ease);
  border-bottom-color:rgba(223,229,238,.9);
  box-shadow:0 10px 32px rgba(16,27,52,.08);
}
.site-header.is-floating .nav{
  height:72px;
}
@keyframes headerDrop{
  from{opacity:.92;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* FAQ is now a first-class navigation item. */
.navlinks>a[href*="faq.html"]{
  font-weight:800;
}

/* FAQ section — editorial, not another card grid. */
.faq-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(600px 420px at 8% 40%,rgba(37,99,235,.055),transparent 70%),
    radial-gradient(620px 430px at 92% 70%,rgba(230,63,75,.055),transparent 70%),
    #f7f9fc;
  border-top:1px solid #edf1f6;
  border-bottom:1px solid #edf1f6;
}
.faq-section:before{
  content:'';
  position:absolute;
  width:1px;
  height:100%;
  left:calc(50% - 20px);
  top:0;
  background:rgba(218,225,235,.7);
  pointer-events:none;
}
.faq-layout{
  position:relative;
  z-index:1;
}
.faq-layout > .reveal:first-child{
  position:sticky;
  top:118px;
}
.faq-layout > .reveal:first-child h2{
  max-width:440px;
}
.faq-layout > .reveal:first-child p{
  max-width:440px;
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
}
.faq-list{
  background:rgba(255,255,255,.72);
  border:1px solid #e0e6ef;
  border-radius:20px;
  padding:0 28px;
  box-shadow:0 24px 70px rgba(17,26,46,.055);
  backdrop-filter:blur(8px);
}
.faq-list details{
  position:relative;
  border-bottom:1px solid #e4e9f0;
}
.faq-list details:last-child{
  border-bottom:0;
}
.faq-list summary{
  padding:25px 58px 25px 4px;
  font-size:clamp(18px,1.45vw,21px);
}
.faq-list summary:after{
  right:5px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid #dbe2eb;
  border-radius:50%;
  background:#fff;
  font-size:21px;
  line-height:1;
}
.faq-list details[open] summary{
  color:var(--ink);
}
.faq-list details[open] summary:after{
  background:#fff4f5;
  border-color:#ffd1d5;
  color:var(--red);
}
.faq-list details p{
  padding:0 58px 26px 4px;
  font-size:17px;
  line-height:1.72;
  color:var(--muted);
  max-width:720px;
}
.faq-list details[open]{
  animation:faqOpen .3s var(--ease);
}
@keyframes faqOpen{
  from{opacity:.65;transform:translateY(-3px)}
  to{opacity:1;transform:none}
}

@media(max-width:900px){
  .faq-section:before{display:none}
  .faq-layout > .reveal:first-child{
    position:static;
  }
  .faq-list{
    padding:0 20px;
  }
}

@media(max-width:760px){
  .site-header.is-floating .nav{
    height:68px;
  }
  .faq-list{
    border-radius:16px;
    padding:0 16px;
  }
  .faq-list summary{
    padding:21px 46px 21px 2px;
  }
  .faq-list details p{
    padding:0 42px 22px 2px;
    font-size:16px;
  }
}





















/* =========================================================
   Smart PDF Pilot CONTACT PAGE
   Uses the existing brand colours and supplied image assets
   ========================================================= */

.contact-page {
  overflow: hidden;
  background: #fff;
}

.contact-page .container {
  width: min(1280px, calc(100% - 72px));
}

/* HERO */

.contact-hero {
  position: relative;
  padding: 88px 0 104px;
  background:
    radial-gradient(
      ellipse at 84% 35%,
      rgba(45, 104, 216, .07),
      transparent 38%
    ),
    linear-gradient(180deg, #f8faff 0%, #fff 100%);
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: 70px;
}

.contact-hero-copy {
  position: relative;
  z-index: 2;
}

.contact-hero .breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}

.contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.contact-live-dot,
.contact-note-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex: 0 0 auto;
}

.contact-live-dot {
  box-shadow: 0 0 0 5px rgba(239, 67, 82, .09);
}

.contact-hero h1 {
  max-width: 650px;
  margin-bottom: 26px;
  font-size: clamp(46px, 5.1vw, 72px);
  line-height: 1.06;
  letter-spacing: -.055em;
}

.contact-hero h1 span {
  color: var(--red);
}

.contact-hero-description {
  max-width: 540px;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.75;
}

.contact-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-hero-actions .btn {
  font-size: 16px;
}

.contact-trust-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e7ebf2;
}

.contact-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #66748a;
  font-size: 12px;
  font-weight: 600;
}

.contact-trust-row i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff0f2;
  color: var(--red);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

/* MACBOOK IMAGE */

.contact-hero-visual {
  position: relative;
  min-width: 0;
  padding: 26px 0;
  isolation: isolate;
}

.contact-visual-glow {
  position: absolute;
  z-index: -1;
  inset: 12% 4%;
  border-radius: 50%;
  background: rgba(45, 104, 216, .12);
  filter: blur(65px);
}

.contact-image-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(204, 214, 229, .9);
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 35px 80px rgba(17, 26, 46, .15),
    0 8px 22px rgba(17, 26, 46, .05);
  transition: transform .4s ease, box-shadow .4s ease;
}

.contact-image-frame:hover {
  transform: translateY(-5px);
  box-shadow:
    0 44px 90px rgba(17, 26, 46, .19),
    0 8px 22px rgba(17, 26, 46, .05);
}

.contact-image-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 43px;
  padding: 0 15px;
  border-bottom: 1px solid #e7ebf1;
  background: #fff;
  color: #6c778b;
  font-size: 11px;
  font-weight: 600;
}

.contact-window-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.contact-window-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6058;
}

.contact-window-dots span:nth-child(2) {
  background: #ffbd2e;
}

.contact-window-dots span:nth-child(3) {
  background: #28c840;
}

.contact-window-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #536177;
  white-space: nowrap;
}

.contact-window-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2bb673;
}

.contact-image-frame > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* FLOATING LABELS */

.contact-float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 17px;
  border: 1px solid rgba(223, 229, 238, .9);
  border-radius: 13px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 38px rgba(17, 26, 46, .11);
  backdrop-filter: blur(12px);
  animation: contactFloat 6s ease-in-out infinite;
}

.contact-float-top {
  top: 0;
  right: -12px;
}

.contact-float-bottom {
  bottom: 0;
  left: -28px;
  animation-delay: -3s;
}

.contact-float-card strong,
.contact-float-card small {
  display: block;
}

.contact-float-card strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}

.contact-float-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.contact-float-icon,
.contact-float-check {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #fff0f2;
  color: var(--red);
  font-size: 19px;
}

.contact-float-check {
  background: #edf8f1;
  color: #168451;
}

@keyframes contactFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* CONTACT OPTIONS */

.contact-options-section {
  padding: 100px 0;
    background: linear-gradient(110deg, rgb(233 235 248) 0%, rgb(253 253 253) 55%, rgb(255 255 255) 100%);
  border-top: 1px solid #edf0f5;
}

.contact-section-heading {
  max-width: 760px;
  margin: 0 auto 55px;
  text-align: center;
}

.contact-section-heading .section-kicker {
  margin-bottom: 17px;
}

.contact-section-heading h2 {
  margin-bottom: 18px;
  font-size: clamp(32px, 3.6vw, 48px);
}

.contact-section-heading > p {
  margin-inline: auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
}

.contact-options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.contact-option {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 310px;
  padding: 30px;
  border: 1px solid #e4e9f1;
  border-radius: 17px;
  background: #fff;
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.contact-option:hover {
  transform: translateY(-5px);
  border-color: #f2b9c0;
  box-shadow: 0 20px 45px rgba(17, 26, 46, .07);
}

.contact-option-icon {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  margin-bottom: 24px;
  border-radius: 13px;
  font-size: 23px;
  font-weight: 700;
}

.contact-icon-red {
  background: #fff0f2;
  color: var(--red);
}

.contact-icon-blue {
  background: #edf4ff;
  color: #2d68d8;
}

.contact-icon-purple {
  background: #f3efff;
  color: #7757cf;
}

.contact-option-number {
  margin-bottom: 10px;
  color: #8792a4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

.contact-option h3 {
  margin-bottom: 12px;
  font-size: 23px;
  letter-spacing: -.035em;
}

.contact-option p {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.contact-option-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid #e9edf3;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.contact-option-link b {
  color: var(--red);
  font-size: 19px;
  transition: transform .25s ease;
}

.contact-option:hover .contact-option-link b {
  transform: translate(3px, -3px);
}

/* MESSAGE FORM SECTION */

.contact-message-section {
  padding: 100px 0 115px;
 background: linear-gradient(262deg, rgb(255, 246, 247) 0%, rgb(255, 250, 251) 55%, rgb(255, 255, 255) 100%);
  border-block: 1px solid #e9edf4;
}

.contact-message-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(290px, .75fr);
  align-items: start;
  gap: 75px;
}

.contact-form-panel {
  min-width: 0;
  padding: 42px;
  border: 1px solid #e4e9f1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 15px 45px rgba(17, 26, 46, .045);
}

.contact-form-panel > .section-kicker {
  margin-bottom: 14px;
}

.contact-form-panel h2 {
  margin-bottom: 15px;
  font-size: clamp(32px, 3.3vw, 44px);
}

.contact-form-intro {
  max-width: 590px;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 23px 20px;
}

.contact-form-grid .field {
  min-width: 0;
}

.contact-form-grid .field.full {
  grid-column: 1 / -1;
}

.contact-form-grid .field label {
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.contact-form-grid .field input,
.contact-form-grid .field textarea,
.contact-form-grid .field select {
  width: 100%;
  min-width: 0;
  border: 1px solid #d9e0eb;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.contact-form-grid .field input,
.contact-form-grid .field select {
  min-height: 53px;
  padding: 13px 15px;
}

.contact-form-grid .field textarea {
  min-height: 145px;
  padding: 15px;
  resize: vertical;
}

.contact-form-grid .field input::placeholder,
.contact-form-grid .field textarea::placeholder {
  color: #9aa5b6;
}

.contact-form-grid .field input:focus,
.contact-form-grid .field textarea:focus,
.contact-form-grid .field select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(239, 67, 82, .09);
}

.contact-submit-field {
  margin-top: 2px;
}

.contact-submit {
  width: 100%;
  min-height: 56px;
  font-size: 16px;
}

.contact-form-Privacy Policy {
  margin-top: 13px;
  color: #8792a4;
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

.contact-submit-field .form-note {
  overflow-wrap: anywhere;
}

/* DIRECT CONTACT PANEL */

.contact-details-panel {
  position: sticky;
  top: 110px;
  overflow: hidden;
  padding: 35px 30px;
  border: 1px solid #e3e8f0;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 15px 45px rgba(17, 26, 46, .04);
}

.contact-details-heading {
  padding-bottom: 28px;
  border-bottom: 1px solid #e8ecf2;
}

.contact-details-icon {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: #fff0f2;
  color: var(--red);
  font-size: 22px;
}

.contact-details-heading .section-kicker {
  display: block;
  margin-bottom: 10px;
  font-size: 10px;
}

.contact-details-heading h3 {
  margin-bottom: 10px;
  font-size: 28px;
}

.contact-details-heading > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 23px 0;
  border-bottom: 1px solid #edf0f5;
}

.contact-detail-symbol {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #f4f6fa;
  color: var(--ink);
  font-size: 18px;
}

.contact-detail-label {
  display: block;
  margin-bottom: 5px;
  color: #8994a7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.contact-detail-item a,
.contact-detail-item p {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.contact-detail-item a:hover {
  color: var(--red);
}

.contact-details-divider {
  height: 1px;
  margin-top: 4px;
  background: #edf0f5;
}

.contact-support-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.contact-support-link span {
  color: var(--red);
  font-size: 20px;
  transition: transform .2s ease;
}

.contact-support-link:hover span {
  transform: translateX(4px);
}

.contact-details-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 17px;
  border-radius: 11px;
  background: #f7f9fc;
}

.contact-details-note .contact-note-dot {
  margin-top: 7px;
  width: 7px;
  height: 7px;
}

.contact-details-note p {
  color: #718096;
  font-size: 12px;
  line-height: 1.8;
}

/* FINAL CTA WITH YOUR NEON BACKGROUND IMAGE */

.contact-final-section {
  padding: 30px 0 110px;
  background: #f7f9fc;
}

.contact-final-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 305px;
  padding: 55px 62px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;

  /* Image path is relative to css/site.css */
  background-color: #0d1730;
  background-image:
    linear-gradient(
      90deg,
      rgba(9, 20, 45, .20) 0%,
      rgba(9, 20, 45, .05) 100%
    ),
    url("assets/backgrounds/Abstract-Neon-Wave-Ribbons.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  box-shadow: 0 28px 65px rgba(17, 26, 46, .17);
}

.contact-final-overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 19, 43, .40) 0%,
    rgba(8, 19, 43, .16) 58%,
    rgba(8, 19, 43, .04) 100%
  );
  pointer-events: none;
}

.contact-final-copy {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

.contact-final-kicker {
  display: inline-block;
  margin-bottom: 19px;
  color: #ff8994;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
}

.contact-final-copy h2 {
  max-width: 620px;
  margin-bottom: 16px;
  color: #fff;
  font-size: clamp(34px, 3.7vw, 50px);
  line-height: 1.1;
  letter-spacing: -.045em;
}

.contact-final-copy p {
  max-width: 570px;
  color: #d4deef;
  font-size: 16px;
  line-height: 1.8;
}

.contact-final-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.contact-final-actions .btn {
  min-width: 190px;
  min-height: 53px;
  font-size: 14px;
}

.contact-final-actions .btn-light {
  border-color: rgba(255, 255, 255, .85);
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .contact-hero-grid {
    gap: 45px;
  }

  .contact-message-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, .8fr);
    gap: 32px;
  }

  .contact-form-panel {
    padding: 32px 26px;
  }

  .contact-details-panel {
    padding: 28px 22px;
  }

  .contact-final-panel {
    padding: 45px 38px;
  }
}

@media (max-width: 850px) {
  .contact-hero {
    padding: 62px 0 80px;
  }

  .contact-hero-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .contact-hero-copy {
    max-width: 690px;
  }

  .contact-hero-visual {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .contact-options-section,
  .contact-message-section {
    padding: 76px 0;
  }

  .contact-options-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .contact-option {
    min-height: 0;
    padding: 25px;
  }

  .contact-option-icon {
    margin-bottom: 17px;
  }

  .contact-option p {
    margin-bottom: 20px;
  }

  .contact-message-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .contact-details-panel {
    position: static;
  }

  .contact-final-section {
    padding: 15px 0 76px;
  }

  .contact-final-panel {
    align-items: flex-start;
    flex-direction: column;
    gap: 28px;
  }

  .contact-final-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .contact-page .container {
    width: calc(100% - 36px);
  }

  .contact-hero {
    padding: 40px 0 58px;
  }

  .contact-hero .breadcrumb {
    margin-bottom: 28px;
  }

  .contact-hero h1 {
    font-size: clamp(39px, 10.5vw, 55px);
  }

  .contact-hero-description {
    font-size: 17px;
  }

  .contact-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-hero-actions .btn {
    width: 100%;
  }

  .contact-trust-row {
    gap: 11px 14px;
  }

  .contact-trust-row span {
    font-size: 11px;
  }

  .contact-hero-visual {
    padding: 25px 0;
  }

  .contact-image-frame {
    border-radius: 11px;
  }

  .contact-image-topbar {
    min-height: 35px;
    padding-inline: 9px;
    gap: 8px;
    font-size: 9px;
  }

  .contact-window-dots {
    gap: 3px;
  }

  .contact-window-dots span {
    width: 7px;
    height: 7px;
  }

  .contact-float-card {
    gap: 8px;
    padding: 9px 11px;
    border-radius: 10px;
  }

  .contact-float-top {
    right: -3px;
  }

  .contact-float-bottom {
    left: -3px;
  }

  .contact-float-card strong {
    font-size: 10px;
  }

  .contact-float-card small {
    font-size: 9px;
  }

  .contact-float-icon,
  .contact-float-check {
    width: 29px;
    height: 29px;
    font-size: 16px;
  }

  .contact-options-section,
  .contact-message-section {
    padding: 60px 0;
  }

  .contact-section-heading {
    margin-bottom: 35px;
    text-align: left;
  }

  .contact-section-heading h2 {
    font-size: 33px;
  }

  .contact-section-heading > p {
    font-size: 16px;
  }

  .contact-form-panel {
    padding: 26px 19px;
    border-radius: 15px;
  }

  .contact-form-panel h2 {
    font-size: 32px;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-form-grid .field.full {
    grid-column: auto;
  }

  .contact-form-grid .field input,
  .contact-form-grid .field select {
    min-height: 50px;
  }

  .contact-form-grid .field textarea {
    min-height: 130px;
  }

  .contact-details-panel {
    padding: 26px 20px;
  }

  .contact-final-section {
    padding-bottom: 60px;
  }

  .contact-final-panel {
    min-height: 0;
    padding: 36px 24px;
    border-radius: 16px;
    background-position: 60% center;
  }

  .contact-final-overlay {
    background: rgba(8, 19, 43, .52);
  }

  .contact-final-copy h2 {
    font-size: 34px;
  }

  .contact-final-copy p {
    font-size: 15px;
  }

  .contact-final-actions {
    width: 100%;
    flex-direction: column;
  }

  .contact-final-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-float-card {
    animation: none;
  }

  .contact-image-frame,
  .contact-option,
  .contact-support-link span {
    transition: none;
  }
}

/* Contact hero: one MacBook, no duplicate window frame */

.contact-hero-visual-clean {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 30px 0;
}

.contact-hero-visual-clean .contact-visual-glow {
  inset: 18% 8%;
  background: rgba(45, 104, 216, .10);
  filter: blur(75px);
}

.contact-macbook-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 115%;
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgba(17, 26, 46, .13));
  transition: transform .4s ease, filter .4s ease;
}

.contact-macbook-image:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 30px 35px rgba(17, 26, 46, .17));
}

/* Keep only one floating card */
.contact-hero-visual-clean .contact-float-top {
  top: 4%;
  right: -2%;
  z-index: 2;
}

.contact-hero-visual-clean .contact-float-bottom {
  display: none;
}

@media (max-width: 850px) {
  .contact-hero-visual-clean {
    width: 100%;
    padding: 22px 0;
  }

  .contact-macbook-image {
    width: 110%;
    max-width: 110%;
  }

  .contact-hero-visual-clean .contact-float-top {
    right: 0;
    top: 0;
  }
}

@media (max-width: 600px) {
  .contact-macbook-image {
    width: 100%;
    max-width: 100%;
  }

  .contact-hero-visual-clean .contact-float-top {
    top: -4px;
    right: 0;
  }
}









/* Smart PDF Pilot — compact overrides for the How It Works page. Load this AFTER the existing page CSS. */
.hiw-page { overflow: visible !important; }
.hiw-page .hiw-v2-mac { padding-block: 54px; }
.hiw-page .hiw-v2-mac-grid { grid-template-columns: minmax(0,1fr); gap: 0; max-width: 900px; }
.hiw-page .hiw-v2-mac-visual { display: none; }
.hiw-page .hiw-v2-mac-copy { max-width: 900px; }
.hiw-page .hiw-v2-mac-copy h2 { max-width: 650px; margin-bottom: 12px; font-size: clamp(28px,3vw,39px); line-height: 1.15; }
.hiw-page .hiw-v2-mac-copy > p { max-width: 820px; margin-bottom: 10px; font-size: 14px; line-height: 1.7; }
.hiw-page .hiw-v2-benefit-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 20px 0; border: 0; }
.hiw-page .hiw-v2-benefit-list > div { display: block; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.hiw-page .hiw-v2-benefit-list > div > span { margin-bottom: 10px; }
.hiw-page .hiw-v2-benefit-list h3 { font-size: 14px; }
.hiw-page .hiw-v2-benefit-list p { font-size: 12px; line-height: 1.65; }
.hiw-page .hiw-v2-guide { padding-block: 58px; }
.hiw-page .hiw-v2-guide-grid { gap: 55px; }
.hiw-page .hiw-v2-guide-intro h2 { font-size: clamp(28px,3vw,38px); line-height: 1.15; margin-bottom: 12px; }
.hiw-page .hiw-v2-guide-intro p, .hiw-page .hiw-v2-guide-content p { font-size: 13px; line-height: 1.75; }
.hiw-page .hiw-v2-guide-content article { padding-bottom: 19px; margin-bottom: 19px; }
.hiw-page .hiw-v2-guide-content h3 { margin: 7px 0 8px; font-size: 19px; }

/* Gallery: full-bleed background, Paint-style copy left and app preview right. */
.hiw-page .hiw-v2-gallery { position: relative; display: block; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; left: auto; padding: 66px 0; box-sizing: border-box; overflow: visible; }
.hiw-page .hiw-v2-gallery-grid { display: grid; width: min(1280px,calc(100% - 64px)); max-width: 1280px; margin-inline: auto; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); align-items: center; gap: 36px; position: relative; isolation: isolate; }
.hiw-page .hiw-v2-gallery-copy { position: relative; z-index: 2; min-width: 0; width: 100%; padding: 0; }
.hiw-page .hiw-v2-gallery-copy h2 { max-width: 440px; font-size: clamp(30px,3.2vw,43px); line-height: 1.1; }
.hiw-page .hiw-v2-gallery-copy > p { max-width: 450px; margin-top: 14px; font-size: 14px; line-height: 1.75; }
.hiw-page .hiw-v2-gallery-caption { max-width: 450px; min-height: 0; margin-top: 22px; padding-top: 17px; }
.hiw-page .hiw-v2-gallery-caption h3 { font-size: 20px; margin: 8px 0; }
.hiw-page .hiw-v2-gallery-caption p { font-size: 13px; line-height: 1.7; }
.hiw-page .hiw-v2-gallery-copy > .hiw-v2-gallery-controls { position: static; display: flex; align-items: center; justify-content: flex-start; gap: 15px; width: max-content; max-width: 100%; margin: 16px 0 0; padding: 0; background: transparent; }
.hiw-page .hiw-v2-gallery-controls > button { width: 42px; height: 42px; }
.hiw-page .hiw-v2-gallery-dots { display: flex; align-items: center; gap: 8px; }
.hiw-page .hiw-v2-gallery-stage { position: relative; z-index: 3; width: 100%; min-width: 0; margin: 0; }
.hiw-page .hiw-v2-gallery-window { width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: 16px; background: #fff; box-shadow: 0 28px 65px rgba(0,0,0,.25); }
.hiw-page .hiw-v2-gallery-slides { display: grid; min-width: 0; min-height: 0; }
.hiw-page .hiw-v2-gallery-slide { display: none; grid-area: 1/1; margin: 0; }
.hiw-page .hiw-v2-gallery-slide.active { display: block; animation: hiwGalleryIn .4s ease both; }
.hiw-page .hiw-v2-gallery-slide img { display: block; width: 100%; height: auto; }
.hiw-page .hiw-v2-gallery-foot { display: flex; justify-content: space-between; gap: 14px; padding-top: 13px; font-size: 10px; }
@media(max-width:1000px) { .hiw-page .hiw-v2-gallery { padding: 56px 0; } .hiw-page .hiw-v2-gallery-grid { width: calc(100% - 48px); grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 24px; } .hiw-page .hiw-v2-mac-grid { max-width: 760px; } .hiw-page .hiw-v2-benefit-list { gap: 10px; } .hiw-page .hiw-v2-guide-grid { gap: 32px; } }
@media(max-width:700px) { .hiw-page .hiw-v2-gallery { padding: 48px 0; } .hiw-page .hiw-v2-gallery-grid, .hiw-page .hiw-v2-guide-grid { width: calc(100% - 36px); grid-template-columns: minmax(0,1fr); gap: 25px; } .hiw-page .hiw-v2-gallery-copy { padding: 0; } .hiw-page .hiw-v2-gallery-stage { width: 100%; margin: 0; } .hiw-page .hiw-v2-gallery-caption { min-height: 0; } .hiw-page .hiw-v2-gallery-copy > .hiw-v2-gallery-controls { flex-wrap: wrap; } .hiw-page .hiw-v2-benefit-list { grid-template-columns: 1fr; } .hiw-page .hiw-v2-mac { padding-block: 42px; } .hiw-page .hiw-v2-guide { padding-block: 45px; } .hiw-page .hiw-v2-guide-intro { position: static; } }












.hiw-page { --hiw-pink: #fff0f2; --hiw-blue: #edf4ff; overflow: clip; background: #fff; }
.hiw-page .container { width: min(1280px, calc(100% - 64px)); }
.hiw-v2-hero { position: relative; padding: 112px 0 72px; background: radial-gradient(ellipse at 86% 35%, rgba(239, 67, 82, .12), transparent 38%), radial-gradient(ellipse at 10% 5%, rgba(45, 104, 216, .09), transparent 40%), linear-gradient(145deg, #f9fbff, #fff 68%); }
.hiw-v2-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 70px; }
.hiw-v2-hero-copy { position: relative; z-index: 2; }
.hiw-v2-hero h1 { max-width: 660px; font-size: clamp(43px, 5.1vw, 70px); line-height: 1.045; letter-spacing: -.055em; }
.hiw-v2-hero h1 span { display: block; color: var(--red); }
.hiw-v2-hero-copy > p { max-width: 570px; margin: 24px 0 30px; color: var(--muted); font-size: 18px; line-height: 1.8; }
.hiw-v2-trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; }
.hiw-v2-trust span::first-letter { color: var(--red); }
.hiw-v2-hero-visual { position: relative; min-width: 0; padding: 14px 4px 25px; }
.hiw-v2-window { position: relative; overflow: hidden; border: 1px solid #dce3ef; border-radius: 16px; background: #fff; box-shadow: 0 42px 95px rgba(16, 27, 52, .16), 0 4px 14px rgba(16, 27, 52, .05); transform: perspective(1200px) rotateY(-2deg); }
.hiw-v2-windowbar, .hiw-v2-gallery-topbar { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; background: #fff; border-bottom: 1px solid #e9edf4; }
.hiw-v2-windowbar > span, .hiw-v2-gallery-topbar > span { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #ff6058; }
.hiw-v2-windowbar > span:nth-child(2), .hiw-v2-gallery-topbar > span:nth-child(2) { background: #ffbd2e; }
.hiw-v2-windowbar > span:nth-child(3), .hiw-v2-gallery-topbar > span:nth-child(3) { background: #28c840; }
.hiw-v2-windowbar > b, .hiw-v2-gallery-topbar > b { margin-inline: auto; color: #66738a; font-size: 11px; font-weight: 700; }
.hiw-v2-window > img { width: 100%; height: auto; }
.hiw-v2-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 13px 17px; border: 1px solid rgba(224, 230, 240, .95); border-radius: 15px; background: rgba(255, 255, 255, .96); box-shadow: 0 16px 40px rgba(16, 27, 52, .12); }
.hiw-v2-float-top { top: -4px; right: -18px; }
.hiw-v2-float-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: var(--hiw-pink); color: var(--red); font-size: 21px; font-weight: 800; }
.hiw-v2-float strong, .hiw-v2-float small { display: block; }
.hiw-v2-float strong { color: var(--ink); font-size: 12px; }
.hiw-v2-float small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.hiw-v2-float-bottom { bottom: 0; left: -22px; border-radius: 99px; color: var(--ink); font-size: 11px; font-weight: 700; }
.hiw-v2-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #30b875; box-shadow: 0 0 0 4px #e9f8f0; }
.hiw-v2-section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .8fr); gap: 65px; align-items: end; margin-bottom: 65px; }
.hiw-v2-section-head h2 { max-width: 720px; font-size: clamp(34px, 4vw, 52px); line-height: 1.12; }
.hiw-v2-section-head > p { max-width: 490px; margin-bottom: 5px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.hiw-v2-workflow { padding-block: 108px; background: #fff; }
.hiw-v2-step-list { border-top: 1px solid var(--line); }
.hiw-v2-step { display: grid; grid-template-columns: 72px minmax(0, .88fr) minmax(0, 1.12fr); gap: 35px; align-items: center; padding: 66px 0; border-bottom: 1px solid var(--line); }
.hiw-v2-step-index { align-self: start; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hiw-v2-step-index span { display: grid; place-items: center; width: 49px; height: 49px; border: 1px solid #ffd0d5; border-radius: 50%; background: var(--hiw-pink); color: var(--red); font-family: var(--font-head); font-size: 13px; font-weight: 800; }
.hiw-v2-step-index i { color: #8c98ac; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .13em; writing-mode: vertical-rl; }
.hiw-v2-step-copy h3 { margin: 12px 0 17px; font-size: clamp(25px, 2.4vw, 35px); line-height: 1.2; }
.hiw-v2-step-copy p { margin-bottom: 15px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.hiw-v2-text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 7px; color: var(--ink); font-size: 13px; font-weight: 800; transition: color .25s, gap .25s; }
.hiw-v2-text-link span { color: var(--red); }
.hiw-v2-text-link:hover { gap: 14px; color: var(--red); }
.appicon-how{width: 300px; height: auto; padding: 20px 0; margin: 20px 0 10px; object-fit: cover; }
.hiw-v2-step-media { position: relative; overflow: hidden; align-self: center; margin: 0; border: 1px solid #dfe6f0; border-radius: 15px; background: linear-gradient(140deg, #f5f8fd, #fff); box-shadow: 0 25px 65px rgba(16, 27, 52, .09); }
.hiw-v2-step-media img { width: 100%; height: auto; transition: transform .7s var(--ease); }
.hiw-v2-step-media:hover img { transform: scale(1.025); }
.hiw-v2-step-media figcaption { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-top: 1px solid #e5eaf2; background: rgba(255, 255, 255, .95); color: var(--text); font-size: 11px; font-weight: 600; }
.hiw-v2-step-media figcaption span { color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.hiw-v2-step-media::before{  position: absolute;
  width: 100px;
  
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 13, 32, .70) 0%, rgba(7, 13, 32, .32) 55%, rgba(7, 13, 32, 0) 100%),
    url("assets/images/04-page-organization.png") center / cover no-repeat;}
@media(min-width:1001px) {
  .hiw-v2-step-reverse .hiw-v2-step-copy { grid-column: 2; grid-row: 1; }
  .hiw-v2-step-reverse .hiw-v2-step-media { grid-column: 3; grid-row: 1; }
}
.hiw-v2-gallery { position: relative; padding-block: 100px; color: #dce5f6; background: radial-gradient(ellipse at 88% 5%, rgba(239, 67, 82, .24), transparent 36%), radial-gradient(ellipse at 8% 100%, rgba(45, 104, 216, .28), transparent 38%), linear-gradient(130deg, #0c1630, #142649 70%, #111d39); }
.hiw-v2-gallery-grid { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); align-items: center; gap: 70px; }
.hiw-v2-gallery .section-kicker { color: #ff858f; }
.hiw-v2-gallery-copy h2 { color: #fff; font-size: clamp(34px, 3.8vw, 49px); line-height: 1.12; }
.hiw-v2-gallery-copy > p { margin-top: 20px; color: #b9c7df; font-size: 15px; line-height: 1.85; }
.hiw-v2-gallery-caption { min-height: 145px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
.hiw-v2-gallery-caption > span { color: #ff8b95; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.hiw-v2-gallery-caption h3 { margin: 9px 0; color: #fff; font-size: 22px; }
.hiw-v2-gallery-caption p { color: #b9c7df; font-size: 13px; line-height: 1.75; }
.hiw-v2-gallery-controls { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.hiw-v2-gallery-controls > button { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff; font-size: 21px; cursor: pointer; transition: background .2s, transform .2s; }
.hiw-v2-gallery-controls > button:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .15); }
.hiw-v2-gallery-dots { display: flex; justify-content: center; align-items: center; gap: 8px; }
.hiw-v2-gallery-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #64738f; cursor: pointer; transition: width .25s, background .25s; }
.hiw-v2-gallery-dots button[aria-current="true"] { width: 25px; background: #ff6674; }
.hiw-v2-gallery-stage { min-width: 0; }
.hiw-v2-gallery-window { overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; background: #fff; box-shadow: 0 35px 85px rgba(0, 0, 0, .32); }
.hiw-v2-gallery-topbar { min-height: 38px; border-color: #e3e9f2; }
.hiw-v2-gallery-slides { position: relative; display: grid; min-height: 240px; background: #fff; }
.hiw-v2-gallery-slide { display: none; align-self: start; margin: 0; animation: hiwGalleryIn .35s ease both; }
.hiw-v2-gallery-slide.active { display: block; }
.hiw-v2-gallery-slide img { display: block; width: 100%; height: auto; }
@keyframes hiwGalleryIn { from{opacity: .3; transform: translateX(10px)}to{opacity: 1; transform: translateX(0)}; }
.hiw-v2-gallery-foot { display: flex; justify-content: space-between; gap: 18px; padding: 18px 2px 0; color: #b9c7df; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.hiw-v2-gallery-foot b { color: #ff8791; }
.hiw-v2-usecases { padding-block: 108px; background: radial-gradient(ellipse at 0 15%, rgba(45, 104, 216, .045), transparent 35%), #fff; }
.hiw-v2-usecase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 19px; }
.hiw-v2-usecase { overflow: hidden; border: 1px solid #e1e7f0; border-radius: 15px; background: #fff; transition: transform .3s, box-shadow .3s, border-color .3s; }
.hiw-v2-usecase:hover { transform: translateY(-6px); border-color: #f0b9bf; box-shadow: 0 22px 50px rgba(16, 27, 52, .09); }
.hiw-v2-usecase-image { position: relative; overflow: hidden; aspect-ratio: 1.25; background: linear-gradient(135deg, #f1f5fc, #fff0f2); }
.hiw-v2-usecase-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.hiw-v2-usecase:hover .hiw-v2-usecase-image img { transform: scale(1.045); }
.hiw-v2-usecase-image > span { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; background: #fff; color: var(--red); font-size: 10px; font-weight: 800; }
.hiw-v2-usecase-copy { padding: 22px 19px 25px; }
.hiw-v2-usecase-copy > span { color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.hiw-v2-usecase-copy h3 { margin: 9px 0 12px; font-size: 20px; line-height: 1.3; }
.hiw-v2-usecase-copy p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.hiw-v2-mac { padding-block: 100px; background: radial-gradient(ellipse at 12% 50%, rgba(45, 104, 216, .1), transparent 36%), radial-gradient(ellipse at 45% 90%, rgba(239, 67, 82, .08), transparent 35%), #f7f9fc; }
.hiw-v2-mac-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 85px; align-items: center; }
.hiw-v2-mac-visual { position: relative; padding: 20px 10px 35px; }
.hiw-v2-mac-image { overflow: hidden; border: 1px solid #dce3ed; border-radius: 15px; background: #fff; box-shadow: 0 30px 75px rgba(16, 27, 52, .13); }
.hiw-v2-mac-image img { width: 100%; height: auto; }
.hiw-v2-mac-note { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid #e1e7f0; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(16, 27, 52, .1); color: var(--ink); font-size: 11px; font-weight: 700; }
.hiw-v2-mac-note b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--hiw-pink); color: var(--red); font-size: 10px; }
.hiw-v2-mac-note-one { top: -1px; left: 0; }
.hiw-v2-mac-note-two { right: 0; bottom: 10px; }
.hiw-v2-mac-copy h2 { margin-bottom: 22px; font-size: clamp(34px, 3.6vw, 47px); }
.hiw-v2-mac-copy > p { margin-bottom: 17px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.hiw-v2-benefit-list { margin: 28px 0; border-top: 1px solid var(--line); }
.hiw-v2-benefit-list > div { display: flex; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.hiw-v2-benefit-list > div > span { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #ffe9ec; color: var(--red); font-size: 13px; font-weight: 800; }
.hiw-v2-benefit-list h3 { margin-bottom: 3px; font-size: 15px; }
.hiw-v2-benefit-list p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.hiw-v2-guide { padding-block: 100px; background: #fff; }
.hiw-v2-guide-grid { display: grid; gap: 100px; align-items: start; }
.hiw-v2-guide-intro { position: sticky; top: 115px;margin: 0 auto; text-align: center;}
.hiw-v2-guide-intro h2 { margin-bottom: 20px; font-size: clamp(32px, 3.6vw, 45px); margin: 0 auto;  }
.hiw-v2-guide-content{display: flex; gap: 40px;}
.hiw-v2-guide-intro p, .hiw-v2-guide-content p { color: var(--muted); font-size: 15px; line-height: 1.9; }
.hiw-v2-guide-content article { padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line); text-align: center; }
.hiw-v2-guide-content article:last-child { margin-bottom: 0; border-bottom: 0; }
.hiw-v2-guide-content article > span { color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.hiw-v2-guide-content h3 { margin: 10px 0 12px; font-size: 24px; }
.hiw-v2-faq { padding-block: 100px; background: radial-gradient(ellipse at 8% 15%, rgba(45, 104, 216, .07), transparent 35%), #f7f9fc; }
.hiw-v2-faq-grid { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 75px; align-items: start; }
.hiw-v2-faq-intro { position: sticky; top: 115px; }
.hiw-v2-faq-intro h2 { margin-bottom: 17px; font-size: clamp(33px, 3.5vw, 45px); }
.hiw-v2-faq-intro > p { margin-bottom: 22px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.hiw-v2-faq-list { overflow: hidden; border: 1px solid #e0e6ef; border-radius: 17px; background: rgba(255, 255, 255, .9); box-shadow: 0 20px 55px rgba(16, 27, 52, .045); }
.hiw-v2-faq-list details { border-bottom: 1px solid #e6ebf2; }
.hiw-v2-faq-list details:last-child { border-bottom: 0; }
.hiw-v2-faq-list summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.55; cursor: pointer; list-style: none; }
.hiw-v2-faq-list summary::-webkit-details-marker { display: none; }
.hiw-v2-faq-list summary::after { content: "+"; display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #dfe5ee; border-radius: 50%; color: var(--red); font-size: 20px; font-weight: 400; transition: transform .25s, background .25s; }
.hiw-v2-faq-list details[open] summary { color: var(--red); }
.hiw-v2-faq-list details[open] summary::after { transform: rotate(45deg); background: var(--hiw-pink); border-color: #ffd0d5; }
.hiw-v2-faq-list details > p { padding: 0 60px 23px 24px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.hiw-v2-faq-list details > .hiw-v2-text-link { margin: 0 24px 22px; }
.hiw-v2-final { padding: 0 0 100px; background: #f7f9fc; }
.hiw-v2-final-panel { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 28px; align-items: center; overflow: hidden; padding: 42px; border: 1px solid #f0dce0; border-radius: 23px; background: radial-gradient(ellipse at 0 100%, rgba(45, 104, 216, .13), transparent 42%), radial-gradient(ellipse at 100% 0, rgba(239, 67, 82, .15), transparent 42%), linear-gradient(125deg, #fff, #fff4f6); }
.hiw-v2-final-icon img { width: 68px; height: 68px; object-fit: contain; border-radius: 17px; box-shadow: 0 12px 26px rgba(16, 27, 52, .1); }
.hiw-v2-final-copy .section-kicker { margin-bottom: 10px; font-size: 10px; }
.hiw-v2-final-copy h2 { max-width: 630px; margin-bottom: 9px; font-size: clamp(26px, 3vw, 38px); }
.hiw-v2-final-copy p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.hiw-v2-final-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
@media(max-width:1050px) {
  .hiw-v2-hero-grid { gap: 42px; }
  .hiw-v2-section-head { gap: 35px; }
  .hiw-v2-step { grid-template-columns: 54px minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; }
  .hiw-v2-gallery-grid, .hiw-v2-mac-grid, .hiw-v2-guide-grid, .hiw-v2-faq-grid { gap: 42px; }
  .hiw-v2-usecase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hiw-v2-final-panel { grid-template-columns: 60px minmax(0, 1fr); }
  .hiw-v2-final-icon img { width: 58px; height: 58px; }
  .hiw-v2-final-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media(max-width:760px) {
  .hiw-page .container { width: calc(100% - 36px); }
  .hiw-v2-hero { padding: 60px 0 65px; }
  .hiw-v2-hero-grid, .hiw-v2-section-head, .hiw-v2-gallery-grid, .hiw-v2-mac-grid, .hiw-v2-guide-grid, .hiw-v2-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .hiw-v2-hero h1 { font-size: clamp(39px, 10vw, 56px); }
  .hiw-v2-hero-copy > p { font-size: 16px; line-height: 1.8; }
  .hiw-v2-trust { gap: 9px 14px; font-size: 10px; }
  .hiw-v2-float-top { right: -5px; top: -13px; }
  .hiw-v2-float-bottom { left: 0; bottom: -3px; }
  .hiw-v2-workflow, .hiw-v2-usecases, .hiw-v2-guide { padding-block: 70px; }
  .hiw-v2-section-head { margin-bottom: 35px; }
  .hiw-v2-section-head h2, .hiw-v2-gallery-copy h2, .hiw-v2-mac-copy h2, .hiw-v2-guide-intro h2, .hiw-v2-faq-intro h2 { font-size: 34px; }
  .hiw-v2-step { grid-template-columns: 43px minmax(0, 1fr); gap: 15px; padding: 38px 0; }
  .hiw-v2-step-index { grid-column: 1; grid-row: 1; }
  .hiw-v2-step-index span { width: 39px; height: 39px; font-size: 11px; }
  .hiw-v2-step-index i { font-size: 8px; }
  .hiw-v2-step-copy { grid-column: 2; grid-row: 1; }
  .hiw-v2-step-copy h3 { margin-top: 5px; font-size: 25px; }
  .hiw-v2-step-copy p { font-size: 14px; }
  .hiw-v2-step-media { grid-column: 2; grid-row: 2; margin-top: 12px; border-radius: 11px; }
  .hiw-v2-gallery { padding-block: 72px; }
  .hiw-v2-gallery-caption { min-height: 0; }
  .hiw-v2-gallery-stage { margin-top: 8px; }
  .hiw-v2-gallery-foot { font-size: 8px; }
  .hiw-v2-usecase-grid { gap: 12px; }
  .hiw-v2-usecase-copy { padding: 16px 13px 19px; }
  .hiw-v2-usecase-copy h3 { font-size: 17px; }
  .hiw-v2-usecase-copy p { font-size: 12px; }
  .hiw-v2-mac { padding-block: 70px; }
  .hiw-v2-guide-intro, .hiw-v2-faq-intro { position: static; }
  .hiw-v2-faq { padding-block: 70px; }
  .hiw-v2-faq-list summary { padding: 19px 15px; font-size: 13px; }
  .hiw-v2-faq-list details > p { padding: 0 17px 20px; }
  .hiw-v2-faq-list details > .hiw-v2-text-link { margin-left: 17px; }
  .hiw-v2-final { padding-bottom: 65px; }
  .hiw-v2-final-panel { grid-template-columns: 1fr; gap: 20px; padding: 28px 23px; border-radius: 18px; }
  .hiw-v2-final-actions { grid-column: auto; align-items: flex-start; }
  .hiw-v2-final-actions .btn { width: 100%; }
}
@media(max-width:420px) {
  .hiw-v2-usecase-grid { grid-template-columns: 1fr; }
  .hiw-v2-usecase-image { aspect-ratio: 1.6; }
  .hiw-v2-gallery-controls { gap: 12px; }
  .hiw-v2-gallery-controls > button { width: 38px; height: 38px; }
  .hiw-v2-mac-note { padding: 9px 10px; font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) {
  .hiw-page *, .hiw-page *::before, .hiw-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.hiw-page .hiw-v2-gallery-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: 0; position: relative; isolation: isolate; }
.hiw-page .hiw-v2-gallery-copy { position: relative; z-index: 1; min-width: 0; padding: 12px 30px 12px 0; }
.hiw-page .hiw-v2-gallery-copy h2 { max-width: 450px; }
.hiw-page .hiw-v2-gallery-copy > p { max-width: 440px; }
.hiw-page .hiw-v2-gallery-caption { max-width: 435px; }
.hiw-page .hiw-v2-gallery-controls { position: relative; z-index: 3; margin-top: 18px; }
.hiw-page .hiw-v2-gallery-stage { position: relative; z-index: 2; min-width: 0; margin-left: -85px; width: calc(100% + 85px); }
.hiw-page .hiw-v2-gallery-window { position: relative; overflow: hidden; width: 100%; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 17px; background: #fff; box-shadow: 0 35px 85px rgba(0, 0, 0, 0.32); }
.hiw-page .hiw-v2-gallery-slides { display: grid; min-width: 0; min-height: 0; background: #fff; }
.hiw-page .hiw-v2-gallery-slide { display: none; grid-area: 1 / 1; margin: 0; }
.hiw-page .hiw-v2-gallery-slide.active { display: block; animation: hiwGalleryIn 0.4s ease both; }
.hiw-page .hiw-v2-gallery-slide img { display: block; width: 100%; height: auto; }
@media (max-width:1000px) {
  .hiw-page .hiw-v2-gallery-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 24px; }
  .hiw-page .hiw-v2-gallery-stage { margin-left: -25px; width: calc(100% + 25px); }
  .hiw-page .hiw-v2-gallery-copy { padding-right: 8px; }
}
@media (max-width:700px) {
  .hiw-page .hiw-v2-gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hiw-page .hiw-v2-gallery-copy { padding: 0; }
  .hiw-page .hiw-v2-gallery-stage { margin-left: 0; width: 100%; }
}
/* FULL-WIDTH GALLERY FIX */ .hiw-page { overflow: visible; }
.hiw-page .hiw-v2-gallery { position: relative; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); padding: 100px 0; box-sizing: border-box; left: auto; transform: none; background: radial-gradient(ellipse at 88% 5%,rgba(239,67,82,.24),transparent 36%),radial-gradient(ellipse at 8% 100%,rgba(45,104,216,.28),transparent 38%),linear-gradient(130deg,#0c1630,#142649 70%,#111d39); }
.hiw-page .hiw-v2-gallery-grid { display: grid; width: min(1280px,calc(100% - 64px)); margin: 0 auto; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; gap: 40px; position: relative; isolation: isolate; }
.hiw-page .hiw-v2-gallery-copy { position: relative; z-index: 2; min-width: 0; padding: 12px 0; }
.hiw-page .hiw-v2-gallery-copy h2 { max-width: 450px; }
.hiw-page .hiw-v2-gallery-copy>p,.hiw-page .hiw-v2-gallery-caption { max-width: 440px; }
.hiw-page .hiw-v2-gallery-stage { position: relative; z-index: 3; min-width: 0; width: calc(100% + 35px); margin-left: -35px; }
.hiw-page .hiw-v2-gallery-window { width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 17px; background: #fff; box-shadow: 0 35px 85px rgba(0,0,0,.32); }
.hiw-page .hiw-v2-gallery-slides { display: grid; min-width: 0; min-height: 0; background: #fff; }
.hiw-page .hiw-v2-gallery-slide { display: none; grid-area: 1/1; margin: 0; }
.hiw-page .hiw-v2-gallery-slide.active { display: block; animation: hiwGalleryIn .4s ease both; }
.hiw-page .hiw-v2-gallery-slide img { display: block; width: 100%; height: auto; }
@media(max-width:1000px) {
  .hiw-page .hiw-v2-gallery { padding: 76px 0; }
  .hiw-page .hiw-v2-gallery-grid { width: calc(100% - 48px); grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 24px; }
  .hiw-page .hiw-v2-gallery-stage { width: calc(100% + 18px); margin-left: -18px; }
  .hiw-page .hiw-v2-gallery-copy { padding-right: 0; }
}
@media(max-width:700px) {
  .hiw-page .hiw-v2-gallery { padding: 64px 0; }
  .hiw-page .hiw-v2-gallery-grid { width: calc(100% - 36px); grid-template-columns: minmax(0,1fr); gap: 30px; }
  .hiw-page .hiw-v2-gallery-copy { padding: 0; }
  .hiw-page .hiw-v2-gallery-stage { width: 100%; margin: 0; }
  .hiw-page .hiw-v2-gallery-caption { min-height: 0; }
  .hiw-page .hiw-v2-gallery-controls { flex-wrap: wrap; }
}




/* ---------------------------------------------------------------------------------------------------------------- */


/* =========================================
   HOW IT WORKS — INFINITE USE-CASE CAROUSEL
   ========================================= */

.hiw-v2-usecases {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 8% 10%, rgba(37, 99, 235, .045), transparent 42%),
    linear-gradient(180deg, #fff 0%, #f8faff 100%);
}

.hiw-v2-marquee {
  --card-width: 310px;
  --card-gap: 22px;

  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  overflow: hidden;
  padding: 35px 0 55px;
}

.hiw-v2-marquee-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  gap: 0;
  animation: hiwWorkflowScroll 36s linear infinite;
  will-change: transform;
}

.hiw-v2-marquee:hover .hiw-v2-marquee-track {
  animation-play-state: paused;
}

.hiw-v2-marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: var(--card-gap);
  padding-right: var(--card-gap);
}

/* Card */
.hiw-v2-marquee .hiw-v2-human-card {
  flex: 0 0 var(--card-width);
  width: var(--card-width);
  height: 420px;
  min-width: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #e1e7f0;
  border-radius: 22px;
  background: #172238;
  box-sizing: border-box;

  transform: scale(.96);
  opacity: .82;

  transition:
    transform .45s ease,
    opacity .45s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

/* Image must sit ABOVE the card background */
.hiw-v2-marquee .hiw-v2-human-card > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .7s ease;
}

/* Readable dark gradient over the image */
.hiw-v2-marquee .hiw-v2-human-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 20, 38, .02) 15%,
    rgba(10, 20, 38, .08) 35%,
    rgba(10, 20, 38, .65) 62%,
    rgba(10, 20, 38, .96) 100%
  );
  pointer-events: none;
}

/* Number badge */
.hiw-v2-marquee .hiw-v2-human-number {
  position: absolute;
  top: 17px;
  left: 17px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: #fff;
  color: #f04454;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 5px 18px rgba(12, 24, 45, .12);
}

/* Content anchored to the bottom */
.hiw-v2-marquee .hiw-v2-human-content {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: 26px 23px 25px;
  color: #fff;
}

.hiw-v2-marquee .hiw-v2-human-content > span {
  display: block;
  margin-bottom: 10px;
  color: #ffb5bd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.5;
}

.hiw-v2-marquee .hiw-v2-human-content h3 {
  margin: 0;
  color: #fff;
  font-family: var(--font-head);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
}

/* Details stay at the bottom and reveal smoothly */
.hiw-v2-marquee .hiw-v2-human-details {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(12px);
  transition:
    max-height .45s ease,
    opacity .3s ease,
    transform .4s ease;
}

.hiw-v2-marquee .hiw-v2-human-details p {
  max-width: 100%;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.hiw-v2-marquee .hiw-v2-human-details a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

/* Active center card */
.hiw-v2-marquee .hiw-v2-human-card.is-active {
  opacity: 1;
  transform: translateY(-9px) scale(1);
  border-color: #ff6473;
  box-shadow: 0 24px 55px rgba(16, 27, 52, .2);
  z-index: 4;
}

.hiw-v2-marquee .hiw-v2-human-card.is-active > img,
.hiw-v2-marquee .hiw-v2-human-card:hover > img {
  transform: scale(1.07);
}

.hiw-v2-marquee .hiw-v2-human-card.is-active .hiw-v2-human-details,
.hiw-v2-marquee .hiw-v2-human-card:hover .hiw-v2-human-details,
.hiw-v2-marquee .hiw-v2-human-card:focus-within .hiw-v2-human-details {
  max-height: 150px;
  opacity: 1;
  transform: translateY(0);
}

/* Seamless loop: the second group must duplicate the first */
@keyframes hiwWorkflowScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 1000px) {
  .hiw-v2-marquee {
    --card-width: 280px;
    --card-gap: 17px;
  }
}

@media (max-width: 600px) {
  .hiw-v2-marquee {
    --card-width: 82vw;
    --card-gap: 14px;
  }

  .hiw-v2-marquee .hiw-v2-human-card {
    height: 400px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hiw-v2-marquee-track {
    animation: none;
    transform: none;
  }

  .hiw-v2-marquee-group[aria-hidden="true"] {
    display: none;
  }

  .hiw-v2-marquee .hiw-v2-human-card {
    opacity: 1;
    transform: none;
  }

  .hiw-v2-marquee .hiw-v2-human-details {
    max-height: 150px;
    opacity: 1;
    transform: none;
  }
}



/* =====================================================================
   Smart PDF Pilot — How It Works v3
   Add this at the very END of your page CSS (after the marquee block),
   or save as css/hiw-v3.css and link it after css/site.css.
   Covers: 1) INSIDE gallery  2) merged Mac + Guide section  3) FAQ border
   ===================================================================== */


/* ---------- 1. INSIDE SMART PDF PILOT — gallery ---------------------- */

.hiw-v3-gallery {
  position: relative;
  padding: 120px 0 90px;
  color: #dce5f6;
  background:
    radial-gradient(ellipse at 88% 5%, rgba(239, 67, 82, .24), transparent 36%),
    radial-gradient(ellipse at 8% 100%, rgba(45, 104, 216, .28), transparent 38%),
    linear-gradient(130deg, #0c1630, #142649 70%, #111d39);
}
.hiw-v3-gallery .section-kicker { color: #ff858f; }

.hiw-v3-gallery-inner {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 56px;
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
}

.hiw-v3-gallery-copy { min-width: 0; }
.hiw-v3-gallery-copy h2 {
  max-width: 450px;
  color: #fff;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
}
.hiw-v3-gallery-copy > p {
  max-width: 440px;
  margin-top: 18px;
  color: #b9c7df;
  font-size: 15px;
  line-height: 1.8;
}

.hiw-v3-caption {
  max-width: 440px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  animation: hiwCaptionIn .5s ease both;
}
.hiw-v3-caption > span {
  color: #ff8b95;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.hiw-v3-caption h3 { margin: 9px 0 8px; color: #fff; font-size: 22px; }
.hiw-v3-caption p  { color: #b9c7df; font-size: 13.5px; line-height: 1.75; min-height: 48px; }
@keyframes hiwCaptionIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* stage = nav pill + window */
.hiw-v3-stage { position: relative; min-width: 0; }

.hiw-v3-window {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 35px 85px rgba(0, 0, 0, .35);
}
.hiw-v3-topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  background: #fff;
  border-bottom: 1px solid #e9edf4;
}
.hiw-v3-topbar > span { width: 10px; height: 10px; border-radius: 50%; background: #ff6058; }
.hiw-v3-topbar > span:nth-child(2) { background: #ffbd2e; }
.hiw-v3-topbar > span:nth-child(3) { background: #28c840; }
.hiw-v3-topbar > b { margin-inline: auto; color: #66738a; font-size: 11px; font-weight: 700; }

/* autoplay progress line */
.hiw-v3-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #ef4352, #ff8791);
  transform: scaleX(0);
  transform-origin: left;
}
.hiw-v3-progress.run { animation: hiwProgress 4.5s linear forwards; }
@keyframes hiwProgress { to { transform: scaleX(1); } }

/* viewport + flipping cards */
.hiw-v3-viewport {
  position: relative;
  aspect-ratio: 1.68;
  overflow: hidden;
  /* background: #fff; */
  perspective: 1600px;
}
.hiw-v3-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  /* background: #fff; */
  --from: -90deg;
  --to: 90deg;
}
.hiw-v3-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}
.hiw-v3-slide.is-active  { opacity: 1; visibility: visible; z-index: 1; }
.hiw-v3-slide.is-leaving { opacity: 1; visibility: visible; z-index: 2; animation: hiwFlipOut .4s ease-in both; }
.hiw-v3-slide.flip-in    { animation: hiwFlipIn .8s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes hiwFlipOut {
  from { transform: rotateY(0); filter: brightness(1); }
  to   { transform: rotateY(var(--to)); filter: brightness(.55); }
}
@keyframes hiwFlipIn {
  0%, 45% { transform: rotateY(var(--from)); filter: brightness(.55); }
  100%    { transform: rotateY(0); filter: brightness(1); }
}

.hiw-v3-foot {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 2px 0;
  color: #b9c7df;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
.hiw-v3-foot a { color: inherit; }
.hiw-v3-foot b { color: #ff8791; }

@media (max-width: 1000px) {
  .hiw-v3-gallery-inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; width: calc(100% - 48px); }
}
@media (max-width: 760px) {
  .hiw-v3-gallery { padding: 100px 0 64px; }
  .hiw-v3-gallery-inner { grid-template-columns: minmax(0, 1fr); gap: 56px; width: calc(100% - 36px); }
  .hiw-v3-nav { left: 14px; gap: 12px; padding: 12px 16px 20px; }
  .hiw-v3-nav > button { width: 38px; height: 38px; }
  .hiw-v3-foot { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-v3-slide.is-leaving, .hiw-v3-slide.flip-in, .hiw-v3-caption, .hiw-v3-progress.run { animation: none !important; }
}


/* ---------- 2. MERGED: Mac experience + practical guide -------------- */

.hiw-v3-guide {
  padding: 100px 0;
  background:
    radial-gradient(ellipse at 8% 15%, rgba(45, 104, 216, .09), transparent 40%),
    radial-gradient(ellipse at 94% 92%, rgba(239, 67, 82, .09), transparent 40%),
    #f7f9fc;
}
.hiw-v3-panel {
  overflow: hidden;
  border: 1px solid #e3e8f1;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(16, 27, 52, .07);
}

.hiw-v3-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  padding: 54px 54px 48px;
}
.hiw-v3-copy h2 { margin: 12px 0 16px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; }
.hiw-v3-copy > p { max-width: 520px; margin-bottom: 26px; color: var(--muted); font-size: 15px; line-height: 1.85; }

.hiw-v3-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hiw-v3-points li {
  display: flex;
  gap: 15px;
  padding: 17px 19px;
  border: 1px solid #f0e1e4;
  border-left: 3px solid var(--red);
  border-radius: 14px;
  background: linear-gradient(120deg, #fff 40%, #fff3f5);
  transition: transform .25s, box-shadow .25s;
}
.hiw-v3-points li:nth-child(2) { border-left-color: #8d5cf6; background: linear-gradient(120deg, #fff 40%, #f6f2ff); border-color: #e8e0f8; }
.hiw-v3-points li:nth-child(3) { border-left-color: #2d68d8; background: linear-gradient(120deg, #fff 40%, #eef4ff); border-color: #dfe8f8; }
.hiw-v3-points li:hover { transform: translateX(4px); box-shadow: 0 14px 30px rgba(16, 27, 52, .07); }
.hiw-v3-points li > span {
  display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px;
  border-radius: 50%; background: #fff; color: var(--red); font-size: 13px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(16, 27, 52, .08);
}
.hiw-v3-points h3 { margin: 0 0 3px; font-size: 15px; }
.hiw-v3-points p  { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }

.hiw-v3-bottom {
  padding: 46px 54px 54px;
  border-top: 1px solid #e9edf4;
  background: linear-gradient(180deg, #f9fbff, #fff);
}
.hiw-v3-bottom-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.hiw-v3-bottom-head h3 { margin: 10px 0 12px; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; }
.hiw-v3-bottom-head p  { color: var(--muted); font-size: 14.5px; line-height: 1.8; }

.hiw-v3-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hiw-v3-timeline::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 17%;
  right: 17%;
  height: 2px;
  background: linear-gradient(90deg, #ef4352, #8d5cf6, #2d68d8);
  opacity: .35;
}
.hiw-v3-timeline li { position: relative; text-align: center; }
.hiw-v3-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  border: 2px solid #ffd0d5;
  border-radius: 50%;
  background: #fff;
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
}
.hiw-v3-timeline li:nth-child(2) .hiw-v3-node { border-color: #d9c8fb; color: #8d5cf6; }
.hiw-v3-timeline li:nth-child(3) .hiw-v3-node { border-color: #c5d8fa; color: #2d68d8; }
.hiw-v3-timeline small { display: block; color: #8c98ac; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.hiw-v3-timeline h4 { margin: 8px 0 10px; font-size: 20px; }
.hiw-v3-timeline p { margin: 0 auto; max-width: 340px; color: var(--muted); font-size: 13.5px; line-height: 1.8; }

@media (max-width: 900px) {
  .hiw-v3-top { grid-template-columns: 1fr; gap: 30px; padding: 38px 28px; }
  .hiw-v3-bottom { padding: 38px 28px 44px; }
  .hiw-v3-timeline { grid-template-columns: 1fr; gap: 30px; }
  .hiw-v3-timeline::before { display: none; }
}
@media (max-width: 760px) { .hiw-v3-guide { padding: 70px 0; } }


/* ---------- 3. FAQ — gradient border + colour ------------------------ */

.hiw-page .hiw-v2-faq-list {
  border: 2px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #ef4352 0%, #ff9aa4 30%, #8d5cf6 65%, #2d68d8 100%) border-box;
  box-shadow: 0 24px 60px rgba(239, 67, 82, .1), 0 10px 30px rgba(45, 104, 216, .08);
}
.hiw-page .hiw-v2-faq-list details {
  position: relative;
  border-bottom: 1px solid #eef0f6;
  transition: background .3s;
}
.hiw-page .hiw-v2-faq-list details:hover { background: linear-gradient(120deg, #fff 55%, #fff6f7); }
.hiw-page .hiw-v2-faq-list details[open] { background: linear-gradient(120deg, #fff4f6 0%, #f4f0ff 55%, #eef4ff 100%); }
.hiw-page .hiw-v2-faq-list details[open]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ef4352, #8d5cf6, #2d68d8);
}
.hiw-page .hiw-v2-faq-list summary::after {
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #ef4352, #2d68d8) border-box;
}
.hiw-page .hiw-v2-faq-list details[open] summary::after {
  background:
    linear-gradient(135deg, #ef4352, #ff7a86) padding-box,
    linear-gradient(135deg, #ef4352, #2d68d8) border-box;
  color: #fff;
}


/* ---------- 1b. v3.1 — floating pill nav (replaces the navy tab) ----- */

.hiw-v3-gallery { padding: 96px 0 90px; }

/* title sits left so the pill can own the right side of the title bar */
.hiw-v3-topbar > b { margin: 0 auto 0 12px; }
.hiw-v3-progress { display: none; }

/* pill straddling the top edge of the window */
.hiw-v3-nav {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 26px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 8px;
  border: 1.5px solid transparent;
  border-radius: 99px;
  background:
    linear-gradient(#0e1b3c, #0e1b3c) padding-box,
    linear-gradient(120deg, #ef4352, #8d5cf6 55%, #2d68d8) border-box;
  box-shadow: 0 16px 38px rgba(4, 10, 28, .45), 0 0 0 7px rgba(255, 255, 255, .05);
}
.hiw-v3-nav > button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.hiw-v3-nav > button:hover { background: rgba(255, 255, 255, .18); }
.hiw-v3-nav > button:active { transform: scale(.92); }
.hiw-v3-nav > #hiwGalleryNext {
  background: linear-gradient(135deg, #ef4352, #ff7a86);
  box-shadow: 0 6px 16px rgba(239, 67, 82, .45);
}
.hiw-v3-nav > #hiwGalleryNext:hover { background: linear-gradient(135deg, #ff5463, #ff8e98); }
.hiw-v3-nav > button:focus-visible,
.hiw-v3-dots button:focus-visible { outline: 2px solid #ff8791; outline-offset: 2px; }

/* story-style segments: done = soft, current = fills while autoplay runs */
.hiw-v3-dots { display: flex; align-items: center; gap: 4px; }
.hiw-v3-dots button {
  position: relative;
  width: 34px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hiw-v3-dots button::before,
.hiw-v3-dots button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 4px;
}
.hiw-v3-dots button::before { background: rgba(255, 255, 255, .18); transition: background .2s; }
.hiw-v3-dots button:hover::before { background: rgba(255, 255, 255, .34); }
.hiw-v3-dots button::after { background: #ff6674; transform: scaleX(0); transform-origin: left; }
.hiw-v3-dots button.is-done::after { transform: scaleX(1); background: rgba(255, 102, 116, .55); }
.hiw-v3-dots button[aria-current="true"]::after { transform: scaleX(1); background: #ff6674; }
.hiw-v3-gallery.is-running .hiw-v3-dots button[aria-current="true"]::after {
  animation: hiwSeg var(--hiw-delay, 4500ms) linear both;
}
@keyframes hiwSeg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 760px) {
  .hiw-v3-gallery { padding: 76px 0 64px; }
  .hiw-v3-topbar > b { display: none; }
  .hiw-v3-nav { left: auto; right: 12px; gap: 8px; padding: 6px; }
  .hiw-v3-nav > button { width: 34px; height: 34px; }
  .hiw-v3-dots button { width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-v3-gallery.is-running .hiw-v3-dots button[aria-current="true"]::after { animation: none; }
}






/* =====================================================================
   Smart PDF Pilot — Pricing page v3  (Free + Pro, Mac desktop app)
   Load AFTER css/site.css:
   <link rel="stylesheet" href="../css/site.css">
   <link rel="stylesheet" href="../css/pricing-v3.css">
   All classes are prefixed .pr- so nothing else on the site is affected.
   ===================================================================== */

.pr-page { overflow: clip; background: #fff; }
.pr-page .container { width: min(1200px, calc(100% - 64px)); }
/* .pr-page section { padding: 0; } */

/* ---------- HERO ------------------------------------------------------ */

.pr-hero {
  padding: 84px 0 96px;
  background:
    radial-gradient(ellipse at 92% 12%, rgba(239, 67, 82, .12), transparent 42%),
    radial-gradient(ellipse at 4% 92%, rgba(45, 104, 216, .10), transparent 40%),
    linear-gradient(180deg, #fbfcff, #fff);
}
.pr-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 64px;
}
.pr-crumb { margin-bottom: 26px; color: var(--muted); font-size: 14px; }
.pr-crumb a { color: var(--red); font-weight: 700; }

.pr-hero h1 { max-width: 640px; font-size: clamp(40px, 4.8vw, 66px); line-height: 1.04; letter-spacing: -.05em; }
.pr-hero h1 span { display: block; color: var(--red); }
.pr-hero-copy > p { max-width: 540px; margin: 24px 0 32px; color: var(--muted); font-size: 19px; line-height: 1.75; }

.pr-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.pr-trust span::first-letter { color: var(--red); }

.pr-hero-visual { position: relative; min-width: 0; padding: 18px 6px 28px; }
.pr-window {
  overflow: hidden;
  border: 1px solid #dce3ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 42px 95px rgba(16, 27, 52, .16), 0 4px 14px rgba(16, 27, 52, .05);
  transform: perspective(1200px) rotateY(-2deg);
}
.pr-window-bar { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border-bottom: 1px solid #e9edf4; }
.pr-window-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #ff6058; }
.pr-window-bar > i:nth-child(2) { background: #ffbd2e; }
.pr-window-bar > i:nth-child(3) { background: #28c840; }
.pr-window-bar > b { margin-inline: auto; color: #66738a; font-size: 11px; font-weight: 700; }
.pr-window img { display: block; width: 100%; height: auto; }

.pr-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 17px;
  border: 1px solid rgba(224, 230, 240, .95);
  border-radius: 15px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 40px rgba(16, 27, 52, .13);
}
.pr-float-top { top: 0; right: -14px; }
.pr-float-bottom { bottom: 4px; left: -18px; border-radius: 99px; color: var(--ink); font-size: 12px; font-weight: 700; }
.pr-float-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff0f2; color: var(--red); font-size: 20px; font-weight: 800; }
.pr-float strong, .pr-float small { display: block; }
.pr-float strong { color: var(--ink); font-size: 12px; }
.pr-float small { margin-top: 1px; color: var(--muted); font-size: 10.5px; }
.pr-live { width: 8px; height: 8px; border-radius: 50%; background: #30b875; box-shadow: 0 0 0 4px #e9f8f0; }

/* ---------- section heads -------------------------------------------- */

.pr-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.pr-head h2 { margin: 6px 0 16px; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.1; }
.pr-head p { margin: 0 auto; color: var(--muted); font-size: 18px; line-height: 1.75; }

/* ---------- PLANS: Free + Pro --------------------------------------- */

.pr-plans { padding: 100px 0 110px !important; background: #fff; }
.pr-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 1020px;
  margin: 0 auto;
}
.pr-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 42px 40px 38px;
  border-radius: 26px;
}
.pr-plan-tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 5px 12px;
  border-radius: 99px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.pr-plan h3 { font-size: 30px; }
.pr-plan-lead { margin: 8px 0 26px; font-size: 16px; line-height: 1.65; }

.pr-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-family: var(--font-head); font-size: 64px; font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.pr-price small { font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.pr-billing { min-height: 24px; margin-bottom: 26px; font-size: 13.5px; }

.pr-plan .btn { width: 100%; }

.pr-list { flex: 1; margin: 30px 0 0; padding: 0; list-style: none; }
.pr-list li { position: relative; padding: 13px 0 13px 36px; font-size: 15.5px; line-height: 1.55; }
.pr-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 13px;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}
.pr-list .pr-list-note { padding-left: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.pr-list .pr-list-note::before { display: none; }

/* Free = light, gradient hairline border */
.pr-plan-free {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #ffd0d5, #d9c8fb 55%, #c5d8fa) border-box;
  box-shadow: 0 24px 60px rgba(16, 27, 52, .06);
}
.pr-plan-free .pr-plan-tag { background: #eef4ff; color: #2d68d8; }
.pr-plan-free .pr-plan-lead, .pr-plan-free .pr-billing { color: var(--muted); }
.pr-plan-free .pr-price { color: var(--ink); }
.pr-plan-free .pr-price small { color: var(--muted); }
.pr-plan-free .pr-list li { border-top: 1px solid #eef1f6; color: var(--ink); }
.pr-plan-free .pr-list li::before { background: #fff0f2; color: var(--red); }

/* Pro = dark, glowing */
.pr-plan-pro {
  color: #c9d4ea;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(ellipse at 100% 0, rgba(239, 67, 82, .38), transparent 52%),
    radial-gradient(ellipse at 0 100%, rgba(45, 104, 216, .36), transparent 50%),
    linear-gradient(145deg, #0d1730, #172950);
  box-shadow: 0 34px 80px rgba(13, 23, 48, .32);
}
.pr-plan-pro h3, .pr-plan-pro .pr-price { color: #fff; }
.pr-plan-pro .pr-price small { color: #aebbd6; }
.pr-plan-pro .pr-plan-tag { background: linear-gradient(135deg, #ef4352, #ff7a86); color: #fff; }
.pr-plan-pro .pr-billing { color: #aebbd6; }
.pr-plan-pro .pr-list li { border-top: 1px solid rgba(255, 255, 255, .12); color: #e6ecf8; }
.pr-plan-pro .pr-list li::before { background: rgba(255, 255, 255, .14); color: #ff9aa4; }
.pr-plan-pro .pr-list-note { color: #8fa0c2; }
.pr-plan-free .pr-list-note { color: #8c98ac; }

.pr-foot-note { max-width: 1020px; margin: 28px auto 0; text-align: center; color: var(--muted); font-size: 13.5px; }
.pr-foot-note a { color: var(--red); font-weight: 700; }

/* ---------- COMPARE -------------------------------------------------- */

.pr-compare { padding: 100px 0 !important; background: #f7f9fc; }
.pr-table-wrap {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
  border: 2px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #ef4352, #8d5cf6 60%, #2d68d8) border-box;
  box-shadow: 0 24px 60px rgba(239, 67, 82, .08), 0 10px 30px rgba(45, 104, 216, .07);
}
.pr-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; }
.pr-table th, .pr-table td { padding: 20px 26px; border-bottom: 1px solid #eef1f6; text-align: center; letter-spacing: 0; text-transform: none; }
.pr-table th:first-child, .pr-table td:first-child { text-align: left; }
.pr-table thead th { padding-top: 26px; padding-bottom: 22px; font-family: var(--font-head); font-size: 18px; color: var(--ink); }
.pr-table thead th small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--muted); }
.pr-table tbody th { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ink); }
.pr-table th:nth-child(3), .pr-table td:nth-child(3) { background: linear-gradient(180deg, #fff6f7, #fff9fa); }
.pr-table thead th:nth-child(3) { color: var(--red); }
.pr-table tbody tr:last-child th, .pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-yes { color: var(--red); font-size: 18px; font-weight: 800; }
.pr-no { color: #b3bdd0; }
.pr-val { color: var(--ink); font-size: 14.5px; font-weight: 700; }

/* ---------- HOW BUYING WORKS ---------------------------------------- */

.pr-how { padding: 100px 0 !important; background: #fff; }
.pr-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; }
.pr-steps::before {
  content: "";
  position: absolute;
  top: 25px; left: 17%; right: 17%;
  height: 2px;
  background: linear-gradient(90deg, #ef4352, #8d5cf6, #2d68d8);
  opacity: .35;
}
.pr-steps li { position: relative; text-align: center; }
.pr-node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto 20px;
  border: 2px solid #ffd0d5;
  border-radius: 50%;
  background: #fff;
  color: var(--red);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
}
.pr-steps li:nth-child(2) .pr-node { border-color: #d9c8fb; color: #8d5cf6; }
.pr-steps li:nth-child(3) .pr-node { border-color: #c5d8fa; color: #2d68d8; }
.pr-steps h3 { margin-bottom: 10px; font-size: 22px; }
.pr-steps p { margin: 0 auto; max-width: 320px; color: var(--muted); font-size: 15px; line-height: 1.8; }

/* ---------- FAQ (matches the How It Works FAQ) ---------------------- */

.pr-faq {
  padding: 100px 0 !important;
  background: radial-gradient(ellipse at 8% 15%, rgba(45, 104, 216, .07), transparent 35%), #f7f9fc;
}
.pr-faq-grid { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 70px; align-items: start; }
.pr-faq-intro { position: sticky; top: 115px; }
.pr-faq-intro h2 { margin: 6px 0 16px; font-size: clamp(32px, 3.5vw, 45px); line-height: 1.1; }
.pr-faq-intro > p { margin-bottom: 24px; color: var(--muted); font-size: 16px; line-height: 1.8; }

.pr-faq-list {
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #ef4352 0%, #ff9aa4 30%, #8d5cf6 65%, #2d68d8 100%) border-box;
  box-shadow: 0 24px 60px rgba(239, 67, 82, .1), 0 10px 30px rgba(45, 104, 216, .08);
}
.pr-faq-list details { position: relative; border-bottom: 1px solid #eef0f6; transition: background .3s; }
.pr-faq-list details:last-child { border-bottom: 0; }
.pr-faq-list details:hover { background: linear-gradient(120deg, #fff 55%, #fff6f7); }
.pr-faq-list details[open] { background: linear-gradient(120deg, #fff4f6 0%, #f4f0ff 55%, #eef4ff 100%); }
.pr-faq-list details[open]::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ef4352, #8d5cf6, #2d68d8);
}
.pr-faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 26px;
  color: var(--ink);
  font-size: 15.5px; font-weight: 700; line-height: 1.55;
  cursor: pointer;
  list-style: none;
}
.pr-faq-list summary::-webkit-details-marker { display: none; }
.pr-faq-list summary::after {
  content: "+";
  display: grid; place-items: center;
  flex: 0 0 28px; width: 28px; height: 28px;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ef4352, #2d68d8) border-box;
  color: var(--red);
  font-size: 20px; font-weight: 400;
  transition: transform .25s;
}
.pr-faq-list details[open] summary { color: var(--red); }
.pr-faq-list details[open] summary::after {
  transform: rotate(45deg);
  background: linear-gradient(135deg, #ef4352, #ff7a86) padding-box, linear-gradient(135deg, #ef4352, #2d68d8) border-box;
  color: #fff;
}
.pr-faq-list details > p { margin: 0; padding: 0 64px 24px 26px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.pr-faq-list details > p a { color: var(--red); font-weight: 700; }

/* ---------- FINAL CTA ----------------------------------------------- */

.pr-final { padding: 0 0 110px !important; background: #f7f9fc; }
.pr-final-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  padding: 56px 60px;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 100% 0, rgba(239, 67, 82, .34), transparent 46%),
    radial-gradient(ellipse at 0 100%, rgba(45, 104, 216, .3), transparent 44%),
    linear-gradient(125deg, #0d1730, #172950);
  color: #c1cce0;
  box-shadow: 0 30px 80px rgba(13, 23, 48, .22);
}
.pr-final-panel .section-kicker { color: #ff8991; }
.pr-final-panel h2 { max-width: 640px; margin-bottom: 12px; color: #fff; font-size: clamp(28px, 3.4vw, 42px); }
.pr-final-panel p { max-width: 560px; font-size: 17px; line-height: 1.75; }
.pr-final-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- responsive ---------------------------------------------- */

@media (max-width: 1000px) {
  .pr-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .pr-faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .pr-faq-intro { position: static; }
}
@media (max-width: 860px) {
  .pr-plan-grid { grid-template-columns: 1fr; }
  .pr-steps { grid-template-columns: 1fr; gap: 34px; }
  .pr-steps::before { display: none; }
  .pr-final-panel { grid-template-columns: 1fr; padding: 40px 28px; }
}
@media (max-width: 760px) {
  .pr-page .container { width: calc(100% - 36px); }
  .pr-hero { padding: 56px 0 64px; }
  .pr-plans, .pr-compare, .pr-how, .pr-faq { padding-block: 70px !important; }
  .pr-head { margin-bottom: 38px; }
  .pr-plan { padding: 34px 26px 30px; }
  .pr-price { font-size: 54px; }
  .pr-float-top { right: -4px; }
  .pr-float-bottom { left: 0; }
  .pr-table th, .pr-table td { padding: 16px 16px; }
  .pr-faq-list summary { padding: 19px 16px; font-size: 14.5px; }
  .pr-faq-list details > p { padding: 0 18px 20px 16px; }
  .pr-final { padding-bottom: 70px !important; }
  .pr-final-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-page *, .pr-page *::before, .pr-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}















/* =====================================================================
   HOME PAGE v5 — paste this at the very END of css/site.css
   Only home-page sections are styled here (classes prefixed .hm-, plus
   the final CTA on .final-mac-cta). Nothing else on the site is touched,
   and the old home rules above stay harmless (they simply stop matching).
   The image path is relative to css/site.css.
   ===================================================================== */

:root { --hm-grad: linear-gradient(135deg, #ef4352, #2d68d8); } /* logo colours */

/* ---------- shared header ------------------------------------------- */

.hm-head { max-width: 720px; margin: 0 0 48px; }
.hm-head.center { margin-inline: auto; text-align: center; }
.hm-head h2,
.hm-split h2,
.hm-why-copy h2,
.hm-faq-side h2 {
  margin: 12px 0 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.045em;
}
.hm-head p { margin: 16px auto 0; color: var(--muted); font-size: 18px; line-height: 1.7; }

/* =====================================================================
   03 — What can you do with a PDF editor?  (tabbed app showcase)
   ===================================================================== */

.hm-showcase { padding: clamp(72px, 9vw, 110px) 0; overflow: clip; background: linear-gradient(180deg, #fff, #f5f8fd); }
.hm-showcase-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 48px; align-items: center; }
.hm-tabs-col { display: flex; flex-direction: column; gap: 18px; }
.hm-tabs { display: flex; flex-direction: column; gap: 12px; }

.hm-tab {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid #e3e9f2;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.hm-tab:hover { transform: translateX(3px); border-color: #cfd8e8; }
.hm-tab-no { padding-top: 5px; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.hm-tab-body { display: block; flex: 1; min-width: 0; }
.hm-tab strong { display: block; font-family: var(--font-head); font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.hm-tab small { display: none; margin-top: 6px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

.hm-tab.is-active {
  border-color: #ffd7dc;
  background: linear-gradient(90deg, #ffe8eb, #fff6f7);
  box-shadow: 0 14px 34px rgba(239, 67, 82, .10);
}
.hm-tab.is-active:hover { transform: none; }
.hm-tab.is-active small { display: block; }
.hm-tab.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ef4352, #2d68d8);
}
.hm-tabs-link { align-self: flex-start; }

.hm-stage { position: relative; }
.hm-stage::before {
  content: "";
  position: absolute;
  inset: -6% -4%;
  z-index: 0;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(239, 67, 82, .22), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(45, 104, 216, .22), transparent 55%);
  filter: blur(24px);
  pointer-events: none;
}
.hm-window {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid #dfe6f1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 40px 90px rgba(17, 26, 46, .16);
}
.hm-window-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-bottom: 1px solid #e6ebf3; background: #f3f6fb; }
.hm-window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.hm-window-bar i:nth-child(2) { background: #febc2e; }
.hm-window-bar i:nth-child(3) { background: #28c840; }
.hm-window-bar span { position: absolute; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.hm-window img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: opacity .18s; }
.hm-window img.is-swap { opacity: 0; }

/* =====================================================================
   06 — Why Mac?  (dark panel + four cards)
   ===================================================================== */

.hm-why { padding: 40px 0 clamp(72px, 9vw, 110px); }
.hm-why-panel {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: center;
  padding: 64px;
  border-radius: 32px;
  color: #c1cce0;
  background:
    radial-gradient(ellipse at 100% 0, rgba(239, 67, 82, .34), transparent 50%),
    radial-gradient(ellipse at 0 100%, rgba(45, 104, 216, .30), transparent 50%),
    linear-gradient(135deg, #0d1730, #172950);
  box-shadow: 0 40px 90px rgba(13, 23, 48, .28);
}
.hm-why-copy h2 { color: #fff; }
.hm-why-copy .section-kicker { color: #ff8791; }
.hm-why-copy p { margin: 18px 0 26px; max-width: 44ch; color: #bfcbe0; font-size: 17px; line-height: 1.7; }
.hm-why-copy .arrow-link { color: #fff; }

.hm-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hm-why-card {
  padding: 26px 24px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px);
  transition: transform .3s, background .3s;
}
.hm-why-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .10); }
.hm-why-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ef4352, #ff7a86);
  color: #fff;
  font-size: 21px;
}
.hm-why-card strong { display: block; margin-bottom: 8px; color: #fff; font-family: var(--font-head); font-size: 19px; letter-spacing: -.02em; }
.hm-why-card p { margin: 0; color: #bfcbe0; font-size: 14.5px; line-height: 1.65; }

/* =====================================================================
   07 — Real document work  (four cards, gradient border on hover)
   ===================================================================== */

.hm-usecases { padding: 40px 0 clamp(72px, 9vw, 110px); background: #fff; }
.hm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 48px; }
.hm-split p { margin: 0; max-width: 52ch; color: var(--muted); font-size: 18px; line-height: 1.7; }

.hm-cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hm-case {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px;
  border: 1px solid #e3e9f2;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #fafbfe);
  color: inherit;
  transition: transform .3s, box-shadow .3s;
}
.hm-case:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(17, 26, 46, .12); }
.hm-case::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--hm-grad);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.hm-case:hover::before { opacity: 1; }
.hm-case-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff0f2; color: var(--red); font-size: 22px; }
.hm-case-tag { margin-top: 10px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.hm-case strong { color: var(--ink); font-family: var(--font-head); font-size: 21px; line-height: 1.25; letter-spacing: -.03em; }
.hm-case p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.hm-chips li { padding: 6px 12px; border-radius: 99px; background: #eef2f9; color: #4a566c; font-size: 12.5px; font-weight: 600; }
.hm-case-go { margin-top: auto; padding-top: 10px; color: var(--ink); font-size: 14.5px; font-weight: 700; }
.hm-case:hover .hm-case-go { color: var(--red); }

/* =====================================================================
   09 — FAQ  (logo + gradient left, gradient-border card right)
   ===================================================================== */

.hm-faq { padding: clamp(72px, 9vw, 110px) 0; background: linear-gradient(180deg, #f5f8fd, #fff); }
.hm-faq-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }

.hm-faq-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 52px 48px;
  overflow: hidden;
  border: 1px solid #f0dce0;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 0 0, rgba(239, 67, 82, .16), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(45, 104, 216, .18), transparent 55%),
    linear-gradient(160deg, #fff4f5, #eef3fc);
}
/* .hm-faq-logo { width: 112px; height: 112px; margin-bottom: 28px; border-radius: 28px; object-fit: cover; background: #fff; box-shadow: 0 20px 44px rgba(17, 26, 46, .18); } */
.hm-faq-side p { margin: 14px 0 24px; max-width: 38ch; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hm-faq-logo{width:160px;height:auto;margin-bottom:22px;border-radius:18px;box-shadow:0 12px 28px rgba(17,26,46,.16)}

.hm-faq-card { position: relative; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 30px 70px rgba(17, 26, 46, .10); }
.hm-faq-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  background: var(--hm-grad);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.hm-faq-card details { border-top: 1px solid #edf0f6; transition: background .25s; }
.hm-faq-card details:first-child { border-top: 0; }
.hm-faq-card details[open] { background: linear-gradient(90deg, #fff5f6, #fff); }
.hm-faq-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 30px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
}
.hm-faq-card summary::-webkit-details-marker { display: none; }
.hm-faq-card summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1;
  transition: background .25s, color .25s;
}
.hm-faq-card details[open] summary::after { content: "−"; background: var(--red); color: #fff; }
.hm-faq-card details p { margin: 0; padding: 0 70px 26px 30px; color: var(--muted); font-size: 15.5px; line-height: 1.75; }
.hm-faq-card details p a { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--red); }

/* =====================================================================
   Final CTA — neon wave background image
   ===================================================================== */

.final-mac-cta .final-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 13, 32, .70) 0%, rgba(7, 13, 32, .32) 55%, rgba(7, 13, 32, 0) 100%),
    url("../assets/backgrounds/Abstract-Neon-Wave-Ribbons.png") center / cover no-repeat;
}
.final-mac-cta .final-panel::after { display: none; } /* old red glow would tint the image */
.final-mac-cta .final-actions .btn-red { box-shadow: 0 14px 34px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .28); }

/* ---------- responsive ------------------------------------------------ */

@media (max-width: 1100px) {
  .hm-cases { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .hm-showcase-grid,
  .hm-why-panel,
  .hm-faq-grid,
  .hm-split { grid-template-columns: 1fr; }
  .hm-showcase-grid { gap: 32px; }
  .hm-why-panel { gap: 36px; padding: 44px 32px; }
  .hm-split { gap: 18px; }
  .hm-faq-side { padding: 40px 32px; }
}
@media (max-width: 640px) {
  .hm-why-panel { padding: 36px 22px; border-radius: 24px; }
  .hm-why-grid, .hm-cases { grid-template-columns: 1fr; }
  .hm-faq-card summary { padding: 20px; font-size: 16px; }
  .hm-faq-card details p { padding: 0 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-tab, .hm-case, .hm-why-card, .hm-window img { transition: none; }
}







/* Brand name spacing — header and footer */
.brand-name{display:inline-flex;align-items:baseline;gap:.22em;letter-spacing:-.035em;white-space:nowrap}
.brand-name em{font-style:normal;color:var(--red)}











/* App Store badge */
.appstore-badge{display:inline-block;line-height:0;border-radius:14px;transition:transform .25s var(--ease),box-shadow .25s}
.appstore-badge img{display:block;height:64px;width:auto}
.appstore-badge:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(17,26,46,.22)}
.hm-why-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px}

/* Home FAQ v2 */
.hm-faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.hm-faq-side{position:sticky;top:120px;display:block;padding:0;border:0;border-radius:0;background:none;overflow:visible}

.hm-faq-side p{margin:16px 0 28px;max-width:40ch}
.hm-faq-actions{display:flex;flex-direction:column;align-items:flex-start;gap:22px}

.hm-faq-card{display:flex;flex-direction:column;gap:12px;overflow:visible;border-radius:0;background:none;box-shadow:none}
.hm-faq-card::before{display:none}
.hm-faq-card details,
.hm-faq-card details:first-child{position:relative;overflow:hidden;border:1px solid #e3e9f2;border-radius:16px;background:#fff;transition:background .25s,box-shadow .25s}
.hm-faq-card details:hover{background:#fafbfe}
.hm-faq-card details[open]{border-color:#ffd7dc;background:linear-gradient(180deg,#ffeef0,#fff6f7);box-shadow:0 10px 28px rgba(239,67,82,.08)}
.hm-faq-card details[open]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#ef4352,#2d68d8)}
.hm-faq-card summary{padding:20px 24px;font-size:17px}
.hm-faq-card details p{padding:0 64px 22px 24px;font-size:15.5px}

.hm-head.center{max-width:860px}
.hm-head h2{text-wrap:balance}
.hm-window{border-radius:16px}
.hm-window img{aspect-ratio:16/9;object-fit:cover;object-position:top left}

.story-image.story-mockup{background:none;box-shadow:none;border-radius:0;overflow:visible}
.story-image.story-mockup img{object-fit:contain;min-height:0;filter:drop-shadow(0 30px 40px rgba(17,26,46,.2))}
.story-image img{object-position:top left}

@media(max-width:960px){.hm-faq-grid{grid-template-columns:1fr;gap:32px}.hm-faq-side{position:static}}
@media(max-width:640px){.hm-faq-card summary{padding:18px}.hm-faq-card details p{padding:0 18px 20px}}














/* Smart PDF Pilot — home v6. Link after css/site.css (or paste at the end of it). */

/* ===== 03 — live demo reel: the camera zooms into each tool, automatically ===== */
.hm-reel{position:relative;isolation:isolate;overflow:hidden;padding:clamp(80px,9vw,120px) 0 clamp(90px,10vw,130px);color:#c8d3ea;background:radial-gradient(900px 520px at 85% 0,rgba(239,67,82,.22),transparent 60%),radial-gradient(800px 560px at 0 100%,rgba(45,104,216,.28),transparent 60%),linear-gradient(160deg,#0a1226,#0e1b3c 55%,#0a1429)}
.hm-reel-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hm-reel-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:hmDrift 18s ease-in-out infinite alternate}
.hm-reel-bg i:nth-child(1){width:520px;height:520px;left:-120px;top:8%;background:#2d68d8}
.hm-reel-bg i:nth-child(2){width:460px;height:460px;right:-100px;top:30%;background:#ef4352;animation-delay:-6s}
.hm-reel-bg i:nth-child(3){width:380px;height:380px;left:42%;bottom:-160px;background:#8d5cf6;opacity:.35;animation-delay:-11s}
.hm-reel-bg:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px);background-size:30px 30px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 70%)}
@keyframes hmDrift{to{transform:translate(60px,-40px) scale(1.15)}}

.hm-reel-head{max-width:760px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.hm-reel-head .section-kicker{color:#ff8791}
.hm-reel-head h2{margin:12px 0 0;color:#fff;font-size:clamp(34px,4.2vw,56px);line-height:1.06;text-wrap:balance}
.hm-reel-head p{margin:18px auto 0;color:#aebbd6;font-size:18px;line-height:1.7}

.hm-reel-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
.hm-reel-rail{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.hm-reel-step button{position:relative;display:flex;gap:16px;width:100%;padding:18px 20px 18px 30px;overflow:hidden;border:1px solid transparent;border-radius:16px;background:transparent;color:#9fb0cf;font:inherit;text-align:left;cursor:pointer;transition:background .3s,border-color .3s}
.hm-reel-step button:hover{background:rgba(255,255,255,.05)}
.hm-reel-track{position:absolute;left:12px;top:16px;bottom:16px;width:3px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.13)}
.hm-reel-fill{position:absolute;inset:0;background:linear-gradient(180deg,#ef4352,#8d5cf6,#2d68d8);transform:scaleY(0);transform-origin:top}
.hm-reel-step.is-done .hm-reel-fill{transform:scaleY(1);opacity:.45}
.hm-reel-step.is-active .hm-reel-fill{animation:hmFill var(--reel-ms,6500ms) linear forwards}
.hm-reel.is-paused .hm-reel-step.is-active .hm-reel-fill,.hm-reel.is-offscreen .hm-reel-step.is-active .hm-reel-fill{animation-play-state:paused}
@keyframes hmFill{to{transform:scaleY(1)}}
.hm-reel-text{display:block;min-width:0}
.hm-reel-text strong{display:block;color:#dbe5f7;font-family:var(--font-head);font-size:19px;line-height:1.3;letter-spacing:-.02em}
.hm-reel-text small{display:block;max-height:0;overflow:hidden;opacity:0;color:#aebbd6;font-size:14.5px;line-height:1.65;transition:max-height .45s,opacity .35s,margin .35s}
.hm-reel-step.is-active button{border-color:rgba(255,255,255,.14);background:linear-gradient(90deg,rgba(255,255,255,.11),rgba(255,255,255,.03))}
.hm-reel-step.is-active strong{color:#fff}
.hm-reel-step.is-active small{max-height:140px;margin-top:7px;opacity:1}
.hm-reel-more{display:inline-flex;margin:18px 0 0 30px;color:#fff;border-color:#ff6674}

.hm-reel-stage{position:relative;min-width:0}
.hm-reel-stage:before{content:"";position:absolute;inset:8% -4% -8%;z-index:-1;background:radial-gradient(ellipse at 50% 60%,rgba(239,67,82,.35),rgba(45,104,216,.3) 50%,transparent 70%);filter:blur(40px)}
.hm-reel-device{padding:10px;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.06));box-shadow:0 50px 110px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.12)}
.hm-reel-viewport{position:relative;overflow:hidden;border-radius:18px;background:#0a1226;aspect-ratio:2048/1136;isolation:isolate}
.hm-reel-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.hm-reel-slide.is-active{opacity:1;visibility:visible}
.hm-reel-zoom{position:absolute;inset:0;transform-origin:50% 50%;transition:transform 1.8s cubic-bezier(.65,.05,.25,1);will-change:transform}
.hm-reel-zoom img{display:block;width:100%;height:100%;object-fit:cover}
.hm-reel-slide.is-zoomed .hm-reel-zoom{transform:translate(var(--tx),var(--ty)) scale(var(--s))}
.hm-reel-spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .8s ease .9s;background:radial-gradient(circle at var(--dx) var(--dy),rgba(6,12,30,0) 0,rgba(6,12,30,0) 11%,rgba(6,12,30,.55) 30%)}
.hm-reel-slide.is-zoomed .hm-reel-spot{opacity:1}
.hm-reel-ring{position:absolute;left:var(--dx);top:var(--dy);width:clamp(46px,5.6vw,80px);aspect-ratio:1;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 6px rgba(255,255,255,.12),0 0 40px rgba(239,67,82,.75);opacity:0;transform:translate(-50%,-50%) scale(.4);transition:opacity .5s 1.5s,transform .6s cubic-bezier(.3,1.4,.5,1) 1.5s}
.hm-reel-ring:before,.hm-reel-ring:after{content:"";position:absolute;inset:-2px;border:2px solid rgba(255,255,255,.8);border-radius:50%;animation:hmRipple 2.2s ease-out infinite}
.hm-reel-ring:after{animation-delay:1.1s}
@keyframes hmRipple{from{transform:scale(1);opacity:.8}to{transform:scale(2.3);opacity:0}}
.hm-reel-slide.is-zoomed .hm-reel-ring{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hm-reel-tag{position:absolute;left:var(--dx);top:var(--dy);margin-left:clamp(40px,4.4vw,62px);padding:9px 15px;border-radius:99px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 14px 34px rgba(0,0,0,.35);opacity:0;transform:translate(-14px,-50%);transition:opacity .5s 1.9s,transform .5s 1.9s}
.hm-reel-tag.flip{margin-left:0;transform:translate(calc(-100% - clamp(40px,4.4vw,62px) + 14px),-50%)}
.hm-reel-slide.is-zoomed .hm-reel-tag{opacity:1;transform:translate(0,-50%)}
.hm-reel-slide.is-zoomed .hm-reel-tag.flip{transform:translate(calc(-100% - clamp(40px,4.4vw,62px)),-50%)}

.hm-reel-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 8px 4px;color:#9fb0cf;font-size:11.5px;font-weight:800;letter-spacing:.14em}
.hm-reel-live{display:inline-flex;align-items:center;gap:9px}
.hm-reel-live i{width:8px;height:8px;border-radius:50%;background:#ff5a67;animation:hmLive 2s infinite}
@keyframes hmLive{70%{box-shadow:0 0 0 9px rgba(255,90,103,0)}0%{box-shadow:0 0 0 0 rgba(255,90,103,.7)}}
.hm-reel-ctrl{display:inline-flex;align-items:center;gap:8px}
.hm-reel-ctrl button{width:34px;height:34px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.07);color:#fff;font-size:13px;cursor:pointer;transition:background .2s,transform .2s}
.hm-reel-ctrl button:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.hm-reel-count{min-width:56px;text-align:center;color:#fff}
.hm-reel button:focus-visible{outline:2px solid #ff8791;outline-offset:2px}

@media(max-width:960px){.hm-reel-grid{grid-template-columns:1fr}.hm-reel-stage{order:-1}.hm-reel-more{margin-left:0}}
@media(max-width:640px){.hm-reel-device{padding:6px;border-radius:18px}.hm-reel-viewport{border-radius:12px}.hm-reel-tag{padding:7px 11px;font-size:11px}.hm-reel-livetext{display:none}}

/* ===== real screenshots: hero, story rows, section 05 ===== */
.hero-original-image.hero-shot{background:none;border-radius:0;box-shadow:none;overflow:visible}
.hero-original-image.hero-shot img{border-radius:14px;filter:drop-shadow(0 34px 50px rgba(16,27,52,.25))}
.story-image.story-shot{min-height:0;background:none}
.story-image.story-shot img{min-height:0;height:auto;object-fit:contain;border-radius:14px}
.spread-core:before,.spread-dots{display:none}
.spread-core{border-radius:18px}
/* @media(min-width:901px){
  .card-spread-stage{min-height:640px}
  .spread-core{width:min(640px,60%)}
  .spread-panel.one{left:0;top:10%}
  .spread-panel.two{right:0;top:10%}
  .spread-panel.three{left:2%;bottom:4%}
  .spread-panel.four{right:2%;bottom:4%}
} */

/* ===== FAQ side: logo + badge row ===== */
.hm-faq-brand{display:flex;flex-wrap:wrap;align-items:center;gap:26px}

/* =====================================================================
   Smart PDF Pilot — FAQ UI refresh (scoped overrides only)
   Uses the pastel PDF waves artwork behind the FAQ section.
   Keep this block at the END of site.css so it overrides older FAQ rules.
   ===================================================================== */
.hm-faq {
  position: relative;
  isolation: isolate;
  padding: clamp(76px, 8vw, 104px) 0;
  background-color: #f8fbff;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,.86)),
    url("assets/backgrounds/Pastel-pdf-light.png");
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
  border-top: 1px solid #e8edf5;
  border-bottom: 1px solid #e8edf5;
}
.hm-faq-grid {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.hm-faq-side {
  position: relative;
  top: auto;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hm-faq-side .eyebrow,
.hm-faq-side .section-kicker {
  margin-bottom: 16px;
}
.hm-faq-side h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(34px, 3.5vw, 48px);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hm-faq-side p {
  max-width: 38ch;
  margin: 18px 0 24px;
  color: #66748c;
  font-size: 17px;
  line-height: 1.7;
}
.hm-faq-logo {
  width: 76px;
  height: 76px;
  margin: 0;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(17,26,46,.13);
}
.hm-faq-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
}
.hm-faq-actions .appstore-badge img { height: 54px; width: auto; }
.hm-faq-actions .text-link,
.hm-faq-actions .arrow-link,
.hm-faq-actions .learn { font-size: 15px; }
.hm-faq-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hm-faq-card::before { display: none; }
.hm-faq-card details,
.hm-faq-card details:first-child {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(213,224,240,.96);
  border-radius: 15px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 5px 16px rgba(23,42,76,.025);
  transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
  backdrop-filter: blur(7px);
}
.hm-faq-card details:hover {
  border-color: #c5d4e9;
  background: #fff;
  box-shadow: 0 9px 24px rgba(23,42,76,.06);
  transform: translateY(-1px);
}
.hm-faq-card details[open] {
  border-color: #ffcbd1;
  background: linear-gradient(110deg, rgba(255,241,243,.97), rgba(255,255,255,.97) 76%);
  box-shadow: 0 12px 30px rgba(230,63,75,.09);
}
.hm-faq-card details[open]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #ef4352, #4777e8);
  pointer-events: none;
}
.hm-faq-card summary {
  min-height: 62px;
  padding: 17px 21px;
  gap: 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}
.hm-faq-card summary::after {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
  border-color: #d7e1ef;
  color: #172440;
  background: rgba(255,255,255,.95);
  font-size: 18px;
}
.hm-faq-card details[open] summary::after {
  border-color: #ef4352;
  background: #ef4352;
  color: #fff;
}
.hm-faq-card details p {
  padding: 0 62px 20px 21px;
  color: #68768e;
  font-size: 14.5px;
  line-height: 1.75;
}
@media (max-width: 960px) {
  .hm-faq { padding: 64px 0; background-position: center, 60% center; }
  .hm-faq-grid { grid-template-columns: 1fr; gap: 30px; }
  .hm-faq-side { position: static; }
  .hm-faq-side h2 { max-width: 16ch; }
  .hm-faq-side p { max-width: 52ch; }
}
@media (max-width: 640px) {
  .hm-faq { padding: 52px 0; background-image: linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.91)), url("assets/backgrounds/Pastel%20PDF%20Waves%20and%20Lightbulb.png"); }
  .hm-faq-side h2 { font-size: clamp(32px, 9vw, 40px); }
  .hm-faq-actions { gap: 14px 18px; }
  .hm-faq-logo { width: 64px; height: 64px; }
  .hm-faq-actions .appstore-badge img { height: 48px; }
  .hm-faq-card { gap: 8px; }
  .hm-faq-card summary { min-height: 58px; padding: 15px 16px; font-size: 15px; }
  .hm-faq-card details p { padding: 0 18px 18px; font-size: 14px; }
}



/* Shared page entrance motion — restrained and accessible. */
.reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.reveal.in-view{opacity:1;transform:translate3d(0,0,0)}
.reveal-delay{transition-delay:.12s}
@media(prefers-reduced-motion:reduce){.reveal,.reveal.in-view{opacity:1;transform:none;transition:none;will-change:auto}}







/* Pricing page: 3-plan table (Free / Pro Monthly / Pro Yearly) + App Store badge */
.pr-hero .hero-actions,.pr-final-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.pr-hero .appstore-badge img,.pr-final-actions .appstore-badge img{height:60px;width:auto}
.pt-wrap{overflow-x:auto;border:1px solid #dbe3f0;border-radius:24px;background:#fff;box-shadow:0 24px 60px rgba(11,23,53,.08)}
.pt-table{width:100%;min-width:860px;border-collapse:separate;border-spacing:0}
.pt-table th,.pt-table td{padding:18px 22px;text-align:center;border-bottom:1px solid #e8edf6;vertical-align:middle}
.pt-table thead th{vertical-align:top;padding:30px 22px 26px;border-bottom:1px solid #dbe3f0;font-weight:500}
.pt-table .pt-first,.pt-table tbody th{text-align:left;font-weight:600;color:var(--ink,#0b1735);width:34%}
.pt-table .pt-first{font-weight:500;font-size:15px;line-height:1.5;color:var(--muted,#5b6b86)}
.pt-table thead strong{display:block;margin:12px 0 8px;font-size:22px;color:var(--ink,#0b1735)}
.pt-price{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--ink,#0b1735)}
.pt-price small{margin-left:4px;font-size:14px;font-weight:600;color:var(--muted,#5b6b86)}
.pt-sub{display:block;margin-top:6px;font-size:13px;color:var(--muted,#5b6b86)}
.pt-y{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fde8ea;color:#f43f4b;font-weight:800;font-size:14px}
.pt-n{color:#b4bfd1;font-size:20px}
.pt-table tfoot td{border-bottom:0;padding:26px 16px;line-height:0}
.pt-table tfoot .appstore-badge img{height:54px;width:auto}
.pt-table tfoot small{display:block;margin-top:10px;font-size:12px;line-height:1.3;color:var(--muted,#5b6b86)}
.pt-table .pr-plan-tag{display:inline-block}
.pt-tag-blue{background:#e6efff;color:#1769e8}
/* highlighted Yearly column */
.pt-table .pt-hl{background:linear-gradient(180deg,#0b1735,#142a5c);color:#fff;border-bottom-color:rgba(255,255,255,.12)}
.pt-table thead .pt-hl strong,.pt-table thead .pt-hl .pt-price{color:#fff}
.pt-table thead .pt-hl .pt-price small,.pt-table thead .pt-hl .pt-sub,.pt-table tfoot .pt-hl small{color:#b9c6da}
.pt-table thead .pt-hl{border-top-left-radius:0}
.pt-table .pt-hl .pt-y{background:rgba(255,255,255,.16);color:#fff}
@media(max-width:700px){.pt-table th,.pt-table td{padding:14px 12px}.pt-price{font-size:28px}}
/* overrides: keep normal text case, solid highlighted column */
.pt-table th,.pt-table td,.pt-table small{text-transform:none;letter-spacing:normal}
.pt-table .pt-hl{background:#10224d}
.pt-table thead .pt-hl{background:#0b1735}
.pt-table .pr-plan-tag{padding:5px 12px;border-radius:99px;background:#eef2fb;color:#1769e8;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pt-table thead .pt-hl .pr-plan-tag{background:#f43f4b;color:#fff}
.pt-table .pt-tag-blue{background:#e6efff;color:#1769e8}
.pt-table thead strong{font-weight:800}

/* ===== v3: compact table, single CTA, new hero ===== */
/* .pr-plans .container{max-width:1020px} */
.pt-wrap{border-radius:20px;box-shadow:0 14px 36px rgba(11,23,53,.07)}
.pt-table{min-width:700px}
.pt-table th,.pt-table td{padding:11px 16px}
.pt-table thead th{padding:22px 16px 18px}
.pt-table .pt-first{font-size:14px;width:32%}
.pt-table tbody th{font-size:14px;font-weight:600}
.pt-table thead strong{margin:8px 0 4px;font-size:18px}
.pt-price{font-size:27px}
.pt-price small{font-size:13px}
.pt-sub{margin-top:4px;font-size:12px;line-height:1.35}
.pt-y{width:22px;height:22px;font-size:12px}
.pt-n{font-size:17px}
.pt-table .pr-plan-tag{padding:4px 10px;font-size:10px}
.pt-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px;text-align:center}
.pt-cta .appstore-badge{line-height:0}
.pt-cta .appstore-badge img{height:96px;width:auto}
.pt-cta p{margin:0;font-size:14px;color:var(--muted,#5b6b86)}
.pr-plans .pr-foot-note{margin-top:18px}

/* hero */
.ph{position:relative;padding:112px 0 46px;background:radial-gradient(900px 380px at 85% 0,rgba(244,63,75,.09),transparent 70%),radial-gradient(800px 380px at 0 100%,rgba(23,105,232,.08),transparent 70%),#f7faff}
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center}
.ph-crumb{margin-bottom:14px;font-size:14px;color:var(--muted,#5b6b86)}
.ph-crumb a{color:#f43f4b;font-weight:600;text-decoration:none}
.ph h1{margin:10px 0 14px;font-size:clamp(34px,4.2vw,52px);line-height:1.08;letter-spacing:-.03em;color:var(--ink,#0b1735)}
.ph h1 span{display:block;color:#f43f4b}
.ph-copy>p{margin:0 0 22px;max-width:520px;font-size:17px;line-height:1.6;color:var(--muted,#5b6b86)}
.ph-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ph-actions .appstore-badge img{height:54px;width:auto}
.ph-trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin:22px 0 0;padding:0;list-style:none;font-size:14px;font-weight:600;color:var(--muted,#5b6b86)}
.ph-trust li:before{content:"\2713";margin-right:6px;color:#f43f4b;font-weight:800}
.ph-visual img{display:block;width:100%;height:auto;border-radius:18px;}
@media(max-width:900px){.ph-grid{grid-template-columns:1fr;gap:28px}.ph{padding:26px 0 36px}}

/* FAQ side brand card */
.pf-brand{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:40px;padding:34px 24px 28px;max-width:360px;text-align:center;border:1px solid #e3e9f5;border-radius:26px;background:linear-gradient(160deg,#ffffff,#f3f6ff);box-shadow:0 18px 44px rgba(11,23,53,.08);overflow:hidden}
.pf-glow{position:absolute;top:-60px;left:50%;width:300px;height:300px;transform:translateX(-50%);background:radial-gradient(circle,rgba(244,63,75,.18),rgba(23,105,232,.10) 45%,transparent 70%);pointer-events:none}
.pf-icon{position:relative;width:132px;height:132px;border-radius:30px;object-fit:cover;box-shadow:0 18px 36px rgba(11,23,53,.22)}
.pf-brand strong{position:relative;margin-top:14px;font-size:21px;color:var(--ink,#0b1735)}
.pf-brand small{position:relative;font-size:14px;color:var(--muted,#5b6b86)}
.pf-chip{position:relative;margin-top:10px;padding:5px 12px;border-radius:99px;background:#fde8ea;color:#f43f4b;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:900px){.pf-brand{display:none}}