/*
  theme.css

  Our elegant look, laid on top of Cass's styles.css. It loads right after
  styles.css on the home page, login, dashboard, phone setup, "Join call", the calling
  app, and the privacy, terms and 404 pages, so the whole site feels like
  one product with the demo player (demo.css).

  How it fits in: it only changes fonts, lines and spacing. The colors stay
  Cass's red, black and gold (her variables in styles.css), and every class
  still comes from her HTML and JavaScript, so how her pages work stays
  exactly the same.
*/

:root {
  /* Two helpers for thin lines and soft gold backgrounds. Everything else
     uses Cass's colors from styles.css. */
  --line: #3A3A3A;
  --gold-soft: rgba(201, 162, 39, 0.14);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

/* Headlines in the serif, like a nice magazine */
h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

h3 {
  font-weight: 600;
}

/* The English | Español switch on Join call (the header's own switch is
   styled in header.css) */
.language-switch {
  color: var(--color-muted);
  font-weight: 400;
}

/* Buttons: gold and calm, with thin outlines */

button,
.button {
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.button-outline {
  border: 1px solid var(--color-gold);
}

.button-outline:hover {
  background: var(--gold-soft);
  color: var(--color-gold);
}

/* Small capital labels, like the demo player's */
.badge {
  padding: 4px 12px;
  border: 1px solid var(--color-gold);
  background: var(--gold-soft);
  color: var(--color-gold);
  font-weight: 600;
  text-transform: none;
  font-variant: all-small-caps;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

.badge-alert {
  border-color: var(--color-alert);
  background: rgba(255, 90, 95, 0.12);
  color: var(--color-alert);
}

/* Cards: dark panel, thin lines, and the red stripe made thin */

.card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--color-red);
  border-radius: 14px;
}

fieldset,
.senior,
.tabs {
  border-color: var(--line);
}

input,
select,
.report-text {
  border: 1px solid var(--line);
  border-radius: 12px;
}

input::placeholder {
  color: var(--color-muted);
}

/* The home page */

.hero h1 {
  font-size: clamp(2.3rem, 7vw, 3.6rem);
  line-height: 1.08;
}

.hero .lead {
  max-width: 34ch;
}

/* The small "want to protect someone?" line under the big buttons */
.hero-more {
  margin: 18px 0 0;
  color: var(--color-muted);
  font-size: 1rem;
}

.alert-preview {
  border: 1px solid var(--line);
  border-top: 4px solid var(--color-red);
  box-shadow: 0 0 40px rgba(200, 16, 46, 0.18);
}

.alert-preview-label {
  font-variant: all-small-caps;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
}

/* Only the big number gets the serif. "/100 risk" next to it stays small. */
.risk-score span:first-child {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 3.6rem;
}

.risk-score span + span {
  color: var(--color-muted);
  font-size: 1rem;
}

.section {
  border-top: 1px solid var(--line);
}

.section h2 {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
}

/* "How it works": red circles with serif numbers */
.step-cards li,
.feature {
  border: 1px solid var(--line);
}

.step-cards li::before {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
}

.feature {
  border-left: 2px solid var(--color-gold);
}

/* A thin gold icon before each "Built for families" title */
.feature h3::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 10px;
  vertical-align: -0.15em;
  background: var(--color-gold);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* Lucide icons: user-check, search, languages, house */
.feature:nth-child(1) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 11 2 2 4-4'/%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E");
}

.feature:nth-child(2) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

.feature:nth-child(3) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 6 6'/%3E%3Cpath d='m4 14 6-6 2-3'/%3E%3Cpath d='M2 5h12'/%3E%3Cpath d='M7 2h1'/%3E%3Cpath d='m22 22-5-10-5 10'/%3E%3Cpath d='M14 18h6'/%3E%3C/svg%3E");
}

.feature:nth-child(4) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

.cta .button {
  margin: 6px;
}

/* Footer: quiet, with the privacy and terms links */

.site-footer {
  border-top: 1px solid var(--line);
}

.site-footer a {
  color: var(--color-muted);
}

.site-footer a:hover {
  color: var(--color-gold);
}

/* The row of links to the service pages and Q&A. On a phone they wrap,
   with room between lines so each link is easy to tap. */
.site-footer .footer-links {
  line-height: 2;
}

/* The dashboard's call list and score circles */

.call {
  border-top-color: var(--line);
}

.score {
  font-family: var(--serif);
  font-weight: 400;
}

.was-it-a-scam,
.report-and-block,
.account-bar {
  border-color: var(--line);
}

/* The video page (watch.html): headline, then the video, centered */

.watch-hero {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 16px 56px;
  text-align: center;
}

.watch-hero h1 {
  margin: 16px 0;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.1;
}

/* About us has no line under the headline, so give the video the same room */
.watch-hero h1 + .video-frame {
  margin-top: 32px;
}

.watch-hero .lead {
  max-width: 40ch;
  margin: 0 auto 32px;
}

/* A 16:9 box with a red glow, like the alert card on the home page. It holds
   the "coming soon" card now, and the YouTube video once it's added. */
.video-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 4px solid var(--color-red);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 35%, rgba(201, 162, 39, 0.16), transparent 60%),
    var(--color-surface);
  box-shadow: 0 0 60px rgba(200, 16, 46, 0.22);
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-soon {
  max-width: 34ch;
  padding: 24px;
}

