/* SmartContact Cards home page (English and Spanish), on top of theme.css. "Midnight Silk" design, 2026-10-29. */
  /* Hero */
  .hero { position:relative; isolation:isolate; overflow:hidden; padding:72px 0 88px; }
  .hero::before { content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(11,17,32,0) 65%, var(--paper) 100%),
      linear-gradient(90deg, var(--paper) 0%, rgba(11,17,32,.82) 40%, rgba(11,17,32,.25) 100%),
      url(/assets/bg_silk_waves.webp) center / cover no-repeat; }
  :root[data-palette=light] .hero::before { background:radial-gradient(ellipse at 78% 30%, rgba(64,112,200,.12), rgba(244,245,249,0) 60%); }
  .hero .wrap { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:48px; align-items:center; }
  /* Logo, product name and text centered, like the current page */
  .hero-copy { text-align:center; }
  .hero-logo { display:block; width:150px; height:auto; margin:0 auto 20px; }
  :root[data-palette=light] .hero-logo { filter:invert(1); }
  .hero h1 { font-size:clamp(44px, 4.3vw, 60px); line-height:1.02; font-stretch:85%; font-weight:750; letter-spacing:-.02em; text-wrap:balance;
    background:linear-gradient(135deg, #ffffff 0%, #b9cdf7 45%, #6f97e6 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  :root[data-palette=light] .hero h1 { background-image:linear-gradient(135deg, #4070c8 0%, #2a3a9a 55%, #1a1a5e 100%); }
  .hero .tagline { margin-top:16px; font-size:24px; line-height:1.3; font-weight:600; color:var(--ink); text-wrap:balance; }
  .hero .sub { margin:14px auto 0; font-size:19px; line-height:1.5; color:var(--muted); max-width:30em; text-wrap:pretty; }
  .hero .ctas { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px; }
  .hero .price-line { margin-top:20px; font-size:16px; color:var(--muted); }
  @media (max-width:520px) { .hero .ctas .btn-you { flex-basis:100%; } .hero .ctas .btn-line { flex:1 1 auto; padding:12px 16px; } }
  @media (max-width:960px) {
    .hero { padding:40px 0 56px; }
    .hero .wrap { grid-template-columns:1fr; gap:40px; }
    .hero-logo { width:120px; margin-bottom:16px; }
    .hero h1 { font-size:42px; }
    .hero .tagline { font-size:20px; }
    .hero .sub { font-size:17px; }
  }

  /* Tap demo: base styles are the final state; keyframes start from the earlier states. */
  .demo-box { justify-self:center; }
  .demo { position:relative; width:32em; height:37.5em; font-size:clamp(9.5px, 2.65vw, 16px); }
  @media (min-width:961px) and (max-width:1100px) { .demo { font-size:15px; } }
  .phone { position:absolute; left:13.5em; top:0; width:18.5em; height:37.5em; border-radius:2.9em; background:var(--bezel);
    padding:.6em; box-shadow:0 0 0 1px var(--bezel-edge), 0 1.5em 3em -1em rgba(0,0,0,.55), 0 0 4em var(--you-glow); }
  .screen { position:relative; width:100%; height:100%; border-radius:2.35em; overflow:hidden; background:#f2f2f7; color:#000;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
  .status { display:flex; justify-content:space-between; padding:.9em 1.6em 0; font-size:.72em; font-weight:600; }
  .page { padding:1.1em 1.1em 0; text-align:center; }
  .avatar { width:4.4em; height:4.4em; margin:.4em auto .7em; border-radius:50%; background:#007aff; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1em; font-weight:500; }
  .avatar b { font-size:1.6em; font-weight:500; }
  .p-name { font-size:1.3em; font-weight:600; }
  .p-title { font-size:.78em; color:#8a8a8e; margin-top:.15em; }
  .p-actions { display:flex; justify-content:center; gap:.9em; margin:1em 0 1.1em; }
  .p-act { display:flex; flex-direction:column; align-items:center; gap:.3em; font-size:.62em; color:#007aff; }
  .p-act i { width:3.3em; height:3.3em; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .p-act svg { width:1.6em; height:1.6em; fill:#fff; }
  .p-rows { background:#fff; border-radius:.75em; text-align:left; }
  .p-row { padding:.55em .9em; border-bottom:.5px solid #e5e5ea; }
  .p-row:last-child { border-bottom:none; }
  .p-row small { display:block; font-size:.62em; color:#8a8a8e; }
  .p-row span { display:block; font-size:.82em; color:#007aff; }
  .p-save { margin-top:.9em; padding:.75em; border-radius:.75em; background:#007aff; color:#fff; font-size:.86em; font-weight:600; }
  .p-share { margin-top:.7em; font-size:.74em; text-decoration:underline; text-underline-offset:.2em; color:#3a3a3c; }

  .lock { position:absolute; inset:0; z-index:3; background:#1e2436; color:#fff; opacity:0; display:flex; flex-direction:column; align-items:center; }
  .lock .clock { margin-top:3.2em; font-size:3.6em; font-weight:300; letter-spacing:-.02em; }
  .lock .date { font-size:.8em; opacity:.8; }
  .banner { position:absolute; left:.7em; right:.7em; top:.7em; z-index:4; display:flex; gap:.6em; align-items:center; padding:.7em .8em;
    border-radius:1.1em; background:rgba(245,245,247,.96); color:#000; font-size:.74em; opacity:0; }
  .banner i { flex:0 0 2.2em; height:2.2em; border-radius:.55em; background:#007aff; display:flex; align-items:center; justify-content:center; }
  .banner svg { width:1.3em; height:1.3em; fill:#fff; }
  .banner b { display:block; }

  .sheet { position:absolute; left:0; right:0; bottom:0; z-index:2; background:#fff; border-radius:1.3em 1.3em 0 0; padding:1.2em 1.1em 1.4em;
    box-shadow:0 -.6em 2em rgba(0,0,0,.18); text-align:left; }
  .sheet::before { content:""; position:absolute; inset:-30em 0 100% 0; background:rgba(0,0,0,.35); }
  .sheet h4 { margin:0; font-size:1em; font-weight:700; }
  .sheet p { font-size:.68em; color:#6e6e73; margin:.25em 0 .8em; }
  .field { margin-bottom:.45em; padding:.6em .7em; border-radius:.6em; border:1px solid #e3c995; background:#f8f0df; font-size:.78em; }
  .field span { display:block; }
  .send { margin-top:.6em; padding:.7em; border-radius:.7em; background:#007aff; color:#fff; text-align:center; font-size:.84em; font-weight:600; }

  .stock { position:absolute; left:0; top:27.2em; z-index:4; width:14em; height:8.83em; border-radius:.7em; color:#fff;
    background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%), linear-gradient(135deg, #1c2340 0%, #0b0d18 100%);
    border:1px solid rgba(255,255,255,.16); padding:1.05em 1.1em; transform:rotate(-9deg); transform-origin:50% 50%;
    box-shadow:0 1em 2em -.6em rgba(0,0,0,.55), 0 0 2.5em var(--you-glow); }
  .stock .s-name { font-size:1.12em; font-weight:700; font-family:var(--font); font-stretch:85%; letter-spacing:-.01em; }
  .stock .s-role { font-size:.7em; opacity:.75; margin-top:.1em; font-family:var(--font); }
  .stock .s-foot { position:absolute; left:1.1em; right:1.1em; bottom:.9em; display:flex; justify-content:space-between; align-items:flex-end;
    font-size:.58em; opacity:.7; font-family:var(--font); }
  .stock svg { width:2.6em; height:2.6em; color:#8fb0f0; }
  .ripple { position:absolute; left:23.1em; top:12.6em; z-index:5; width:4em; height:4em; margin:-2em 0 0 -2em; border-radius:50%;
    border:.22em solid #8fb0f0; opacity:0; }
  .toast { position:absolute; left:0; top:4.2em; z-index:6; width:16.5em; padding:.8em .9em; border-radius:.9em; background:var(--surface-2);
    color:var(--ink); border:1px solid var(--line); box-shadow:0 1em 2.2em -1em rgba(0,0,0,.5); display:flex; gap:.7em; font-size:.82em; line-height:1.35; }
  .toast i { flex:0 0 2.3em; height:2.3em; border-radius:50%; background:var(--them); display:flex; align-items:center; justify-content:center; }
  .toast svg { width:1.25em; height:1.25em; fill:var(--on-them); }
  .toast b { display:block; font-weight:650; }
  .toast span { color:var(--muted); }

  .run .stock { animation:tap 1.7s cubic-bezier(.45,0,.2,1) .4s backwards; }
  .run .ripple { animation:ripple .9s ease-out 1.05s backwards; }
  .run .banner { animation:banner 1.3s ease .95s backwards; }
  .run .lock { animation:lock 2.1s linear backwards; }
  .run .p-share { animation:press .35s ease 2.55s backwards; }
  .run .sheet { animation:sheet .45s cubic-bezier(.2,.8,.2,1) 2.85s backwards; }
  .run .field { animation:fill .3s ease backwards; }
  .run .field:nth-of-type(1) { animation-delay:3.5s; }
  .run .field:nth-of-type(2) { animation-delay:3.65s; }
  .run .field:nth-of-type(3) { animation-delay:3.8s; }
  .run .send { animation:press .35s ease 4.25s backwards; }
  .run .toast { animation:toast .45s cubic-bezier(.2,.8,.2,1) 4.6s backwards; }
  @keyframes tap {
    0% { transform:rotate(-9deg); }
    40%, 62% { transform:translate(11.4em,-21.3em) rotate(-3deg); }
    100% { transform:rotate(-9deg); }
  }
  @keyframes ripple { 0% { opacity:.9; transform:scale(.4); } 100% { opacity:0; transform:scale(2.2); } }
  @keyframes banner { 0% { opacity:0; transform:translateY(-1em); } 18%, 80% { opacity:1; transform:none; } 100% { opacity:0; } }
  @keyframes lock { 0%, 88% { opacity:1; } 100% { opacity:0; } }
  @keyframes press { 0%, 100% { transform:none; } 45% { transform:scale(.96); opacity:.7; } }
  @keyframes sheet { from { transform:translateY(100%); } }
  @keyframes fill { from { background:#fff; border-color:#e5e5ea; color:transparent; } }
  @keyframes toast { from { opacity:0; transform:translateY(-.8em); } }
  .sheet::before { animation:inherit; animation-name:dim; }
  @keyframes dim { from { opacity:0; } }

  .replay { display:flex; align-items:center; gap:8px; margin:20px auto 0; padding:8px 12px; min-height:40px; border:none; background:none;
    color:var(--muted); font:inherit; font-size:15px; cursor:pointer; border-radius:8px; }
  .replay:hover { color:var(--ink); }
  .replay svg { width:16px; height:16px; fill:currentColor; }
  @media (prefers-reduced-motion: reduce) {
    .demo *, .demo *::before { animation:none !important; }
    .replay { display:none; }
  }

  /* Sections */
  .band { padding:96px 0; border-top:1px solid var(--line); }
  .band-head { max-width:40em; margin-bottom:48px; }
  .band-head p { margin-top:12px; color:var(--muted); }
  @media (max-width:640px) { .band { padding:64px 0; } .band-head { margin-bottom:32px; } }

  /* Two directions */
  .lanes { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .lane { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:32px; }
  .lane-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
  .lane-head i { width:14px; height:14px; border-radius:50%; flex:0 0 14px; }
  .lane.you .lane-head i { background:var(--you-text); }
  .lane.them .lane-head i { background:var(--them); }
  .lane ul { list-style:none; margin:0; padding:0; }
  .lane li { position:relative; padding:14px 0 14px 32px; border-top:1px solid var(--line); color:var(--muted); }
  .lane li strong { color:var(--ink); font-weight:600; }
  .lane li svg { position:absolute; left:0; top:17px; width:20px; height:20px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .lane.you li svg { stroke:var(--you-text); }
  .lane.them li svg { stroke:var(--them-text); }
  @media (max-width:820px) { .lanes { grid-template-columns:1fr; } .lane { padding:24px; } }

  /* Spec list */
  .spec { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:48px; }
  .spec dl { margin:0; }
  .spec .row { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:24px; padding:20px 0; border-top:1px solid var(--line); }
  .spec .row:last-child { border-bottom:1px solid var(--line); }
  .spec dt { font-weight:600; }
  .spec dd { margin:0; color:var(--muted); }
  @media (max-width:860px) { .spec { grid-template-columns:1fr; gap:24px; } .spec .row { grid-template-columns:1fr; gap:4px; } }

  /* Pricing */
  .plans { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px; align-items:start; }
  .plan { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:32px; }
  .plan h3 { margin-bottom:16px; }
  .amount { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .amount b { font-size:56px; line-height:1; font-weight:750; font-stretch:82%; letter-spacing:-.02em; }
  .amount span { color:var(--muted); }
  .plan .note { margin-top:12px; color:var(--muted); font-size:16px; }
  .plan ul { list-style:none; margin:24px 0; padding:0; font-size:16px; }
  .plan li { padding:8px 0 8px 28px; position:relative; }
  .plan li svg { position:absolute; left:0; top:12px; width:18px; height:18px; fill:none; stroke:var(--you-text); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .plan .btn { width:100%; }
  .team { border-color:var(--you-text); box-shadow:0 0 0 1px var(--you-text), 0 24px 48px -28px var(--you-glow); }
  .calc { margin:24px 0; padding:24px; border-radius:12px; background:var(--paper); }
  .calc label { font-weight:600; }
  .calc .count { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .select { position:relative; }
  .select select { appearance:none; -webkit-appearance:none; min-width:132px; min-height:52px; padding:8px 48px 8px 18px; border-radius:12px;
    border:1px solid var(--ghost-line); background:var(--surface); color:var(--ink); font:inherit; font-size:22px; font-weight:700;
    font-variant-numeric:tabular-nums; cursor:pointer; }
  .select select:hover { border-color:var(--ink); }
  @media (max-width:520px) { .select select { min-width:100px; padding-right:40px; } .select svg { right:12px; } }
  .select svg { position:absolute; right:16px; top:50%; width:18px; height:18px; margin-top:-9px; pointer-events:none;
    fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .calc .dash { display:flex; gap:12px; align-items:center; margin-top:16px; font-weight:400; cursor:pointer; min-height:44px; }
  .calc .dash input { width:20px; height:20px; accent-color:var(--you); cursor:pointer; }
  .totals { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
  .totals small { display:block; color:var(--muted); font-size:14px; }
  .totals b { font-size:32px; font-weight:700; font-variant-numeric:tabular-nums; }
  .calc .rate { margin-top:12px; font-size:15px; color:var(--muted); }
  @media (max-width:860px) { .plans { grid-template-columns:1fr; } .plan { padding:24px; } .amount b { font-size:48px; } }

  /* Steps + shipping */
  .steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; counter-reset:step; }
  .steps li { counter-increment:step; padding-top:20px; border-top:2px solid var(--rule); }
  .steps li::before { content:counter(step); display:block; font-size:36px; font-weight:700; font-stretch:82%; line-height:1; margin-bottom:12px; color:var(--you-text); }
  .steps p { margin-top:8px; color:var(--muted); font-size:16px; }
  @media (max-width:860px) { .steps { grid-template-columns:1fr 1fr; } }
  @media (max-width:520px) { .steps { grid-template-columns:1fr; } }
  .ship { margin-top:56px; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:48px; }
  .ship-note { margin-top:8px; color:var(--muted); font-size:16px; }
  .ship table { width:100%; border-collapse:collapse; font-size:16px; }
  .ship th, .ship td { text-align:left; padding:14px 12px 14px 0; border-bottom:1px solid var(--line); }
  .ship th { font-weight:600; color:var(--muted); font-size:15px; }
  .ship td:nth-child(2) { font-variant-numeric:tabular-nums; }
  @media (max-width:860px) { .ship { grid-template-columns:1fr; gap:16px; } }

  /* Questions */
  .faq { max-width:46em; }
  .faq details { border-top:1px solid var(--line); }
  .faq details:last-child { border-bottom:1px solid var(--line); }
  .faq summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; font-weight:600; cursor:pointer; min-height:44px; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary svg { flex:0 0 20px; width:20px; height:20px; stroke:var(--ink); stroke-width:2; fill:none; transition:transform .2s; }
  .faq details[open] summary svg { transform:rotate(45deg); }
  .faq details p { padding:0 0 20px; color:var(--muted); max-width:40em; }

  /* Closing */
  .closing { background:radial-gradient(ellipse at 88% 0%, rgba(227,201,149,.22), rgba(227,201,149,0) 55%), var(--you-fill); color:#fff; padding:80px 0; }
  .closing .wrap { display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
  .closing h2 { font-size:44px; }
  .closing p { margin-top:12px; opacity:.88; max-width:32em; }
  .closing .ctas { display:flex; gap:12px; flex-wrap:wrap; }
  .closing .btn-white { background:#fff; color:#1a1a5e; }
  .closing .btn-white:hover { background:#eef1f7; }
  .closing .btn-ghost { border-color:rgba(255,255,255,.55); color:#fff; }
  .closing .btn-ghost:hover { border-color:#fff; }
  .closing :focus-visible { outline-color:#fff; }
  @media (max-width:640px) { .closing { padding:56px 0; } .closing h2 { font-size:32px; } }

  footer { padding:48px 0 56px; font-size:15px; color:var(--muted); }
  footer .wrap { display:grid; grid-template-columns:1fr auto; gap:24px; }
  footer nav { display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:flex-end; }
  footer a { color:var(--muted); text-decoration:none; }
  footer a:hover { color:var(--ink); }
  footer p + p { margin-top:4px; }
  @media (max-width:640px) { footer .wrap { grid-template-columns:1fr; } footer nav { justify-content:flex-start; } }

/* Smallest phones: keep the product name on one line (after the hero sizes above) */
@media (max-width:380px) { .hero h1 { font-size:37px; } }