/* ============================================================
   TRM GARAGE FLOORS — DON'T GET FROGGED LANDING PAGE
   Page-specific styles only. Existing site system remains authoritative.
   ============================================================ */

.dfg-hero {
  background: #FFFFFF; /* matches the approved hero artwork's white backdrop so it sits in the section, not in a box */
  border-bottom: 1px solid var(--gray-border);
  padding: 48px 0 56px;
}
.dfg-hero .container {
  max-width: 1320px;
}
.dfg-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
}
.dfg-tag {
  display: inline-flex;
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.dfg-title {
  font-family: var(--font-display);
  font-size: clamp(42px, 6.3vw, 78px);
  line-height: .88;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: -.035em;
  margin-bottom: 18px;
}
.dfg-title span { display:block; }
.dfg-subtitle {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 27px);
  line-height: 1.12;
  color: var(--black);
  max-width: 610px;
  margin-bottom: 18px;
}
.dfg-subtitle span { color: var(--red); }
.dfg-intro {
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-dark);
  max-width: 680px;
  margin-bottom: 26px;
}
.dfg-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.dfg-actions .btn { width: 100%; }
.dfg-quote-link span {
  font-size: 22px;
  line-height: 1;
}
.dfg-download-cta span {
  font-size: 22px;
  line-height: 1;
  margin-left: 8px;
}
.dfg-art-shell,
.dfg-frank-art {
  position: relative;
  background: transparent url('/assets/images/dont-get-frogged/hero-frank-book.jpg') center center / contain no-repeat;
  border: 0;
  min-height: 380px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dfg-frank-art {
  min-height: 360px;
  background-position: 78% center;
  background-size: cover;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dfg-art-shell.has-art .dfg-art-placeholder,
.dfg-frank-art.has-art .dfg-art-placeholder {
  display: none;
}
.dfg-art-placeholder {
  width: 100%;
  min-height: 320px;
  border: 2px dashed var(--gray-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  color: var(--gray-mid);
  background: var(--white);
}
.dfg-art-placeholder strong {
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.dfg-art-placeholder span {
  max-width: 280px;
  font-size: 13px;
  line-height: 1.55;
}
.dfg-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 28px;
}
.dfg-feature {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-top: 4px solid var(--red);
  border-radius: var(--radius-md);
  padding: 22px;
}
.dfg-feature h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.15;
  margin-bottom: 8px;
  color: var(--text-dark);
}
.dfg-feature p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-dark);
}
.dfg-frank-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
}
.dfg-frank-copy p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,.8);
  max-width: 680px;
}
.dfg-form-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}
.dfg-form-card {
  background: var(--black);
  border-radius: var(--radius-md);
  padding: 28px 22px 32px;
}
.dfg-form-note {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
}
.dfg-form-note a { color: var(--white); text-decoration: underline; }
.dfg-book-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.dfg-point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.dfg-point-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  font-weight: 900;
  margin-top: 1px;
}
.dfg-point p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray-dark);
}
.dfg-thankyou {
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.dfg-download-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--gray-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
}
.dfg-download-card .section-sub { margin: 0 auto 26px; }
.dfg-download-warning {
  margin-top: 14px;
  font-size: 12px;
  color: var(--gray-mid);
}
@media (min-width: 640px) {
  .dfg-actions { flex-direction: row; align-items: center; }
  .dfg-actions .btn { width: auto; }
  .dfg-feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  /* Text column can shrink (minmax(0,…)); art column is guaranteed a real width
     so the artwork never collapses when the headline's min-content is wide. */
  .dfg-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); gap: 40px; }
  .dfg-hero-grid > * { min-width: 0; }
  .dfg-frank-grid { grid-template-columns: .8fr 1.2fr; gap: 60px; }
  .dfg-form-wrap { grid-template-columns: .9fr 1.1fr; gap: 60px; }
  .dfg-art-shell { min-height: 500px; }
  .dfg-frank-art { min-height: 430px; }
}