.video-soon img {
  width: 72px;
  height: 72px;
}

.video-soon p {
  margin: 8px 0 20px;
  color: var(--color-muted);
}

.video-soon .video-soon-title {
  margin: 12px 0 4px;
  color: var(--color-text);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4vw, 2rem);
}

/* On a small phone the 16:9 box is too short for the card, so it grows to fit */
@media (max-width: 520px) {
  .video-frame:not(.has-video) {
    aspect-ratio: auto;
  }
}

.watch-actions {
  justify-content: center;
  margin-top: 32px;
}

.watch-note {
  margin: 16px 0 0;
  color: var(--color-muted);
}

/* The privacy, terms, Q&A, service and 404 pages: easy to read, one column */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

.page .eyebrow {
  margin: 0 0 8px;
  color: var(--color-gold);
  font-variant: all-small-caps;
  letter-spacing: 0.08em;
}

.page h1 {
  margin: 0 0 12px;
  color: var(--color-text);
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1.1;
}

.page h2 {
  margin: 36px 0 8px;
  color: var(--color-gold);
  font-size: 1.45rem;
}

.page .lead,
.page .updated {
  color: var(--color-muted);
}

.page ul,
.page ol {
  padding-left: 1.2em;
}

/* The questions at the bottom of the service pages */
.page h3 {
  margin: 20px 0 4px;
  font-size: 1.1rem;
}

.page li {
  margin: 6px 0;
}

.page .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Spots for our videos on the home page. Each one becomes a YouTube embed later. */
.video-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 16px;
}

.video-spot {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: #121212;
  border: 2px dashed #C9A227;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  text-align: center;
}

.video-spot-title {
  color: #C9A227;
  font-weight: 600;
  margin: 0;
}

/* Scam Shield 2.0, coming soon: a gold frame so it stands out */
.coming-soon {
  border: 2px solid #C9A227;
  border-radius: 18px;
  padding: 24px;
}

/* The "Why we built it" story on the About us page: big, calm, easy to read */
.about-story {
  border-left: 4px solid #C9A227;
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 760px;
  padding-left: 20px;
}

.about-bullets {
  margin-top: 20px;
}

/* "Who we are" on the About us page: a round photo with a gold ring on each
   card, instead of the small gold icon the other cards get */
.team-card h3::before {
  content: none;
}

.team-photo {
  display: block;
  width: 160px;
  height: 160px;
  margin-bottom: 16px;
  border: 3px solid var(--color-gold);
  border-radius: 50%;
  object-fit: cover;
}

/* Each home page video with its 3 bullet points under it */
.video-card h3 {
  margin: 12px 0 4px;
}

.video-spot.has-video {
  border-style: solid;
  overflow: hidden;
  padding: 0;
}

.video-spot.has-video iframe {
  border: 0;
  height: 100%;
  width: 100%;
}

/* The fold out setup video on the dashboard */
.setup-video summary {
  color: #C9A227;
  cursor: pointer;
  font-weight: 600;
}

.setup-video .video-spot {
  margin-top: 12px;
}

/* The Call Log page (calls.html) */
.call-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin: 16px 0;
}

.call-stat {
  background: rgba(201, 162, 39, 0.1);
  border: 1px solid #C9A227;
  border-radius: 14px;
  padding: 12px;
  text-align: center;
}

.call-stat p {
  margin: 0;
}

.call-stat-number {
  color: #C9A227;
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
}

.call-stat-danger {
  background: rgba(229, 72, 77, 0.12);
  border-color: #E5484D;
}

.call-stat-danger .call-stat-number {
  color: #E5484D;
}

.call-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.call-log {
  list-style: none;
  margin: 0;
  padding: 0;
}

.call-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.call-row-button {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 14px;
  padding: 12px 0;
  text-align: left;
  width: 100%;
}

.call-score {
  align-items: center;
  border: 3px solid #3FB950;
  border-radius: 50%;
  color: #3FB950;
  display: flex;
  flex: 0 0 52px;
  font-weight: 700;
  height: 52px;
  justify-content: center;
}

.call-scam .call-score {
  border-color: #E5484D;
  color: #E5484D;
}

.call-unknown .call-score {
  border-color: #888;
  color: #888;
}

.call-text {
  display: flex;
  flex-direction: column;
}

.call-who {
  font-weight: 600;
}

.call-status,
.call-time {
  font-size: 0.9rem;
  opacity: 0.8;
}

.call-scam .call-status {
  color: #E5484D;
  opacity: 1;
}

.call-details {
  padding: 0 0 12px 66px;
}

.call-detail-title {
  color: #C9A227;
  font-weight: 600;
  margin: 8px 0 4px;
}

@media (max-width: 420px) {
  .call-stat-number {
    font-size: 1.5rem;
  }

  .call-details {
    padding-left: 0;
  }
}

/* A button that looks like a link, like "Forgot your password?" */
.link-button {
  background: none;
  border: 0;
  color: #C9A227;
  cursor: pointer;
  font: inherit;
  margin-top: 8px;
  padding: 0;
  text-decoration: underline;
}

/* The Call Log filters sit side by side, even on a phone */
.call-filters button {
  flex: 1 1 auto;
  margin: 0;
  width: auto;
}