/* Landing page — hero, signature field, fact strip, transfer demo. */

/* ---- Hero ---- */
.hero{ position: relative; overflow: hidden; }
.hero__grid{ position: relative; z-index: 1; }
.hero__copy h1{ margin-top: var(--space-5); }
.hero__cta{ margin-top: var(--space-7); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero__note{ margin-top: var(--space-5); font-size: var(--text-small); color: rgba(255,255,255,0.8); }

.hero__visual{ position: relative; }
.hero__glow{
  position: absolute; inset: -20% -10% -10% -10%;
  background: radial-gradient(55% 55% at 70% 30%, rgba(255,255,255,0.30), transparent 70%);
  z-index: 0; pointer-events: none;
  animation: hero-glow-drift 16s var(--ease-in-out, ease-in-out) infinite alternate;
}
@keyframes hero-glow-drift{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(-4%, 5%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .hero__glow{ animation: none; }
}
.hero-doc{ position: relative; z-index: 1; max-width: 440px; margin-inline: auto; }
.hero-doc__clause-num{ font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.hero-doc__clause{ font-size: 12.5px; line-height: 1.7; color: var(--ink-700); margin-top: 6px; }

.hero-doc__party{ margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--ink-100); }
.hero-doc__party-label{ display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: 8px; }
.hero-doc__party-label em{ font-style: normal; color: var(--orange-700); }
.hero-doc__party-meta{ display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }

.sign-field{
  position: relative;
  border: 2px dashed var(--orange-300); border-radius: var(--radius-md);
  background: var(--orange-50); padding: 16px 16px 12px;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.sign-field.is-signed{ border-style: solid; border-color: var(--success-500); background: var(--success-50); }
.sign-field__input{
  width: 100%; font-family: var(--font-hand); font-size: 1.65rem; color: var(--ink-900);
  background: transparent; border: none; outline: none;
}
.sign-field__input::placeholder{ font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--orange-700); opacity: 1; }
.sign-field__chip{ position: absolute; top: -12px; left: 14px; }

/* In normal flow (not absolutely positioned) so it can never clip or bleed
   into the next section — learned that the hard way mid-build. */
.hero-doc__hint{
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 11px; font-weight: 700; color: var(--blue-700);
}
.hero-doc__hint-cursor{ flex-shrink: 0; animation: bob 1.8s var(--ease-in-out) infinite; }
@keyframes bob{ 0%, 100%{ transform: translate(0,0); } 50%{ transform: translate(2px,-3px); } }

/* ---- Fact strip (quick, terse — top of page) ---- */
.fact-strip{ align-items: center; }
.fact-chip{ display: flex; align-items: center; gap: 12px; }
.fact-chip__icon{ width: 22px; height: 22px; color: var(--blue-600); flex-shrink: 0; }
.fact-chip span{ font-size: var(--text-small); font-weight: 600; color: var(--ink-700); }

/* ---- Controlled Originals — transfer demo ---- */
.transfer-card{ max-width: 760px; margin-inline: auto; padding: var(--space-8) var(--space-7); }
.transfer-demo{ position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.transfer-demo__party{ display: flex; flex-direction: column; align-items: center; gap: 10px; width: 150px; text-align: center; }
.transfer-demo__name{ font-weight: 600; font-size: var(--text-small); }
.transfer-demo__badge{ transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.transfer-demo__doc{ flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-width: 90px; }
.transfer-demo__doc svg{ width: 36px; height: 36px; color: var(--ink-200); }
.transfer-demo__track{ position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background-image: repeating-linear-gradient(to right, var(--ink-200) 0 8px, transparent 8px 16px); transform: translateY(-50%); }
.transfer-demo__seal{
  position: absolute; top: 50%; left: 8%;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--orange-500); color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  transform: translate(0, -50%);
  transition: left 900ms var(--ease-in-out);
  box-shadow: var(--shadow-sm);
}
.transfer-demo.is-transferred .transfer-demo__seal{ left: 88%; }
.transfer-demo__seal svg{ width: 16px; height: 16px; }
.transfer-card__trigger-row{ text-align: center; margin-top: var(--space-7); }
.transfer-card__caption{ text-align: center; margin-top: var(--space-4); font-size: var(--text-micro); color: var(--text-tertiary); max-width: 480px; margin-inline: auto; }
@media (max-width: 560px){
  .transfer-demo{ flex-direction: column; gap: var(--space-6); }
  .transfer-demo__doc{ width: 100%; min-width: 0; }
  .transfer-demo__track{ left: 50%; right: auto; top: 0; bottom: 0; height: auto; width: 2px; background-image: repeating-linear-gradient(to bottom, var(--ink-200) 0 8px, transparent 8px 16px); transform: translateX(-50%); }
  .transfer-demo__seal{ left: 50%; top: 8%; transform: translate(-50%, 0); }
  .transfer-demo.is-transferred .transfer-demo__seal{ left: 50%; top: 88%; }
}

/* ---- PDF tools grid ---- */
.tools-grid{ margin-top: var(--space-7); }
.tools-more{ margin-top: var(--space-6); text-align: center; }

/* ---- Pricing teaser ---- */
.price-card{ max-width: 420px; margin-inline: auto; text-align: center; }
.price-card__amount{ font-family: var(--font-display); font-size: 3rem; font-weight: 700; letter-spacing: var(--tracking-h); margin: var(--space-4) 0 var(--space-2); }
.price-card__amount span{ font-size: var(--text-body); font-weight: 500; color: var(--text-tertiary); font-family: var(--font-sans); }
.price-card__list{ display: flex; flex-direction: column; gap: var(--space-3); text-align: left; margin: var(--space-6) 0; }
.price-card__list li{ display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-small); color: var(--text-secondary); }
.price-card__list svg{ width: 18px; height: 18px; color: var(--success-700); flex-shrink: 0; margin-top: 1px; }

/* ---- Section-level headings centred where used ---- */
.section-head{ max-width: 620px; margin-bottom: var(--space-8); }

/* ==========================================================================
   Autoplay signing-lifecycle loop ("Watch it work")
   One shared 14s infinite timeline; every element animates its own opacity/
   transform window as a percentage of that cycle, then everything fades out
   at 96–100% so the restart is clean. Silent, no controls — the DocuSign
   product-capture pattern, rebuilt in pure CSS.
   ========================================================================== */

.loop-demo{ max-width: 640px; margin-inline: auto; }
.loop-demo__win{ box-shadow: var(--shadow-lg); }

/* Pulsing "live" dot in the section eyebrow */
.loop-live-dot{
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange-500); margin-right: 2px;
  animation: loop-live-pulse 2s var(--ease-out) infinite;
}
@keyframes loop-live-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,122,51,0.45); }
  70%{ box-shadow: 0 0 0 9px rgba(255,122,51,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,122,51,0); }
}

