/* Shared marketing / SEO landing styles - One Ticket product chrome */
@import url('/ot-layout.css');

.mkt-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--ot-bg);
  color:var(--ot-text);
  font-family:'Figtree',system-ui,sans-serif;
}
/* The measure sits on each section rather than on <main>, so a section that is
   a coloured band can reach the full width of the window while its text still
   lines up with every other page. Capping <main> made the hero's wash a 1000px
   column with white either side of it. */
.mkt-main{flex:1;width:100%;}
.mkt-main > *{width:100%;max-width:var(--ot-measure);margin-left:auto;margin-right:auto;box-sizing:border-box;}
/* The two that carry a background of their own. No 100vw: this is a block in
   normal flow, so 100% already is the window, and vw would add the scrollbar's
   width and scroll the page sideways. */
.mkt-main > .mkt-hero,
.mkt-main > .mkt-band{max-width:none;}

/* -- Hero -- */
.mkt-hero{
  position:relative;
  padding:88px 32px 64px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 55% 55% at 70% 0%, rgba(124,58,237,0.10) 0%, transparent 58%),
    linear-gradient(180deg, #f5f3ff 0%, #ffffff 72%);
}
.mkt-hero-inner{max-width:760px;margin:0 auto;position:relative;z-index:1;}
.mkt-hero h1{
  font-size:48px;
  line-height:1.08;
  font-weight:800;
  margin:0 0 16px;
  letter-spacing:-1.1px;
}
.mkt-hero .mkt-lead{
  font-size:18px;
  color:var(--ot-muted);
  margin:0 0 22px;
  max-width:48ch;
  line-height:1.55;
}
.mkt-kicker{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ot-muted);
  border:none;
  padding:0;
  border-radius:0;
  margin:0 0 18px;
  background:transparent;
}
.mkt-brand-line{
  font-size:15px;
  font-weight:700;
  color:var(--ot-muted);
  margin:0 0 26px;
}

/* Split hero (optional) */
.mkt-hero.is-split .mkt-hero-inner{
  max-width:var(--ot-measure);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:48px 64px;
  align-items:center;
}
.mkt-hero-visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:320px;
}

/* -- Sections -- */
.mkt-section{
  padding:64px 32px;
  /* The measure, like every other page. It was 1080 - 80px of its own, which is
     the kind of number that makes two pages side by side look misaligned
     without anyone being able to say why. */
  max-width:var(--ot-measure);
  margin:0 auto;
}
.mkt-section h2{
  font-size:32px;
  font-weight:800;
  margin:0 0 12px;
  letter-spacing:-0.5px;
}
.mkt-section h3{
  font-size:17px;
  font-weight:800;
  margin:0 0 8px;
  letter-spacing:-0.15px;
}
.mkt-section p{
  color:var(--ot-muted);
  font-size:15.5px;
  line-height:1.6;
  margin:0 0 14px;
}
.mkt-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.mkt-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}

/* -- Cards / sheets -- */
.mkt-card{
  position:relative;
  background:var(--ot-surface-2);
  border:1px solid var(--ot-border);
  border-radius:20px;
  padding:26px 26px 24px;
  overflow:hidden;
  box-shadow:var(--ot-shadow);
}
.mkt-card.is-accent{
  border-color:var(--ot-border-strong);
  background:linear-gradient(160deg, #f5f3ff 0%, var(--ot-surface) 70%);
}
.mkt-card.is-accent::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(124,58,237,0.06) 48%,transparent 62%);
  background-size:220% 100%;
  animation:mkt-sheen 5.8s ease-in-out infinite;
}
.mkt-card h3,
.mkt-card p,
.mkt-card ul{position:relative;z-index:1;}

