/* webydo.com design system — "the designer's canvas" */
:root{
  --ink:#0B0B0C;
  --raise:#141317;
  --raise-2:#1B1A20;
  --line:rgba(244,244,242,.09);
  --line-strong:rgba(244,244,242,.16);
  --text:#F4F4F2;
  --muted:#A5A4AB;
  --gold:#FECA2C;
  --gold-hover:#FFD75C;
  --paper:#F5F3EC;
  --paper-ink:#141313;
  --paper-muted:#5C5A54;
  --radius:14px;
  --container:1200px;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img,video,iframe{max-width:100%;height:auto;}
a{color:var(--gold);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em;color:var(--text);}
h1{font-size:clamp(2.6rem,6vw,4.6rem);}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);}
h3{font-size:clamp(1.25rem,2vw,1.55rem);}
h4{font-size:1.1rem;font-family:var(--font-body);font-weight:600;letter-spacing:0;}
p{margin:0 0 1.1em;}
.lead{font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--muted);line-height:1.65;max-width:46em;}
.eyebrow{font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px;margin:0 0 22px;}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);opacity:.7;flex:0 0 auto;}
.center .eyebrow{justify-content:center;}
.center .eyebrow::after{content:"";width:34px;height:1px;background:var(--gold);opacity:.7;flex:0 0 auto;}
.dim-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--muted);}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 28px;}
.section{padding:108px 0;position:relative;}
.section--tight{padding:72px 0;}
.section--hero{padding:132px 0 96px;overflow:hidden;}
.section--alt{background:var(--raise);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section--paper{background:var(--paper);color:var(--paper-ink);}
.section--paper h1,.section--paper h2,.section--paper h3,.section--paper h4{color:var(--paper-ink);}
.section--paper .lead,.section--paper p{color:var(--paper-muted);}
.section--paper .eyebrow{color:#8A6D00;}
.section--paper .eyebrow::before,.center.section--paper .eyebrow::after{background:#8A6D00;}
.center{text-align:center;}
.center .lead{margin-left:auto;margin-right:auto;}
.section-head{max-width:820px;margin-bottom:64px;}
.center .section-head{margin-left:auto;margin-right:auto;}

/* canvas guides: faint vertical hairlines at container edges */
.guides{position:absolute;inset:0;pointer-events:none;}
.guides::before,.guides::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);}
.guides::before{left:max(28px,calc((100% - var(--container))/2));}
.guides::after{right:max(28px,calc((100% - var(--container))/2));}

/* hero canvas grid backdrop */
.canvas-grid{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(244,244,242,.10) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse 82% 70% at 50% 32%,#000 0%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse 82% 70% at 50% 32%,#000 0%,transparent 72%);}

/* ---------- signature: the selection frame ---------- */
.select-frame{position:relative;display:inline-block;padding:.04em .12em;color:var(--gold);}
.select-frame::before{content:"";position:absolute;inset:0;border:1.5px solid var(--gold);border-radius:3px;}
.select-frame .h{position:absolute;width:9px;height:9px;background:var(--gold);border:1.5px solid var(--ink);border-radius:1px;}
.select-frame .h.tl{top:-5px;left:-5px;}
.select-frame .h.tr{top:-5px;right:-5px;}
.select-frame .h.bl{bottom:-5px;left:-5px;}
.select-frame .h.br{bottom:-5px;right:-5px;}
.select-frame .tag{position:absolute;top:-2.15em;right:-4px;font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.1em;color:var(--ink);background:var(--gold);padding:2px 8px;border-radius:3px;white-space:nowrap;}
@media(max-width:768px){.select-frame .tag{display:none;}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1;padding:17px 30px;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none !important;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;}
.btn:active{transform:translateY(1px);}
.btn-gold{background:var(--gold);color:#111 !important;}
.btn-gold:hover{background:var(--gold-hover);}
.btn-ghost{background:transparent;color:var(--text) !important;border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold) !important;}
.btn-ink{background:#111;color:#fff !important;border-color:#111;}
.btn-ink:hover{background:#242424;}
.btn-lg{padding:20px 38px;font-size:1.06rem;}
.btn-sm{padding:11px 20px;font-size:.9rem;border-radius:8px;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.center .btn-row{justify-content:center;}
.btn .arr{font-family:var(--font-mono);font-weight:400;}

/* ---------- cards + grids ---------- */
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1020px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
.card{background:var(--raise);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;transition:border-color .2s ease,transform .2s ease;}
.card:hover{border-color:rgba(254,202,44,.38);}
.card h3{margin-top:18px;}
.card p{color:var(--muted);margin-bottom:0;font-size:.98rem;}
.card .k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}
.card-icon{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--gold);}
.card-icon svg{width:22px;height:22px;}
.card--link{display:block;color:inherit;text-decoration:none !important;}
.section--paper .card{background:#fff;border-color:rgba(20,19,19,.1);}
.section--paper .card p{color:var(--paper-muted);}

/* split rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:40px;}}
.split .media{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--raise);}
.split .media img{display:block;width:100%;height:auto;}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.stat{background:var(--ink);padding:34px 28px;}
.stat .n{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,3.4vw,2.9rem);color:var(--gold);line-height:1;}
.stat .l{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px;}

/* checklist */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:13px;}
.checks li{padding-left:32px;position:relative;color:var(--muted);}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border:1.5px solid var(--gold);border-radius:4px;}
.checks li::after{content:"";position:absolute;left:4.5px;top:.62em;width:7px;height:4px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg);}
.checks strong{color:var(--text);font-weight:600;}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;align-items:stretch;}
.plan{background:var(--raise);border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;display:flex;flex-direction:column;position:relative;}
.plan .name{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.plan .price{font-family:var(--font-display);font-weight:600;font-size:2.7rem;color:var(--text);line-height:1;margin:18px 0 2px;}
.plan .price .cur{font-size:1.2rem;vertical-align:super;margin-right:2px;}
.plan .per{font-size:.85rem;color:var(--muted);margin-bottom:20px;}
.plan .blurb{font-size:.9rem;line-height:1.5;color:var(--muted);opacity:.82;margin:0 0 20px;min-height:2.7em;}
.plan ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px;font-size:.92rem;color:var(--muted);}
.plan ul li{padding-left:24px;position:relative;}
.plan ul li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;background:var(--gold);border-radius:1px;}
.plan .btn{margin-top:auto;}
.plan--featured{border-color:var(--gold);background:var(--raise-2);}
.plan--featured::before{content:"";position:absolute;inset:-1px;border:1.5px solid var(--gold);border-radius:var(--radius);pointer-events:none;}
.plan--featured .ph{position:absolute;width:9px;height:9px;background:var(--gold);border:1.5px solid var(--ink);border-radius:1px;z-index:1;}
.plan--featured .ph.tl{top:-5px;left:-5px;}
.plan--featured .ph.tr{top:-5px;right:-5px;}
.plan--featured .ph.bl{bottom:-5px;left:-5px;}
.plan--featured .ph.br{bottom:-5px;right:-5px;}
.plan--featured .sel-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:.64rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#111;background:var(--gold);padding:4px 12px;border-radius:4px;white-space:nowrap;}