/* ---- Status chips in the titlebar (stacked, one visible at a time) ---- */
.loop-status{ margin-left: auto; position: relative; display: inline-flex; min-width: 132px; height: 24px; }
.loop-chip{ position: absolute; right: 0; top: 0; white-space: nowrap; opacity: 0; }
.loop-chip--prep{    animation: loop-chip-prep    14s linear infinite; }
.loop-chip--signing{ animation: loop-chip-signing 14s linear infinite; }
.loop-chip--sealing{ animation: loop-chip-sealing 14s linear infinite; }
.loop-chip--sealed{  animation: loop-chip-sealed  14s linear infinite; }
@keyframes loop-chip-prep{    0%{opacity:1;} 16%{opacity:1;} 18%{opacity:0;} 100%{opacity:0;} }
@keyframes loop-chip-signing{ 0%,16%{opacity:0;} 18%{opacity:1;} 39%{opacity:1;} 41%{opacity:0;} 100%{opacity:0;} }
@keyframes loop-chip-sealing{ 0%,39%{opacity:0;} 41%{opacity:1;} 47%{opacity:1;} 49%{opacity:0;} 100%{opacity:0;} }
@keyframes loop-chip-sealed{  0%,47%{opacity:0;} 49%{opacity:1;} 96%{opacity:1;} 100%{opacity:0;} }

/* ---- The document stage ---- */
.loop-stage{ position: relative; min-height: 380px; }
.loop-doc-heading{
  width: 44%; height: 13px; border-radius: 4px; background: var(--ink-200);
  margin-bottom: 14px;
}
.loop-doc-line{ height: 9px; border-radius: 4px; background: var(--ink-100); margin-bottom: 10px; }