/* Settlement / product sheet */
.mkt-sheet{
  position:relative;
  width:min(100%,360px);
  border-radius:22px;
  padding:24px 24px 20px;
  background:linear-gradient(155deg, #ffffff 0%, #faf5ff 52%, #f5f3ff 100%);
  border:1px solid var(--ot-border-strong);
  box-shadow:var(--ot-shadow), inset 0 1px 0 rgba(255,255,255,0.8);
  overflow:hidden;
  animation:mkt-float 6.8s ease-in-out infinite;
}
.mkt-sheet::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(124,58,237,0.08) 48%,transparent 62%);
  background-size:220% 100%;
  animation:mkt-sheen 5.2s ease-in-out infinite;
}
.mkt-sheet-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin:0 0 18px;
  position:relative;
  z-index:1;
}
.mkt-sheet-top > span,
.mkt-sheet-kicker{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ot-link);
  margin:0 0 6px;
}
.mkt-sheet-top strong{
  display:block;
  font-size:17px;
  font-weight:800;
  color:var(--ot-text);
  letter-spacing:-0.2px;
}
.mkt-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  color:var(--ot-success);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(4,120,87,0.25);
  background:rgba(4,120,87,0.08);
}
.mkt-live i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ot-success);
  animation:mkt-pulse 2.2s ease-out infinite;
}
.mkt-sheet-rows{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  margin:0 0 14px;
}
.mkt-sheet-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--ot-border);
  font-size:14px;
  color:var(--ot-muted);
}
.mkt-sheet-row:last-child{border-bottom:none;}
.mkt-sheet-row strong{
  font-weight:700;
  color:var(--ot-text);
  font-variant-numeric:tabular-nums;
}
.mkt-sheet-row.is-zero{color:var(--ot-success);}
.mkt-sheet-row.is-zero strong{color:var(--ot-success);}
.mkt-sheet-row.is-total{
  padding-top:14px;
  margin-top:2px;
  border-top:1px solid var(--ot-border-strong);
  border-bottom:none;
  font-size:15px;
  font-weight:700;
  color:var(--ot-text);
}
.mkt-sheet-row.is-total strong{
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.4px;
  color:var(--ot-text);
}
.mkt-sheet-row.is-muted{font-size:13px;color:var(--ot-faint);}
.mkt-sheet-row.is-muted strong{color:var(--ot-link);font-weight:600;}
.mkt-sheet-foot{
  position:relative;
  z-index:1;
  margin-top:6px;
  padding:12px 14px;
  border-radius:14px;
  background:var(--ot-accent-soft);
  border:1px solid var(--ot-border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.mkt-sheet-foot span{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ot-muted);
}
.mkt-sheet-foot strong{font-size:15px;font-weight:800;color:var(--ot-text);}
.mkt-sheet-foot small{
  display:block;
  font-size:12px;
  font-weight:500;
  color:var(--ot-muted);
  margin-top:2px;
}
.mkt-watermark{
  position:absolute;
  z-index:0;
  font-size:clamp(140px,22vw,210px);
  font-weight:800;
  letter-spacing:-0.08em;
  line-height:0.85;
  color:rgba(124,58,237,0.08);
  text-shadow:none;
  user-select:none;
  pointer-events:none;
  transform:translate(-8%,-8%);
  animation:mkt-breathe 7s ease-in-out infinite;
}

/* -- Lists (no green check spam) -- */
.mkt-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--ot-muted);
  font-size:14.5px;
  font-weight:600;
}
.mkt-list li{padding-left:16px;position:relative;}
.mkt-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--ot-accent);
}
.mkt-card.is-accent .mkt-list li::before{background:var(--ot-accent);}

/* -- Buttons -- */
.mkt-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.mkt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 24px;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  box-sizing:border-box;
}
.mkt-btn-primary{background:var(--ot-cta);color:var(--ot-cta-ink);}
.mkt-btn-primary:hover{background:var(--ot-cta-hover);color:var(--ot-cta-ink);}
.mkt-btn-secondary{
  background:transparent;
  color:var(--ot-link);
  border:1px solid var(--ot-border-strong);
}
.mkt-btn-secondary:hover{border-color:var(--ot-accent);color:var(--ot-link-hover);}

/* -- Clean tier / data tables -- */
.mkt-table-wrap{
  overflow-x:auto;
  border:1px solid var(--ot-border);
  border-radius:20px;
  background:var(--ot-surface-2);
  box-shadow:var(--ot-shadow);
}
.mkt-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  min-width:480px;
}
.mkt-table th,
.mkt-table td{
  padding:16px 20px;
  text-align:left;
  border-bottom:1px solid var(--ot-border);
}
.mkt-table th{
  background:var(--ot-surface-2);
  color:var(--ot-muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:700;
}
.mkt-table td{
  color:var(--ot-text);
  font-weight:600;
}
.mkt-table td:last-child{
  color:var(--ot-link);
  font-variant-numeric:tabular-nums;
}
.mkt-table tr:last-child td{border-bottom:none;}
.mkt-table tbody tr:hover td{background:var(--ot-accent-soft);}

/* -- FAQ -- */
.mkt-faq details{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--ot-border);
  border-radius:0;
  padding:18px 0;
  margin:0;
}
.mkt-faq summary{
  cursor:pointer;
  font-weight:700;
  font-size:16px;
  color:var(--ot-text);
  list-style:none;
}
.mkt-faq summary::-webkit-details-marker{display:none;}
.mkt-faq summary::after{
  content:"+";
  float:right;
  color:var(--ot-link);
  font-weight:800;
}
.mkt-faq details[open] summary::after{content:"–";}
.mkt-faq details p{
  margin:10px 0 0;
  color:var(--ot-muted);
  font-size:15px;
  line-height:1.6;
  max-width:70ch;
}

