/* padrinowebsites.com.
   Palette matches the app's .padrino theme (accounting-app apps/accounting/app/
   globals.css) and the padrino.ai site: lavender-grey neutrals, ink #1d1b2b,
   indigo #4f46e5, Geist only (no serif accent words: feedback_no_vibe_coded_tells).
   House rules: no pills or tinted capsules around words, no icon tiles, no
   tinted alert boxes. Buttons are squared-off, not capsules. */

:root {
  --bg:        #f7f7fb;
  --panel:     #eeeef5;
  --panel-2:   #e5e4ef;
  --card:      #ffffff;
  --ink:       #1d1b2b;
  --body:      #4a4860;
  --muted:     #6c6a7d;
  --line:      #e2e1ec;
  --accent:    #4f46e5;
  --accent-2:  #4338ca;
  --live:      #16a34a;
  --danger:    #b42318;
  --dark:      #1d1b2b;
  --dark-line: #37344d;

  --sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1200px;
  --gutter: 16px;
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow: 0 1px 2px rgba(29,27,43,.04), 0 12px 40px rgba(29,27,43,.08);
  --shadow-lg: 0 2px 6px rgba(29,27,43,.05), 0 30px 80px rgba(29,27,43,.14);
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font: 400 17px/1.6 var(--sans); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 720px) { body { font-size: 18px; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--ink); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; margin: 0; }
h2 { font-size: clamp(34px, 5.2vw, 60px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.025em; line-height: 1.15; }
p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
strong { color: var(--ink); font-weight: 600; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 13px; height: 13px; }

/* Buttons: squared-off, never capsules. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: var(--r-sm);
  font: 500 16px/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { height: 54px; padding: 0 26px; font-size: 17px; }
.btn-sm { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
.btn-soft { background: var(--panel-2); color: var(--ink); }
.btn-soft:hover { background: #dcdbe9; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #f1f1f7; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.label { font-size: 14px; font-weight: 500; color: var(--accent); margin-bottom: 16px; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--body); margin-top: 20px; max-width: 42em; }
.section { padding-block: 80px; }
.section-tight { padding-block: 24px 56px; }
@media (min-width: 900px) { .section { padding-block: 120px; } .section-tight { padding-block: 32px 80px; } }
.section-head { max-width: 860px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.inline-link { color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.inline-link:hover { color: var(--accent-2); }
.more-link { margin-top: 40px; }
.fineprint { font-size: 14px; color: var(--muted); margin-top: 24px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,247,251,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 28px; width: auto; }
.brand-sub { font-size: 17px; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; padding-left: 10px; border-left: 1px solid var(--line); line-height: 1.2; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > a { padding: 8px 12px; border-radius: 10px; font-size: 15px; color: var(--body); transition: color .2s, background .2s; }
.nav > a:hover, .nav > a[aria-current] { color: var(--ink); background: var(--panel); }
.nav-actions { display: flex; gap: 8px; margin-left: 12px; }
.nav-toggle { display: none; }
@media (max-width: 859px) {
  .nav-toggle {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background: var(--panel); border: 0; color: var(--ink); cursor: pointer;
  }
  .nav-toggle .icon-close { display: none; }
  .nav-open .nav-toggle .icon-open { display: none; }
  .nav-open .nav-toggle .icon-close { display: block; }
  .nav {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); padding: 12px var(--gutter) 24px; border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 40px rgba(29,27,43,.08);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease);
  }
  .nav-open .nav { transform: none; opacity: 1; pointer-events: auto; }
  .nav > a { font-size: 22px; padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
  .nav > a:hover, .nav > a[aria-current] { background: none; }
  .nav-actions { margin: 20px 0 0; }
  .nav-actions .btn { flex: 1; height: 50px; font-size: 16px; }
}

/* Hero */
.hero { padding-top: 56px; text-align: center; }
@media (min-width: 900px) { .hero { padding-top: 88px; } }
.hero h1 { font-size: clamp(42px, 8vw, 96px); letter-spacing: -0.045em; line-height: .98; max-width: 12em; margin: 0 auto; }
.hero-sub { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: var(--muted); max-width: 36em; margin: 28px auto 0; }
.hero .btn-row { justify-content: center; margin-top: 36px; }
.hero-left { text-align: left; }
.hero-left h1 { margin: 0; max-width: 13em; font-size: clamp(40px, 6.6vw, 80px); }
.hero-left .hero-sub { margin-left: 0; }
.hero-left .btn-row { justify-content: flex-start; }
@media (max-width: 519px) { .hero .btn-row .btn { flex: 1 1 100%; } }

/* Generated screenshots (site examples, booking flow) */
.shot { width: 100%; height: auto; box-shadow: var(--shadow); background: var(--panel-2); }
.shot-square { box-shadow: none; }

/* Panels and splits */
.panel { background: var(--panel); border-radius: var(--r-lg); padding: 28px 20px; }
@media (min-width: 720px) { .panel { padding: 56px; } }
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } }
/* Photos (feedback_photos_full_bleed): never rounded. On mobile they run
   edge to edge (out of the page gutter) and are cropped tall, zooming in
   rather than showing the desktop framing small. Example screenshots also go
   edge to edge on mobile but keep their aspect so no UI is cropped off. */