/* billing period toggle (Monthly / Annual) */
.billing-toggle{display:inline-flex;align-items:center;gap:4px;background:var(--raise);border:1px solid var(--line-strong);border-radius:12px;padding:5px;margin-bottom:44px;}
.billing-toggle button{font-family:var(--font-body);font-weight:600;font-size:.94rem;color:var(--muted);background:transparent;border:0;border-radius:9px;padding:11px 22px;cursor:pointer;display:inline-flex;align-items:center;transition:background .15s ease,color .15s ease;}
.billing-toggle button .save{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;color:var(--gold);margin-left:9px;}
.plans-wrap[data-billing="monthly"] .billing-toggle button[data-billing-option="monthly"],
.plans-wrap[data-billing="annual"] .billing-toggle button[data-billing-option="annual"]{background:var(--gold);color:#111;}
.plans-wrap[data-billing="annual"] .billing-toggle button[data-billing-option="annual"] .save{color:#6B5200;}
.plan .price-a,.plan .per-a{display:none;}
.plans-wrap[data-billing="annual"] .plan .price-a,.plans-wrap[data-billing="annual"] .plan .per-a{display:block;}
.plans-wrap[data-billing="annual"] .plan .price-m,.plans-wrap[data-billing="annual"] .plan .per-m{display:none;}

/* full price-list tables */
.price-table{width:100%;border-collapse:collapse;font-size:.94rem;}
.price-table th{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:500;padding:14px 16px;border-bottom:1px solid var(--line-strong);}
.price-table td{padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:top;}
.price-table td:first-child{color:var(--text);font-weight:500;white-space:nowrap;}
.price-table .pr{font-family:var(--font-mono);color:var(--gold);white-space:nowrap;}
.price-table td:last-child{color:var(--muted);font-size:.9rem;}
.price-table .pt-desc{display:block;margin-top:6px;font-size:.82rem;line-height:1.5;color:var(--muted);opacity:.66;max-width:46ch;}
.price-table tr:hover td{background:rgba(254,202,44,.03);}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--raise);}
.table-wrap .price-table td,.table-wrap .price-table th{padding-left:22px;padding-right:22px;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--gold);color:#111;border-radius:20px;padding:76px 56px;position:relative;overflow:hidden;}
.cta-band h2{color:#111;max-width:14em;}
.cta-band p{color:rgba(17,17,17,.72);max-width:36em;}
.cta-band .dim-label{color:rgba(17,17,17,.55);}
.cta-band::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border:1.5px solid rgba(17,17,17,.16);border-radius:24px;transform:rotate(12deg);pointer-events:none;}
@media(max-width:680px){.cta-band{padding:52px 28px;}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:860px;margin:0 auto;}
.faq details{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:0 26px;}
.faq details[open]{border-color:rgba(254,202,44,.35);}
.faq summary{cursor:pointer;font-weight:600;font-size:1.02rem;padding:22px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--gold);font-size:1.2rem;flex:0 0 auto;transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .a{padding:0 0 24px;color:var(--muted);}

