/* Angel Advisory Group - Free Pitch Deck Review
   Palette + type mirrored from angeladvisorygroup.com (Elementor kit post-10) */
:root {
  --aag-primary: #FFCE16;
  --aag-primary-dark: #E7B600;
  --aag-secondary: #333333;
  --aag-text: #555555;
  --aag-muted: #999999;
  --aag-light: #F3F9F9;
  --aag-border: #DEDEDE;
  --aag-accent: #8638C8;
  --aag-teal: #0097B2;
  --aag-white: #FFFFFF;
  --wrap: 1140px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--aag-text);
  background: var(--aag-white);
}

h1, h2, h3, h4 {
  font-family: inherit;
  color: var(--aag-secondary);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 .6em;
}
h1 { font-size: 50px; }
h2 { font-size: 38px; }
h3 { font-size: 21px; }
h4 { font-size: 16px; }

p { margin: 0 0 1.1em; }
a { color: var(--aag-secondary); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--aag-white);
  border-bottom: 1px solid var(--aag-border);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 84px;
}
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.brand img { display: block; width: auto; height: 34px; }
.brand-sub {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--aag-muted); padding-left: 16px; border-left: 1px solid var(--aag-border);
}
.header-nav { display: flex; align-items: center; gap: 28px; }
.header-nav a {
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; color: var(--aag-secondary);
}
.header-nav a:hover { color: var(--aag-primary-dark); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: 16px 34px; border-radius: 2px;
  background: var(--aag-primary); color: var(--aag-secondary);
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--aag-primary-dark); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-ghost {
  background: transparent; color: var(--aag-white);
  box-shadow: inset 0 0 0 2px var(--aag-primary);
}
.btn-ghost:hover { background: var(--aag-primary); color: var(--aag-secondary); }
.btn-block { width: 100%; text-align: center; }
/* The paid tier reads as the considered upgrade, not the louder shout: dark
   against the yellow free button rather than a second yellow competing with it. */
.btn-dark { background: var(--aag-secondary); color: var(--aag-white); }
.btn-dark:hover { background: #1f1f1f; }

/* ---------- pricing tiers ----------
   Same card vocabulary as the "how it works" cards (white, hairline border,
   4px coloured top rule, square corners) so the pricing reads as part of the
   page rather than a bolted-on widget. The two tiers are deliberately identical
   in structure: the product difference is not a longer feature list, it is
   whether the red-flag analysis is locked, so that single row is the only thing
   that visually differs. The padlock is the same motif used in the report the
   founder receives. */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier {
  display: flex; flex-direction: column;
  background: var(--aag-white);
  border: 1px solid var(--aag-border);
  border-top: 4px solid var(--aag-primary);
  padding: 30px 28px 28px;
}
/* Dark rule echoes the masthead of the full report itself. */
.tier-lite { border-top-color: var(--aag-primary, #FFCE16); }
.tier-full { border-top-color: var(--aag-secondary); }
.tier-name {
  margin: 0 0 6px; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--aag-muted);
}
.tier-price {
  margin: 0 0 4px; font-size: 40px; line-height: 1.1;
  font-weight: 600; color: var(--aag-secondary);
}
.tier-lede { margin: 0 0 22px; font-size: 15px; line-height: 1.55; }
.tier-list { list-style: none; margin: 0 0 26px; padding: 0; flex: 1 1 auto; }
.tier-list li {
  position: relative; padding: 0 0 13px 30px;
  font-size: 15px; line-height: 1.5; color: var(--aag-secondary);
}
.tier-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--aag-primary);
  box-shadow: inset 0 0 0 4px var(--aag-white);
}
.tier-list li.locked { color: var(--aag-muted); }
.tier-list li.locked::before {
  border-radius: 0; background: transparent; box-shadow: none;
  top: 4px; width: 14px; height: 17px;
  background-repeat: no-repeat; background-size: 14px 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='%23999999'%3E%3Cpath d='M15 9V6.5a5 5 0 0 0-10 0V9H3v14h14V9h-2zM7 6.5a3 3 0 0 1 6 0V9H7V6.5z'/%3E%3C/svg%3E");
}
@media (max-width: 700px) {
  .tiers { grid-template-columns: 1fr; gap: 20px; }
  .tier-price { font-size: 34px; }
}