.photo { overflow: hidden; background: var(--panel-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-tall { aspect-ratio: 4 / 5; }
@media (max-width: 959px) {
  .photo { margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 4 / 5; }
  .ex .shot, .ex-row .shot { width: calc(100% + 2 * var(--gutter)); max-width: none; margin-inline: calc(-1 * var(--gutter)); box-shadow: none; }
  .ex figcaption { margin-top: 14px; }
}

/* Capabilities list: bare icons, no tiles. */
.caps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 22px; }
.caps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.caps .icon { color: var(--accent); margin-top: 4px; }
.caps p { font-size: 16px; margin-top: 4px; }

/* Steps */
.steps { list-style: none; padding: 0; display: grid; gap: 28px; margin: 56px 0 0; }
@media (min-width: 720px) { .steps { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { border-top: 1px solid var(--ink); padding-top: 18px; }
.step-n { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); }
.step h3 { font-size: 22px; margin: 14px 0 8px; }
.step p { font-size: 16px; }

/* Examples */
.ex-grid { display: grid; gap: 40px; margin-top: 56px; }
@media (min-width: 900px) { .ex-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.ex { margin: 0; }
.ex figcaption { font-size: 16px; margin-top: 18px; max-width: 34em; }
.ex-list { display: grid; gap: 72px; }
.ex-row { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .ex-row { grid-template-columns: 1fr 1.2fr; gap: 64px; } .ex-row:nth-child(even) .ex-copy { order: 2; } }
.ex-h { font-size: clamp(30px, 3.6vw, 44px); }

/* Sequences and options */
.seq { list-style: none; padding: 0; margin: 32px 0 0; border-top: 1px solid var(--line); }
.seq li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.seq-n { font-size: 14px; line-height: 1.9; color: var(--muted); font-variant-numeric: tabular-nums; }
.seq strong { display: block; }
.seq span { font-size: 16px; }
.options { display: grid; gap: 0; margin-top: 48px; border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .options { grid-template-columns: repeat(3, 1fr); } }
.option { padding: 24px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .option { border-bottom: 0; padding: 28px 28px 0 0; } }
.option p { font-size: 16px; margin-top: 10px; }

/* Form */
.form-section { padding-top: 48px; }
.form-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .form-grid { grid-template-columns: 1fr 1.25fr; gap: 72px; } .form-intro { position: sticky; top: 100px; } }
.form-h { font-size: clamp(40px, 5.6vw, 68px); letter-spacing: -0.045em; }
.form-ig { margin-top: 28px; font-size: 16px; }
.form { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px 18px; display: grid; gap: 18px; }
@media (min-width: 720px) { .form { padding: 40px; } }
.row-2 { display: grid; gap: 18px; }
@media (min-width: 620px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; font-size: 15px; color: var(--ink); font-weight: 500; min-width: 0; }
.field small { color: var(--muted); font-weight: 400; }
.field input, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,.15); background: #fff; }
.field input[aria-invalid] { border-color: var(--danger); }
.field-err, .form-err { color: var(--danger); font-size: 14px; font-weight: 400; }
.checks { border: 0; margin: 0; padding: 0; gap: 2px; }
.checks legend { padding: 0; margin-bottom: 8px; }
.check { display: flex; gap: 12px; align-items: center; padding: 8px 0; font-weight: 400; color: var(--body); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin: 0; }
.form-fine { font-size: 13px; color: var(--muted); text-align: center; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* FAQ */
.faq-list { border-top: 1px solid var(--line); }
.faq h2 { margin-bottom: 36px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; color: var(--ink); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform .25s var(--ease); color: var(--muted); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p { padding: 0 40px 24px 0; max-width: 46em; }

/* Final CTA */
.final-cta { position: relative; overflow: hidden; color: #fff; min-height: 520px; display: flex; align-items: flex-end; background: var(--dark); }
.final-cta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final-cta-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29,27,43,.05) 15%, rgba(29,27,43,.78) 100%); }
.final-cta-inner { position: relative; width: 100%; padding-block: 64px; }
.final-cta h2 { color: #fff; font-size: clamp(40px, 6.4vw, 84px); max-width: 11em; }
.final-cta p { font-size: 19px; color: rgba(255,255,255,.88); margin: 18px 0 30px; max-width: 30em; }
@media (min-width: 900px) { .final-cta { min-height: 680px; } .final-cta-inner { padding-block: 96px; } }

/* Footer */
.site-footer { padding: 72px 0 40px; font-size: 15px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr 1fr; }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 960px) { .footer-brand { grid-column: auto; } }
.footer-brand p { color: var(--muted); margin-top: 14px; max-width: 22em; }
.footer-head { color: var(--ink); font-weight: 500; margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer li a { color: var(--body); }
.site-footer li a:hover { color: var(--ink); }
.footer-ig { display: inline-flex; align-items: center; gap: 8px; }
.footer-base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* Thanks and 404 */
.page-msg { text-align: center; padding-block: 120px; }
.page-msg h1 { font-size: clamp(44px, 7vw, 88px); letter-spacing: -0.045em; }
.page-msg p:not(.label) { margin: 20px auto 32px; color: var(--muted); max-width: 32em; }
.page-msg .btn-row { justify-content: center; }


/* Hero (juan's mockup, 2026-10-13): the devices photo IS the hero background.
   Bold left-aligned headline with the last line in the brand gradient (same
   typeface, never a serif swap), big buttons, check-marked trust row.
   Two generated images (tools/hero-bg-*-prompt.txt): a wide one with empty
   space on the left for desktop, a tall one with empty space on top for
   phones. On phones the image is pinned to the bottom and fades in at its top
   edge, so the text sits on its empty upper part and the devices show below. */
/* Backgrounds are sampled from the photos' edges so the fades are seamless.
   Under 1200px the photo sits under the text, pinned to the bottom and fading
   in at its top edge (tall photo on phones, wide photo on tablets). From
   1200px it sits behind the text on the right at natural proportions, fading
   in at its left edge; the laptop starts ~37% into the wide photo, so the
   hero height (which sets the photo width) keeps it clear of the text. */
.hero-x { position: relative; overflow: hidden; background: #e6e7e9; padding: 36px 0 calc(100vw * 1.5 * .55); }
.hero-x-bg img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
.hero-x-copy { position: relative; z-index: 1; }
.hero-x h1 { font-size: clamp(46px, 7.4vw, 84px); font-weight: 700; letter-spacing: -0.05em; line-height: .98; max-width: 10em; }
.grad { background: linear-gradient(90deg, #7c3aed 0%, #4f46e5 55%, #3b82f6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-x-sub { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.55; color: var(--body); margin-top: 24px; max-width: 30em; }
.hero-x-ctas { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; max-width: 440px; }
.trust { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 16px; color: var(--body); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust .icon { color: var(--accent); width: 18px; height: 18px; }
@media (min-width: 720px) {
  .hero-x { background: #efeef1; padding: 64px 0 calc(100vw * .5625 * .86); }
  .hero-x-ctas { flex-direction: row; max-width: none; }
}
@media (min-width: 1200px) {
  .hero-x { height: clamp(600px, 44vw, 700px); display: flex; align-items: center; padding: 0; }
  .hero-x-bg img { left: auto; right: 0; top: 0; width: auto; height: 100%; max-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); }
  .hero-x-copy { width: 100%; }
  .hero-x h1 { font-size: clamp(56px, 4.6vw, 72px); max-width: 8.6em; }
  .hero-x-sub { max-width: 25em; font-size: 20px; }
}

.btn-xl { height: 62px; padding: 0 30px; font-size: 18px; border-radius: 16px; }
.btn-grad { background: linear-gradient(90deg, #6d3df0 0%, #4f46e5 50%, #3b82f6 100%); color: #fff; box-shadow: 0 10px 28px rgba(79,70,229,.28); }
.btn-grad:hover { filter: brightness(1.06); }
.btn-white { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(29,27,43,.05); }
.btn-white:hover { background: #fbfbfd; }

/* Check list beside the /start form */
.dark-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.dark-points li { display: flex; gap: 12px; }
.light-points { margin-top: 28px; gap: 10px; }
.light-points .icon { color: var(--live); margin-top: 4px; }

/* /why-free */
.catch-body { display: grid; gap: 20px; font-size: clamp(19px, 1.6vw, 21px); line-height: 1.6; color: var(--ink); }
.form-ig-tight { margin-top: 10px; }
.photo-right img { object-position: 82% center; }