/* ---- Fields that drop in ---- */
.loop-field{
  position: absolute;
  border: 2px dashed var(--orange-300); border-radius: var(--radius-md);
  background: var(--orange-50); padding: 10px 12px 8px;
  opacity: 0;
}
.loop-field__label{
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--orange-700);
}
.loop-field--name{ left: 4%;  top: 38%; width: 44%; }
.loop-field--date{ left: 54%; top: 38%; width: 34%; }
.loop-field--sig{  left: 4%;  top: 56%; width: 54%; min-height: 74px; }
.loop-field--name{ animation: loop-field-name 14s linear infinite; }
.loop-field--date{ animation: loop-field-date 14s linear infinite; }
.loop-field--sig{  animation: loop-field-sig  14s linear infinite; }
@keyframes loop-field-name{
  0%,5%{ opacity:0; transform: translateY(-10px) scale(0.96); animation-timing-function: cubic-bezier(.2,1.4,.4,1); }
  8%{ opacity:1; transform: none; } 96%{ opacity:1; } 100%{ opacity:0; }
}
@keyframes loop-field-date{
  0%,9%{ opacity:0; transform: translateY(-10px) scale(0.96); animation-timing-function: cubic-bezier(.2,1.4,.4,1); }
  12%{ opacity:1; transform: none; } 96%{ opacity:1; } 100%{ opacity:0; }
}
@keyframes loop-field-sig{
  0%,13%{ opacity:0; transform: translateY(-10px) scale(0.96); animation-timing-function: cubic-bezier(.2,1.4,.4,1); }
  16%{ opacity:1; transform: none;
       border-color: var(--orange-300); background: var(--orange-50); }
  38%{ border-color: var(--orange-300); background: var(--orange-50); }
  42%{ border-color: var(--success-500); background: var(--success-50); }
  96%{ opacity:1; border-color: var(--success-500); background: var(--success-50); }
  100%{ opacity:0; }
}

/* ---- Values that fill in ---- */
.loop-fill{ display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-900); margin-top: 4px; opacity: 0; }
.loop-fill--name{ animation: loop-fill-name 14s linear infinite; }
.loop-fill--date{ animation: loop-fill-date 14s linear infinite; }
@keyframes loop-fill-name{ 0%,18%{opacity:0;} 20%{opacity:1;} 96%{opacity:1;} 100%{opacity:0;} }
@keyframes loop-fill-date{ 0%,21%{opacity:0;} 23%{opacity:1;} 96%{opacity:1;} 100%{opacity:0;} }

/* ---- The signature writing itself (clip-path left→right reveal) ---- */
.loop-sig{
  display: inline-block; margin-top: 2px; font-size: 1.9rem; white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  animation: loop-sig-write 14s linear infinite;
}
@keyframes loop-sig-write{
  0%,24%{ clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: cubic-bezier(.45,.05,.55,.95); }
  36%{ clip-path: inset(0 -8% 0 0); }
  96%{ clip-path: inset(0 -8% 0 0); opacity: 1; }
  100%{ opacity: 0; }
}

/* ---- Certification seal stamping down ---- */
/* A proper certification stamp in KuduDoc's own colours: double ring, a
   ticked edge like a struck seal, the wordmark bars at the centre and the
   proof names running round the rim. */
.loop-seal{
  position: absolute; right: 4%; top: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: rotate(-8deg);
  animation: loop-seal-stamp 14s linear infinite;
}
.loop-seal__svg{ display: block; overflow: visible; }
.loop-seal__ring{ fill: rgba(255,255,255,0.92); stroke: var(--blue-600); stroke-width: 2.5; }
.loop-seal__ring--inner{ fill: none; stroke-width: 1; stroke-opacity: .45; }
.loop-seal__ticks circle{ fill: none; stroke: var(--blue-600); stroke-width: 3; stroke-opacity: .35; stroke-linecap: round; }
.loop-seal__arc{
  font-family: var(--font-sans); font-size: 10px; font-weight: 800;
  letter-spacing: .34em; fill: var(--blue-700); text-transform: uppercase;
}
.loop-seal__arc--bottom{ font-size: 7px; letter-spacing: .18em; fill: var(--blue-600); }
.loop-seal__mark .logo-mark__bar{ stroke-width: 7.5; }
.loop-seal__word{
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; fill: var(--blue-700);
}
.loop-seal__date{
  font-family: var(--font-sans); font-size: 6.4px; font-weight: 700;
  letter-spacing: .11em; fill: var(--orange-500);
}
@keyframes loop-seal-stamp{
  0%,41%{ opacity: 0; transform: scale(1.9) rotate(-16deg); animation-timing-function: cubic-bezier(.3,1.3,.45,1); }
  45%{ opacity: 1; transform: scale(1) rotate(-8deg); }
  96%{ opacity: 1; transform: scale(1) rotate(-8deg); }
  100%{ opacity: 0; }
}