/* Finished fallback composition while binary art transfer is unavailable */
.dfg-book-stage {
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 180px;
  gap: 26px;
  align-items: center;
}
.dfg-book-mockup {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 0.76;
  margin-left: auto;
  filter: drop-shadow(0 28px 28px rgba(0,0,0,.18));
  transform: perspective(1100px) rotateY(-8deg);
  transform-origin: center;
}
.dfg-book-cover {
  position: absolute;
  inset: 0 0 0 36px;
  background:
    linear-gradient(180deg, #fff 0%, #fff 74%, #f3f3f3 100%);
  border: 1px solid #d7d7d7;
  display: flex;
  flex-direction: column;
  padding: 42px 36px 28px;
  overflow: hidden;
}
.dfg-book-cover::after {
  content:'';
  position:absolute;
  right:-90px;
  bottom:-100px;
  width:300px;
  height:300px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #E8181A 0 14%, #850c0d 42%, #111 68%, #111 100%);
  opacity:.94;
}
.dfg-book-spine {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:38px;
  background:#f8f8f8;
  border:1px solid #d7d7d7;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:.05em;
  text-align:center;
  padding:20px 7px;
  z-index:2;
}
.dfg-book-spine span { color:var(--red); }
.dfg-book-kicker {
  align-self:flex-start;
  background:var(--black);
  color:#fff;
  padding:5px 9px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  margin-bottom:18px;
  z-index:2;
}
.dfg-book-title {
  font-family:var(--font-display);
  font-size:clamp(34px,4.4vw,58px);
  line-height:.86;
  color:var(--black);
  letter-spacing:-.04em;
  z-index:2;
}
.dfg-book-title span { color:var(--red); }
.dfg-book-sub {
  margin-top:18px;
  font-size:16px;
  line-height:1.18;
  font-weight:800;
  max-width:250px;
  color:#161616;
  z-index:2;
}
.dfg-book-sub strong { color:var(--red); }
.dfg-book-footer {
  margin-top:auto;
  border-top:3px solid var(--red);
  padding-top:10px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  z-index:2;
}
.dfg-frank-callout {
  align-self:center;
  transform:rotate(-4deg);
}
.dfg-frank-quote {
  font-family:var(--font-display);
  font-size:23px;
  line-height:1.05;
  text-transform:uppercase;
}
.dfg-frank-name {
  margin-top:9px;
  font-size:14px;
  font-weight:900;
  color:var(--red);
}
.dfg-frank-panel {
  min-height:360px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 85% 15%, rgba(232,24,26,.25), transparent 38%),
    #151515;
  border-radius:var(--radius-lg);
  padding:36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.dfg-frank-badge {
  display:inline-block;
  align-self:flex-start;
  background:var(--red);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  padding:6px 10px;
  margin-bottom:18px;
}
.dfg-frank-big {
  font-family:var(--font-display);
  font-size:clamp(42px,6vw,68px);
  line-height:.82;
  color:#fff;
}
.dfg-frank-rule {
  width:88px;
  height:4px;
  background:var(--red);
  margin:24px 0 18px;
}
.dfg-frank-small {
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.6;
  max-width:320px;
}
@media (max-width:899px){
  .dfg-book-stage{
    grid-template-columns:1fr;
    min-height:420px;
  }
  .dfg-book-mockup{
    margin:0 auto;
    max-width:360px;
  }
  .dfg-frank-callout{
    text-align:center;
    transform:none;
  }
}
@media (max-width:639px){
  .dfg-book-cover{padding:30px 24px 22px;}
  .dfg-book-sub{font-size:13px;max-width:210px;}
  .dfg-book-stage{min-height:360px;}
}

/* Approved Don't Get Frogged artwork — exact client-supplied visual */
.dfg-approved-art-shell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dfg-approved-hero-art {
  /* Approved portrait artwork on a white backdrop; the hero section is white
     to match, so the artwork sits directly on the section with no photo edge. */
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1122 / 1402;
  display: block;
}
.dfg-frank-approved-art {
  min-height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}
.dfg-frank-approved-art img {
  width: 178%;
  max-width: none;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: 72% center;
  transform: translateX(-28%);
  display: block;
}
@media (max-width: 899px) {
  .dfg-frank-approved-art { min-height: 340px; }
  .dfg-frank-approved-art img { min-height: 340px; }
}

@media (min-width: 1200px) {
  .dfg-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(460px, 560px); gap: 56px; }
}