/* Hello Practical: original coral mark, charcoal type, warm paper surfaces. */
.perspective {
  --bg: #fcf8f2;
  --surface: #fffdfa;
  --surface2: #f1e7dd;
  --ink: #363b47;
  --muted: #68615d;
  --accent: #b44630;
  --onaccent: #ffffff;
  --line: #dbd0c6;
  --soft: #f6e7df;
  --radius: 12px;
  --brand-coral: #c75439;
  --brand-peach: #f3a384;
}

.perspective .direction-bar {
  background: #363b47;
  color: #ece3db;
  border-color: #555964;
}
.perspective .direction-bar [aria-current] {
  background: #f3a384;
  color: #363b47;
  border-radius: 5px;
}
.perspective .direction-bar a:focus-visible { outline-color: #f3a384; }
.perspective .hero h1 em { color: var(--brand-coral); }
.perspective .hero-note { border-top-color: var(--brand-coral); }
.perspective .button { border-radius: 8px; }
.perspective .hero-note a:hover { background: var(--soft); }

/* Dark workspaces give the peach highlights and small labels enough contrast. */
.perspective .hero-console,
.perspective .lab-header,
.perspective .report-takeaway {
  --ink: #fff8f2;
  --muted: #e0d7d1;
  --accent: #f3a384;
  --onaccent: #363b47;
  --line: #696a70;
  --surface: #363b47;
  --surface2: #414650;
  background: #363b47;
  color: var(--ink);
}
.perspective .hero-console {
  border-color: #363b47;
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 16px 40px #363b4710;
}
.perspective .hero-receipt { border-radius: 10px 10px 10px 3px; }
.perspective .outcome-card { border-radius: 12px; }
.perspective .plan-number { border-radius: 10px 10px 10px 3px; }
.perspective .lab-section { background: #f1e7dd; }
.perspective .lab {
  border-radius: 14px;
  box-shadow: 12px 12px 0 #c7543910;
}
.perspective .lab-mark img { display: block; width: 30px; height: 30px; }
.perspective .lab-tabs [aria-selected=true] {
  background: #b44630;
  color: #ffffff;
  --accent: #ffffff;
  --muted: #ffffff;
  border-bottom-color: #f3a384;
}
.perspective .lab-tabs [aria-selected=true]:focus-visible {
  outline: 3px solid #363b47;
  outline-offset: -6px;
}
.perspective .report-takeaway { border-radius: 12px 12px 12px 3px; }
.perspective .contact-section {
  --soft: #363b47;
  --ink: #fff8f2;
  --muted: #e0d7d1;
  --accent: #f3a384;
  --onaccent: #363b47;
  --line: #85858a;
  --bg: #414650;
  --surface: #414650;
  color-scheme: dark;
}
.perspective .contact-section input,
.perspective .contact-section select,
.perspective .contact-section textarea { border-radius: 8px; }

@media (max-width: 600px) {
  .perspective .lab { box-shadow: 6px 6px 0 #c7543910; }
}

/* A focused walkthrough, without a website nested inside the website. */
.perspective .hero { padding-bottom: 0; }
.perspective .perspective-hero-top { margin-bottom: 48px; }
.perspective .work-example { padding: 100px 0; background: var(--surface2); border-block: 1px solid var(--line); }
.example-intro { max-width: 840px; margin-bottom: 48px; }
.example-intro h2 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.1; letter-spacing: -.045em; margin: 22px 0; }
.example-intro h2 em { font-family: 'Fraunces',serif; font-weight: 400; color: var(--accent); }
.example-intro>p:last-child { font-size: 18px; line-height: 1.7; max-width: 640px; }
.example-story { display: grid; grid-template-columns: .85fr 1.15fr; gap: 65px; align-items: start; }
.story-label { font-size: 11px; letter-spacing: .09em; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.story-steps { display: grid; }
.story-steps button { display: flex; align-items: baseline; gap: 16px; text-align: left; background: none; padding: 28px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.story-steps button>span { font-size: 12px; }
.story-steps button strong { display: block; font-size: 21px; letter-spacing: -.025em; font-weight: 600; }
.story-steps button small { display: block; font-size: 14px; margin-top: 9px; line-height: 1.5; }
.story-steps button b { margin-left: auto; font-weight: 400; opacity: 0; }
.story-steps button[aria-selected=true] { color: var(--accent); border-bottom: 2px solid var(--accent); }
.story-steps button[aria-selected=true] b { opacity: 1; }
.story-steps button[aria-selected=true] small { color: var(--ink); }
.story-caption { font-size: 14px; line-height: 1.7; margin-top: 28px; max-width: 280px; }
.story-stage { background: var(--surface); padding: 36px; border: 1px solid var(--line); border-radius: 14px 14px 14px 3px; min-height: 660px; box-shadow: 0 14px 40px #363b4708; }
.stage-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 28px; }
.stage-heading .eyebrow { font-size: 10px; }
.example-tag { color: var(--muted); font-size: 11px; text-align: right; }
.story-stage h3 { font-family: 'Fraunces',serif; font-size: clamp(28px,2.7vw,39px); font-weight: 400; line-height: 1.15; letter-spacing: -.04em; margin-bottom: 16px; }
.story-stage>p { font-size: 15px; line-height: 1.7; }
.request-sheet,.handoff-sheet,.report-sheet { margin-top: 25px; }
.story-stage label { font-size: 13px; }
.story-stage select { background: var(--bg); margin-top: 8px; }
.request-sheet blockquote { font-family:'Fraunces',serif; font-size:22px; line-height:1.5; margin: 22px 0; padding: 16px 20px; border-left: 2px solid var(--brand-coral); background: var(--bg); }
.request-sheet .button { margin-top: 25px; }
.story-stage .stage-note { font-size: 13px; line-height: 1.65; margin-top: 25px; }
.handoff-sheet { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.handoff-top { display: flex; align-items: center; gap: 9px; padding: 18px; background: var(--soft); font-size: 14px; }
.handoff-top>span:last-child { margin-left: auto; font-size: 11px; }
.handoff-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.handoff-sheet dl { margin:0; padding: 0 20px; }
.handoff-sheet dl>div { padding: 17px 0; border-bottom: 1px solid var(--line); }
.handoff-sheet dt { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.handoff-sheet dd { font-size: 14px; line-height: 1.65; margin: 0; }
.handoff-sheet .button { margin: 20px; font-size: 12px; }
.handoff-sheet .button:disabled { cursor: default; background: var(--soft); }
.story-next { display: flex; gap: 25px; align-items: center; background: none; border-bottom: 1px solid var(--line); padding: 12px 0; margin-top: 14px; min-height: 44px; font-size: 14px; color: var(--accent); }
.story-totals { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 25px 0; padding-block: 22px; border-block: 1px solid var(--line); }
.story-totals strong { display: block; font-size: 43px; letter-spacing: -.06em; font-weight: 500; }
.story-totals span { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; }
.story-table-wrap { overflow-x: auto; }
.story-table-wrap table { width:100%; border-collapse: collapse; font-size: 13px; }
.story-table-wrap th,.story-table-wrap td { padding: 14px 5px; border-bottom: 1px solid var(--line); text-align: right; font-weight: 400; }
.story-table-wrap th:first-child { text-align: left; padding-left: 0; }
.story-table-wrap thead { font-size: 11px; color: var(--muted); }
.record-note { font-size: 13px; line-height: 1.6; background: var(--soft); padding: 15px; margin-top: 20px; }
.example-bottom { display: flex; justify-content: space-between; gap: 30px; align-items: center; margin-top: 40px; }
.example-bottom p { font-size: 15px; }
.perspective form>.contact-engagement { margin-bottom: 20px; }
.perspective .contact-section button:disabled { opacity: .7; cursor: wait; }
@media(max-width:1000px){.example-story {gap:30px;grid-template-columns: .85fr 1.15fr}.story-stage{padding:25px}.story-steps button strong{font-size:18px}}
@media(max-width:760px){.perspective .work-example{padding:65px 0}.example-story{grid-template-columns:1fr;gap:26px}.story-stage{min-height:0;padding:24px}.story-steps button{padding:18px 0}.story-caption{display:none}.example-bottom{align-items:start;flex-direction:column;gap:15px}.example-intro>p:last-child{font-size:16px}.example-intro{margin-bottom:32px}.story-stage h3{font-size:34px}.stage-heading{gap:12px}.stage-heading .eyebrow,.example-tag{font-size:10px}.handoff-top{flex-wrap:wrap}.story-totals strong{font-size:36px}.story-totals span{font-size:11px}}

/* Describe the audience broadly, using familiar examples rather than niche labels. */
.perspective .audience-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px 48px;
  padding: 28px 0;
  border-block: 1px solid var(--line);
}
.perspective .audience-line p:first-child {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.perspective .audience-line p:last-child {
  font-size: 15px;
  line-height: 1.6;
  max-width: 580px;
}
@media (max-width: 900px) {
  .perspective .audience-line { align-items: flex-start; flex-direction: column; gap: 8px; }
}

.bot-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}