/* ---- Hash line typing itself out ---- */
.loop-hash{
  position: absolute; left: 4%; top: calc(56% + 104px);
  font-family: "SF Mono", Menlo, monospace; font-size: 10.5px; color: var(--text-secondary);
  margin: 0; max-width: 92%;
}
.loop-hash__reveal{
  display: inline-block; white-space: nowrap;
  clip-path: inset(0 100% 0 0); opacity: 0;
  animation: loop-hash-type 14s linear infinite;
}
@keyframes loop-hash-type{
  0%,47%{ clip-path: inset(0 100% 0 0); opacity: 1; }
  58%{ clip-path: inset(0 0 0 0); }
  96%{ clip-path: inset(0 0 0 0); opacity: 1; }
  100%{ opacity: 0; }
}

/* ---- Verified banner ---- */
.loop-verified{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--success-50); color: var(--success-700);
  border-top: 1px solid var(--success-500);
  font-size: var(--text-small); font-weight: 600;
  opacity: 0; transform: translateY(100%);
  animation: loop-verified-rise 14s linear infinite;
}
@keyframes loop-verified-rise{
  0%,61%{ opacity: 0; transform: translateY(100%); animation-timing-function: cubic-bezier(.2,1,.3,1); }
  66%{ opacity: 1; transform: none; }
  96%{ opacity: 1; transform: none; }
  100%{ opacity: 0; }
}
.loop-verified__check{
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: loop-check-draw 14s linear infinite;
}
@keyframes loop-check-draw{
  0%,63%{ stroke-dashoffset: 100; }
  71%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: 0; }
}

/* ---- Step indicators under the window ---- */
.loop-steps{
  display: flex; justify-content: center; gap: var(--space-5);
  flex-wrap: wrap; list-style: none; margin: var(--space-6) 0 0; padding: 0;
}
.loop-step{
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-micro); font-weight: 600; color: var(--text-tertiary);
  white-space: nowrap;
}
.loop-step i{
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-200);
}
.loop-step--1{ animation: loop-step1 14s linear infinite; }
.loop-step--2{ animation: loop-step2 14s linear infinite; }
.loop-step--3{ animation: loop-step3 14s linear infinite; }
.loop-step--4{ animation: loop-step4 14s linear infinite; }
.loop-step--1 i{ animation: loop-step1-dot 14s linear infinite; }
.loop-step--2 i{ animation: loop-step2-dot 14s linear infinite; }
.loop-step--3 i{ animation: loop-step3-dot 14s linear infinite; }
.loop-step--4 i{ animation: loop-step4-dot 14s linear infinite; }
@keyframes loop-step1{ 0%,4%{color:var(--text-tertiary);} 6%,16%{color:var(--blue-600);} 18%,100%{color:var(--text-tertiary);} }
@keyframes loop-step2{ 0%,16%{color:var(--text-tertiary);} 18%,39%{color:var(--blue-600);} 41%,100%{color:var(--text-tertiary);} }
@keyframes loop-step3{ 0%,39%{color:var(--text-tertiary);} 41%,59%{color:var(--blue-600);} 61%,100%{color:var(--text-tertiary);} }
@keyframes loop-step4{ 0%,59%{color:var(--text-tertiary);} 61%,96%{color:var(--blue-600);} 100%{color:var(--text-tertiary);} }
@keyframes loop-step1-dot{ 0%,4%{background:var(--ink-200);} 6%,16%{background:var(--blue-600);} 18%,100%{background:var(--success-500);} }
@keyframes loop-step2-dot{ 0%,16%{background:var(--ink-200);} 18%,39%{background:var(--blue-600);} 41%,100%{background:var(--success-500);} }
@keyframes loop-step3-dot{ 0%,39%{background:var(--ink-200);} 41%,59%{background:var(--blue-600);} 61%,100%{background:var(--success-500);} }
@keyframes loop-step4-dot{ 0%,59%{background:var(--ink-200);} 61%,96%{background:var(--blue-600);} 96.5%,100%{background:var(--ink-200);} }

/* ---- Small screens: tighten the stage ---- */
@media (max-width: 560px){
  .loop-stage{ min-height: 340px; }
  .loop-sig{ font-size: 1.45rem; }
  .loop-hash{ font-size: 9px; top: calc(56% + 88px); }
  .loop-seal__svg{ width: 78px; height: 78px; }
  .loop-steps{ gap: var(--space-4); }
  .loop-status{ min-width: 0; }
}