/* -- Steps -- */
.mkt-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.mkt-step-n{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--ot-accent-soft);
  color:var(--ot-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  margin-bottom:10px;
}

/* -- Closing band -- */
.mkt-band{
  position:relative;
  padding:72px max(32px, calc((100% - var(--ot-measure)) / 2));
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 50% 60% at 50% 0%, rgba(124,58,237,0.10) 0%, transparent 55%),
    var(--ot-bg);
  border-top:1px solid var(--ot-border);
  border-bottom:1px solid var(--ot-border);
}
.mkt-band h2{
  font-size:34px;
  font-weight:800;
  margin:0 0 10px;
  letter-spacing:-0.6px;
}
.mkt-band p{color:var(--ot-muted);margin:0 auto 22px;max-width:42ch;text-align:center;}
.mkt-band .mkt-cta-row{justify-content:center;}

/* -- Links / notes -- */
.mkt-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:8px;}
.mkt-links a{
  color:var(--ot-link);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
}
.mkt-links a:hover{color:var(--ot-link-hover);text-decoration:underline;}
.mkt-note{font-size:13.5px;color:var(--ot-muted);line-height:1.55;}

/* -- Fee calculator sheet -- */
.mkt-calc{
  position:relative;
  background:var(--ot-surface-2);
  border:1px solid var(--ot-border-strong);
  border-radius:22px;
  padding:28px;
  overflow:hidden;
  box-shadow:var(--ot-shadow);
}
.mkt-calc::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(124,58,237,0.05) 48%,transparent 62%);
  background-size:220% 100%;
  animation:mkt-sheen 6s ease-in-out infinite;
}
.mkt-calc > *{position:relative;z-index:1;}
.mkt-calc label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--ot-muted);
}
.mkt-calc input,
.mkt-calc select{
  background:var(--ot-input-bg);
  border:1px solid var(--ot-border-strong);
  color:var(--ot-text);
  padding:11px 13px;
  font-size:15px;
  border-radius:8px;
  font-family:inherit;
}
.mkt-calc-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  margin-bottom:22px;
}
.mkt-calc-result{
  background:rgba(4,120,87,0.08);
  border:1px solid rgba(4,120,87,0.25);
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:18px;
}
.mkt-calc-result strong{
  display:block;
  font-size:22px;
  color:var(--ot-success);
  margin-bottom:4px;
}
.mkt-calc-result span{color:var(--ot-muted);font-size:14px;}

/* -- Motion -- */
@keyframes mkt-sheen{
  0%,55%,100%{background-position:120% 0}
  70%{background-position:-20% 0}
}
@keyframes mkt-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes mkt-pulse{
  0%{box-shadow:0 0 0 0 rgba(4,120,87,0.35)}
  70%{box-shadow:0 0 0 8px rgba(4,120,87,0)}
  100%{box-shadow:0 0 0 0 rgba(4,120,87,0)}
}
@keyframes mkt-breathe{
  0%,100%{opacity:0.4;transform:translate(-8%,-8%) scale(1)}
  50%{opacity:0.65;transform:translate(-8%,-10%) scale(1.02)}
}

@media (max-width:800px){
  .mkt-hero{padding:56px var(--ot-gutter, 16px) 44px;}
  .mkt-hero h1{font-size:34px;letter-spacing:-0.7px;}
  .mkt-hero .mkt-lead{font-size:16.5px;}
  .mkt-hero.is-split .mkt-hero-inner{grid-template-columns:1fr;gap:36px;}
  .mkt-hero-visual{min-height:280px;}
  .mkt-watermark{font-size:120px;}
  .mkt-section{padding:48px var(--ot-gutter, 16px);}
  .mkt-section h2{font-size:26px;}
  .mkt-grid-2,
  .mkt-grid-3,
  .mkt-steps,
  .mkt-calc-grid{grid-template-columns:1fr;}
  .mkt-band{padding:56px var(--ot-gutter, 16px);}
  .mkt-band h2{font-size:28px;}
  .mkt-cta-row .mkt-btn{width:100%;}
  .mkt-table th,
  .mkt-table td{padding:14px;}
}

@media (prefers-reduced-motion:reduce){
  .mkt-card.is-accent::after,
  .mkt-sheet,
  .mkt-sheet::after,
  .mkt-calc::after,
  .mkt-live i,
  .mkt-watermark{animation:none;}
}