/* ---------- hero ---------- */
.hero {
  background: var(--aag-secondary);
  color: rgba(255,255,255,.82);
  padding: 96px 0 104px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -140px; top: -140px;
  width: 460px; height: 460px; border-radius: 50%;
  background: var(--aag-primary); opacity: .10;
}
.hero .wrap { position: relative; z-index: 1; max-width: 900px; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--aag-primary); margin: 0 0 20px;
}
.hero h1 { color: var(--aag-white); max-width: 15ch; }
.hero .lede { font-size: 21px; font-weight: 200; line-height: 1.6; max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

.rule { width: 64px; height: 4px; background: var(--aag-primary); border: 0; margin: 0 0 28px; }
.rule-center { margin: 0 auto 28px; }

/* ---------- sections ---------- */
section { padding: 88px 0; }
.section-light { background: var(--aag-light); }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .rule { margin-left: auto; margin-right: auto; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.card {
  background: var(--aag-white);
  border: 1px solid var(--aag-border);
  border-top: 4px solid var(--aag-primary);
  padding: 34px 30px;
}
.card .step {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--aag-primary-dark); margin: 0 0 12px;
}
.card p:last-child { margin-bottom: 0; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding: 0 0 16px 34px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--aag-primary);
  box-shadow: inset 0 0 0 4px var(--aag-white);
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

/* ---------- form ---------- */
.form-panel {
  background: var(--aag-white);
  border: 1px solid var(--aag-border);
  border-top: 5px solid var(--aag-primary);
  padding: 44px;
  max-width: 820px; margin: 0 auto;
}
.field { margin-bottom: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
label {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--aag-secondary);
}
label .opt { color: var(--aag-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--aag-muted); }
input[type=text], input[type=email], input[type=url], input[type=tel], select, textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--aag-secondary);
  padding: 13px 15px; background: var(--aag-white);
  border: 1px solid var(--aag-border); border-radius: 2px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus, .dropzone:focus-within {
  outline: none; border-color: var(--aag-primary);
  box-shadow: 0 0 0 3px rgba(255,206,22,.28);
}
textarea { min-height: 120px; resize: vertical; }

/* Prefixed inputs (https:// and £).
   The prefix is a sibling rather than padding on the input, so the field sizes
   itself to whatever the prefix is and there are no magic numbers to keep in
   step. The border moves to the wrapper and the focus ring with it, so the pair
   reads and behaves as one control. */
.affix {
  display: flex; align-items: stretch;
  background: var(--aag-white);
  border: 1px solid var(--aag-border); border-radius: 2px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.affix:focus-within {
  border-color: var(--aag-primary);
  box-shadow: 0 0 0 3px rgba(255,206,22,.28);
}
.affix-prefix {
  display: flex; align-items: center; flex: 0 0 auto;
  padding: 0 12px;
  background: var(--aag-light);
  border-right: 1px solid var(--aag-border);
  font-size: 15px; color: var(--aag-muted);
  user-select: none;
}
/* Reset the shared input rule: the wrapper owns the border and focus ring now. */
.affix input[type=text] {
  flex: 1 1 auto; min-width: 0;
  border: 0; border-radius: 0; background: transparent;
}
.affix input[type=text]:focus { outline: none; box-shadow: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.dropzone {
  border: 2px dashed var(--aag-border); border-radius: 3px;
  background: var(--aag-light);
  padding: 34px 24px; text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--aag-primary); background: #FFFBEC; }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dz-title { font-weight: 600; color: var(--aag-secondary); display: block; margin-bottom: 4px; }
.dz-hint { font-size: 13px; color: var(--aag-muted); }
.dz-file { font-weight: 600; color: var(--aag-secondary); word-break: break-all; }

.consent { display: flex; gap: 12px; align-items: flex-start; }
.consent input { margin-top: 5px; flex: 0 0 auto; }
.consent label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--aag-text); margin: 0; }

.progress { height: 6px; background: var(--aag-border); border-radius: 3px; overflow: hidden; margin-top: 18px; display: none; }
.progress.is-on { display: block; }
.progress span { display: block; height: 100%; width: 0; background: var(--aag-primary); transition: width .25s ease; }

.form-note { font-size: 13px; color: var(--aag-muted); margin-top: 18px; }
.alert { padding: 14px 18px; border-radius: 2px; font-size: 14px; margin-bottom: 22px; display: none; }
.alert.is-on { display: block; }
.alert-error { background: #FDECEC; color: #A3231F; border: 1px solid #F3C3C1; }

.success { display: none; text-align: center; padding: 20px 0; }
.success.is-on { display: block; }
.success .tick {
  width: 72px; height: 72px; border-radius: 50%; background: var(--aag-primary);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;
  font-size: 34px; color: var(--aag-secondary);
}

/* ---------- footer ---------- */
.site-footer { background: var(--aag-secondary); color: rgba(255,255,255,.62); padding: 56px 0 40px; font-size: 13px; }
.site-footer a { color: var(--aag-primary); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-logo { display: block; width: auto; height: 28px; margin-bottom: 14px; }
.footer-top strong { color: var(--aag-white); display: block; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.footer-bottom { padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

@media (max-width: 900px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  .hero { padding: 68px 0 74px; }
  .hero .lede { font-size: 18px; }
  .grid-3, .split, .field-row { grid-template-columns: 1fr; gap: 24px; }
  section { padding: 60px 0; }
  .form-panel { padding: 28px 22px; }
  .brand-sub { display: none; }
  .header-nav { gap: 16px; }
  .header-nav .nav-hide-sm { display: none; }
}