/* ---- Reduced motion: freeze the loop at its finished, sealed state ---- */
@media (prefers-reduced-motion: reduce){
  .loop-live-dot,
  .loop-chip, .loop-field, .loop-fill, .loop-sig, .loop-seal,
  .loop-hash__reveal, .loop-verified, .loop-verified__check,
  .loop-step, .loop-step i{ animation: none !important; }
  .loop-field, .loop-fill{ opacity: 1; transform: none; }
  .loop-field--sig{ border-color: var(--success-500); background: var(--success-50); }
  .loop-sig{ clip-path: none; }
  .loop-seal{ opacity: 1; transform: rotate(-8deg); }
  .loop-hash__reveal{ clip-path: none; opacity: 1; }
  .loop-verified{ opacity: 1; transform: none; }
  .loop-verified__check{ stroke-dashoffset: 0; }
  .loop-chip--sealed{ opacity: 1; }
  .loop-step{ color: var(--text-secondary); }
  .loop-step i{ background: var(--success-500); }
}

/* ---- Mini plan cards (pricing teaser, DS product-page style) ---- */
.mini-plan-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); max-width: 1020px; margin-inline: auto; }
@media (max-width: 900px){ .mini-plan-grid{ grid-template-columns: minmax(0,1fr); max-width: 460px; } }
.mini-plan{ display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); position: relative; text-align: left; }
.mini-plan--featured{ border-color: var(--blue-600); border-width: 2px; }
.mini-plan .tier-badge{ position: absolute; top: -13px; left: 22px; }
.mini-plan__name{ font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4); }
.mini-plan__price{ font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; letter-spacing: var(--tracking-h); }
.mini-plan__price span{ font-family: var(--font-sans); font-size: var(--text-micro); font-weight: 500; color: var(--text-tertiary); }
.mini-plan__line{ font-size: var(--text-small); color: var(--text-secondary); flex: 1; }
.mini-plan .btn{ margin-top: var(--space-4); }

/* ---- "The day it matters" — dispute comparison on the dark band ---- */
.dispute-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); align-items: start; }
@media (max-width: 860px){ .dispute-grid{ grid-template-columns: minmax(0,1fr); } }
.dispute-card__step{
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: rgba(255,255,255,0.7); margin-bottom: var(--space-3);
}
.dispute-clause{ font-size: 15px; line-height: 1.6; color: var(--ink-900); }
.dispute-mark{ background: var(--danger-50); color: var(--danger-700); border-radius: 4px; padding: 1px 6px; font-weight: 700; }
.dispute-mark.is-ok{ background: var(--success-50); color: var(--success-700); }
.dispute-hash{
  margin-top: var(--space-4); font-family: 'SF Mono', Menlo, ui-monospace, monospace;
  font-size: 11.5px; color: var(--text-tertiary); word-break: break-all;
}
.dispute-verdict{
  margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--ink-100);
  font-size: var(--text-small); font-weight: 600; line-height: 1.5;
}
.dispute-verdict.is-bad{ color: var(--danger-700); }
.dispute-verdict.is-good{ color: var(--success-700); }
.dispute-close{ margin-top: var(--space-8); max-width: 640px; color: rgba(255,255,255,0.9); }

/* ---- "Don't trust us. Check us." honesty cards ---- */
.trust-honest{ position: relative; padding-top: var(--space-8); }
.trust-honest__mark{
  position: absolute; top: var(--space-5); left: var(--space-6);
  font-family: var(--font-display); font-size: var(--text-micro); font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); color: var(--blue-600);
}
.trust-honest h3{ font-size: var(--text-h4); }
.trust-honest p{ margin-top: var(--space-3); font-size: var(--text-small); color: var(--text-secondary); }
.trust-honest__foot{
  margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--border-hairline);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
  max-width: 1000px;
}
.trust-honest__foot p{ font-size: var(--text-small); color: var(--text-secondary); max-width: 620px; }

/* The seal stamp carries the KuduDoc mark rather than a generic shield —
   it's our seal, so it should look like ours. */
.loop-seal__mark{ overflow: visible; }
.loop-seal__mark .logo-mark__bar{ stroke-width: 7; }
@media (max-width: 560px){ .loop-seal .loop-seal__mark{ width: 24px; height: 24px; } }