/* ---------- prose (terms, privacy, articles) ---------- */
.prose{max-width:800px;margin:0 auto;}
.prose h2{font-size:1.7rem;margin-top:2.2em;}
.prose h3{font-size:1.25rem;margin-top:1.8em;}
.prose p,.prose li{color:var(--muted);}
.prose ul,.prose ol{padding-left:1.4em;}
.prose strong{color:var(--text);}

/* ---------- forms ---------- */
.form{display:grid;gap:18px;max-width:560px;}
.form label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px;}
.form input,.form textarea,.form select{width:100%;background:var(--raise);border:1px solid var(--line-strong);border-radius:10px;color:var(--text);font-family:var(--font-body);font-size:1rem;padding:15px 16px;transition:border-color .15s ease;}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--gold);}
.form textarea{min-height:140px;resize:vertical;}
.form ::placeholder{color:rgba(165,164,171,.55);}

/* ---------- logo / proof strip ---------- */
.proof{display:flex;flex-wrap:wrap;gap:18px 44px;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.proof .sep{width:5px;height:5px;background:var(--gold);border-radius:1px;}

/* ---------- footer ---------- */
#site-footer{border-top:1px solid var(--line);background:#0A0A0B;padding:84px 0 40px;font-size:.95rem;}
#site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:44px;}
@media(max-width:1020px){#site-footer .cols{grid-template-columns:1fr 1fr 1fr;}}
@media(max-width:680px){#site-footer .cols{grid-template-columns:1fr 1fr;}}
#site-footer .brand p{color:var(--muted);font-size:.92rem;max-width:26em;}
#site-footer h4{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;}
#site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
#site-footer ul a{color:var(--text);opacity:.82;font-size:.92rem;}
#site-footer ul a:hover{color:var(--gold);opacity:1;text-decoration:none;}
#site-footer .base{margin-top:64px;padding-top:28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;color:var(--muted);font-size:.85rem;}
#site-footer .base nav{display:flex;flex-wrap:wrap;gap:24px;}
#site-footer .base a{color:var(--muted);}
#site-footer .base a:hover{color:var(--gold);}

/* ---------- studio canvas mock (homepage signature visual) ---------- */
.studio-mock{background:var(--raise);border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;font-family:var(--font-mono);font-size:.66rem;color:var(--muted);}
.studio-mock .bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);}
.studio-mock .bar i{width:9px;height:9px;border-radius:50%;background:rgba(244,244,242,.16);display:block;}
.studio-mock .bar .url{margin-left:10px;background:rgba(244,244,242,.06);border-radius:6px;padding:3px 12px;letter-spacing:.08em;}
.studio-mock .stage{display:grid;grid-template-columns:120px 1fr;min-height:300px;}
.studio-mock .panel{border-right:1px solid var(--line);padding:14px 12px;display:grid;gap:9px;align-content:start;}
.studio-mock .panel .row{display:flex;align-items:center;gap:7px;white-space:nowrap;}
.studio-mock .panel .row::before{content:"";width:7px;height:7px;border:1px solid var(--muted);border-radius:2px;flex:0 0 auto;}
.studio-mock .panel .row.on{color:var(--gold);}
.studio-mock .panel .row.on::before{background:var(--gold);border-color:var(--gold);}
.studio-mock .canvas{position:relative;padding:26px;background-image:radial-gradient(rgba(244,244,242,.07) 1px,transparent 1px);background-size:18px 18px;}
.studio-mock .blk{background:rgba(244,244,242,.07);border-radius:6px;margin-bottom:12px;}
.studio-mock .blk.sel{position:relative;background:rgba(254,202,44,.1);border-radius:6px;outline:1.5px solid var(--gold);}
.studio-mock .blk.sel .h{position:absolute;width:7px;height:7px;background:var(--gold);border:1px solid var(--ink);}
.studio-mock .blk.sel .h.tl{top:-4px;left:-4px;}.studio-mock .blk.sel .h.tr{top:-4px;right:-4px;}
.studio-mock .blk.sel .h.bl{bottom:-4px;left:-4px;}.studio-mock .blk.sel .h.br{bottom:-4px;right:-4px;}
.studio-mock .blk.sel .lab{position:absolute;top:-20px;left:0;background:var(--gold);color:#111;padding:1px 8px;border-radius:3px;letter-spacing:.08em;white-space:nowrap;}
.studio-mock .cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media(max-width:680px){.studio-mock .stage{grid-template-columns:1fr;}.studio-mock .panel{display:none;}}

/* hero trio strip */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px;}
@media(max-width:680px){.trio{grid-template-columns:1fr;}}
.trio .t{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:24px 22px;}
.trio .t .k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.24em;color:var(--gold);}
.trio .t .v{margin-top:8px;color:var(--muted);font-size:.95rem;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .btn,.card{transition:none;}
}

