/* REALsite marketing pages: the shared skeleton every showcase page loads first.
   Page-specific rules stay inline in each view and may override these. */
:root {
      --paper: #f4f1ea; --ink: #1b2320; --muted: #5e6963; --line: #e3ddd0;
      --spruce: #1f6d53; --spruce-deep: #175843; --card: #ffffff;
      --serif: "Instrument Serif", Georgia, serif;
    }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Instrument Sans", sans-serif; line-height: 1.55; }
.shell { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.site { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 0; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.wordmark svg { border-radius: 7px; }
.wordmark-text { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--ink); }
.wordmark-text em { color: var(--spruce); }
.site-nav { display: flex; gap: 1.6rem; align-items: center; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.site-nav a:hover { color: var(--spruce); }
.site-nav a.cta, .site-nav a.cta:hover { color: #ffffff; }
.cta {
      background: var(--spruce-deep); color: #ffffff; text-decoration: none; font-weight: 600;
      padding: 0.65rem 1.25rem; border-radius: 8px; font-size: 1rem; letter-spacing: 0.01em;
    }
.cta:hover { background: #114536; }
.kicker { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--spruce); margin: 0 0 1rem; }
.band { border-top: 1px solid var(--line); padding: 3.5rem 0 4rem; }
a.mail { color: var(--spruce); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a.mail:hover { text-decoration-color: var(--spruce); }
footer { border-top: 1px solid var(--line); padding: 3rem 0 2.5rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; }
.foot-brand p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; max-width: 22rem; margin: 1rem 0 0; }
.foot-brand .foot-made { color: var(--ink); font-family: var(--serif); font-style: italic; font-size: 1rem; margin-top: 0.6rem; }
.foot-col { display: grid; gap: 0.35rem; align-content: start; }
.foot-col h4 { margin: 0 0 0.4rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.foot-col a { color: var(--ink); text-decoration: none; font-size: 0.93rem; padding: 0.15rem 0; }
.foot-col a:hover { color: var(--spruce); }
.foot-utility { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:2rem; }
.foot-utility a { color:var(--muted); font-size:.8rem; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.foot-utility a:hover { color:var(--spruce); text-decoration:underline; }
.smallprint { color: #66706a; font-size: 0.78rem; margin: 2.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.5rem; }
  .foot-brand { grid-column: 1 / -1; }
}
.menu-btn { display: none; }
.site-right { display: flex; align-items: center; gap: 0.9rem; }
p a:not(.cta):not(.wordmark), li a:not(.cta) { color: var(--spruce); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
p a:not(.cta):hover, li a:not(.cta):hover { text-decoration-color: var(--spruce); }
@media (max-width: 1080px) {
      .site-nav a:not(.cta) { display: none; }
      header.site { position: relative; }
      .menu-btn {
        display: grid; place-items: center; width: 42px; height: 42px; cursor: pointer;
        border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
      }
      .mnav-open .site-nav {
        position: absolute; top: calc(100% - 0.4rem); left: 0; right: 0; z-index: 60;
        display: grid; gap: 0.1rem; background: var(--card); border: 1px solid var(--line);
        border-radius: 12px; padding: 0.5rem; box-shadow: 0 18px 44px rgba(20, 28, 24, 0.16);
      }
      .mnav-open .site-nav a { display: block !important; padding: 0.7rem 0.9rem; font-size: 1rem; }
      .mnav-open .site-nav a.cta { text-align: center; margin-top: 0.3rem; }
    }

@media (max-width: 380px) {
  header.site { gap: .5rem; }
  .site .wordmark { gap: .4rem; flex-shrink: 0; }
  .site .wordmark-text { font-size: 1.25rem; }
  .site-right { gap: .5rem; flex-shrink: 0; }
  .site-nav a.cta { font-size: .875rem; padding: .65rem .6rem; white-space: nowrap; }
}

/* Keyboard focus on the custom-shaped controls. */
.cta:focus-visible, .ghost:focus-visible, .menu-btn:focus-visible, .foot-col a:focus-visible, .site-nav a:focus-visible { outline: 2px solid var(--spruce); outline-offset: 3px; border-radius: 8px; }
/* Sticky "start" bar on phones, shown once the hero has scrolled away. */
.sticky-cta { display: none; text-decoration: none; color: inherit; }
@media (max-width: 860px) {
  :root { --sticky-cta-clearance: calc(6rem + env(safe-area-inset-bottom)); scroll-padding-bottom: var(--sticky-cta-clearance); }
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line);
    box-shadow: 0 -12px 32px rgb(27 35 32 / 0.12); visibility: hidden;
  }
  .sticky-cta.on { visibility: visible; }
  .sticky-cta span { font-size: 0.85rem; color: var(--muted); }
  /* The button keeps its own white — the muted span rule above outranks .cta. */
  .sticky-cta .cta { padding: 0.6rem 1.05rem; white-space: nowrap; color: #ffffff; font-size: 0.95rem; }
  body.has-sticky-cta { padding-bottom: var(--sticky-cta-clearance); }
}

/* Side-by-side tables (pricing, switch) */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.93rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.compare tbody th { font-weight: 600; width: 22%; color: var(--ink); }
.compare td { color: var(--muted); }
.compare td:first-of-type { color: var(--ink); font-weight: 500; background: rgb(31 109 83 / 0.06); }
.compare-note { font-size: 0.85rem; margin-top: 1rem; max-width: 46rem; }

/* Links inside copy (FAQ answers, notes, promises) */
.band p a:not(.cta), .band dd a:not(.cta), .band li a:not(.cta) { color: var(--spruce); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.band p a:not(.cta):hover, .band dd a:not(.cta):hover, .band li a:not(.cta):hover { color: var(--ink); }
.looks-collection-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.25rem}.looks-collection-strip[hidden]{display:none}.looks-collection-strip a{text-decoration:none;color:var(--ink);min-width:0}.looks-collection-strip a>span{height:150px;padding:.8rem;background:#e8e9e1;display:flex;justify-content:center;align-items:center}.looks-collection-strip img{max-width:100%;max-height:100%;width:auto;object-fit:contain;box-shadow:0 5px 15px #27312820}.looks-collection-strip small{display:block;font-size:.75rem;margin-top:.6rem}@media(max-width:600px){.looks-collection-strip{gap:.6rem}.looks-collection-strip a>span{height:110px;padding:.6rem}.looks-collection-strip small{font-size:.66rem}}

/* Drawn icons inherit the link colour on every platform, including iOS. */
.showcase-external-icon { display: inline-block; width: .85em; height: .85em; vertical-align: -.05em; flex-shrink: 0; }