/* hero entrance */
@keyframes wy-rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.hero-seq>*{animation:wy-rise .7s ease both;}
.hero-seq>*:nth-child(2){animation-delay:.08s;}
.hero-seq>*:nth-child(3){animation-delay:.16s;}
.hero-seq>*:nth-child(4){animation-delay:.24s;}
.hero-seq>*:nth-child(5){animation-delay:.32s;}
@media(prefers-reduced-motion:reduce){.hero-seq>*{animation:none;}}

/* webydo-responsive-addon-fix:START */
/* Narrow-phone safety: keep the injected cookie banner + a11y toolbar/statement inside the
   viewport so they never force horizontal scroll on phones < 388px. Higher specificity + !important
   so it beats the addons' own inline id rules regardless of source order. */
html, body { overflow-x: clip !important; }
@media (max-width: 480px) {
  body #cookie-consent-banner,
  body #cookie-consent-banner.show {
    left: 0 !important; right: 0 !important; width: 100% !important;
    max-width: 100vw !important; box-sizing: border-box !important;
  }
  body #cookie-consent-banner * { max-width: 100% !important; box-sizing: border-box !important; }
  body #a11y-toolbar,
  body #a11y-toolbar-header,
  body #a11y-toolbar-content { max-width: 100vw !important; box-sizing: border-box !important; }
  body #a11y-statement-modal,
  body #a11y-statement-content { max-width: 100vw !important; box-sizing: border-box !important; }
  body .webydo-popup-overlay > *,
  body [class*="popup"] > * { max-width: 94vw !important; box-sizing: border-box !important; }
}
/* webydo-responsive-addon-fix:END */

/* webydo-reveal-visibility-fix:START */
/* scroll-reveal JS is absent on published pages; ensure reveal content is always visible */
.reveal,[class*="reveal"]{opacity:1 !important;transform:none !important;visibility:visible !important;}
/* webydo-reveal-visibility-fix:END */