/* Arc Digital LLC — arcdigitalllc.com
   Static port of the Lovable site. No build step.

   Type follows the family: Newsreader for display, Hanken Grotesk for text,
   the same pairing boardingkit.com and wellkeptpet.app use. The Lovable build
   aliased BOTH tailwind `sans` and `serif` to Inter, so every `font-serif`
   class in the React source rendered as Inter. That is corrected here.

   Colour is Arc's own paper/ink/forest, converted from the HSL tokens in the
   old src/index.css. The two product cards carry their own scoped palettes so
   each app keeps its visual world inside the Arc page.

   No inline SVG anywhere. The App Store badge is a linked .svg file; the
   product marks are PNG. Arrows are typographic glyphs, not drawn paths. */

:root{
  --paper:#FAFAFA;        /* --paper 0 0% 98% */
  --band:#ECECE9;         /* --secondary 60 8% 92% */
  --ink:#0A0A0A;          /* --ink 0 0% 4% */
  --ink-secondary:#595959;/* --ink-secondary 0 0% 35% */
  --ink-muted:#878682;    /* --ink-muted 45 2% 52% */
  --hairline:#E0E0E0;     /* --hairline 0 0% 88% */
  --forest:#1A3D2E;       /* --forest 154 40% 17% */

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  --maxw:960px;
  --cardw:840px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink-secondary);
  font-size:17px; line-height:1.65;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; }
::selection{ background:#DCE4DE; color:var(--ink); }
:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.eyebrow{
  font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:.2em; color:var(--ink-muted);
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,250,.88);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.wordmark{
  font-family:var(--serif); font-size:20px; font-weight:500;
  letter-spacing:-.015em; color:var(--ink);
}
.nav-links{ display:flex; align-items:center; gap:26px; font-size:14.5px; }
.nav-links a{ color:var(--ink-secondary); transition:color .18s; }
.nav-links a:hover{ color:var(--ink); }

/* ---------- studio / hero ---------- */
.studio{ padding:110px 0 96px; }
.studio h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.5rem,6vw,3.5rem); line-height:1.1; letter-spacing:-.022em;
  color:var(--ink); max-width:14ch; margin-top:22px;
}
.lede{
  margin-top:20px; max-width:52ch; font-size:1.12rem;
  color:var(--ink-secondary); line-height:1.6;
}
.meta{
  margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-muted);
}
.meta .dot{ color:var(--hairline); }
.jump{
  display:inline-block; margin-top:38px; font-size:14.5px; color:var(--forest);
  border-bottom:1px solid var(--forest); padding-bottom:2px; transition:opacity .18s;
}
.jump:hover{ opacity:.7; }

/* ---------- products ---------- */
.products{
  background:var(--band); border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline); padding:76px 0 84px;
}
.products h2{
  font-family:var(--serif); font-weight:500; font-size:1.9rem; line-height:1.25;
  letter-spacing:-.018em; color:var(--ink); max-width:22ch; margin-top:12px;
}

/* Card shell. Colour comes from the per-product token block below, so the two
   cards share every rule here and differ only in their four variables. */
.card{
  position:relative; overflow:hidden; border-radius:16px;
  max-width:var(--cardw); margin:48px auto 0; padding:40px;
  background:var(--c-bg); color:var(--c-on-bg);
}
.card + .card{ margin-top:24px; }
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 80% 18%, var(--c-glow), transparent 60%);
}
.card-grid{
  position:relative; display:grid; grid-template-columns:1.3fr 1fr;
  gap:48px; align-items:center;
}

.card-boardingkit{
  --c-bg:#264E67; --c-on-bg:#FFFFFF; --c-accent:#F4A07A;
  --c-glow:rgba(244,160,122,.18); --c-rule:rgba(255,255,255,.14);
  --c-soft:rgba(255,255,255,.78); --c-btn-text:#1D3A4D;
}
.card-wellkeptpet{
  --c-bg:#F0EADE; --c-on-bg:#1F3A44; --c-accent:#C46F52;
  --c-glow:rgba(196,111,82,.10); --c-rule:rgba(31,58,68,.12);
  --c-soft:rgba(31,58,68,.75); --c-btn-text:#FFFFFF;
}

.lockup{ width:270px; max-width:70%; height:auto; margin-bottom:28px; }
.wkp-lockup{ display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.wkp-lockup img{ width:64px; height:64px; border-radius:16px; box-shadow:0 4px 14px rgba(31,58,68,.18); }
.wkp-lockup span{ font-family:var(--serif); font-size:1.6rem; letter-spacing:-.015em; color:var(--c-on-bg); }

.kicker{
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--c-accent);
}
.card h3{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.5rem,2.6vw,1.85rem); line-height:1.22; letter-spacing:-.02em;
  color:var(--c-on-bg); max-width:20ch; margin-top:12px;
}
.card p.blurb{ margin-top:16px; max-width:44ch; font-size:15.5px; line-height:1.6; color:var(--c-soft); }

/* Feature list. No icons — the old lucide glyphs were inline SVG. Two columns
   of hairline-separated rows read as a spec list rather than a badge grid. */
.features{
  margin-top:32px; max-width:440px;
  display:grid; grid-template-columns:1fr 1fr; gap:0 32px;
}
.features li{
  list-style:none; font-size:14.5px; color:var(--c-on-bg);
  padding:9px 0; border-bottom:1px solid var(--c-rule);
}
.features li:nth-last-child(-n+2){ border-bottom:none; }

.actions{ margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-size:14.5px; font-weight:600;
  background:var(--c-accent); color:var(--c-btn-text); transition:opacity .18s;
}
.pill:hover{ opacity:.88; }
.pill .arrow{ font-size:13px; }
.badge img{ height:44px; width:auto; transition:opacity .18s; }
.badge:hover img{ opacity:.85; }
.price{ margin-top:20px; font-size:12.5px; color:var(--c-soft); }

/* Shared device frame. Both screenshots are 1206×2622 captures with the
   Dynamic Island already in the image, so the frame adds no notch. */
.shot{ display:flex; align-items:center; justify-content:center; }
.device{
  width:238px; padding:8px; border-radius:42px; background:#15171A;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.device img{ width:100%; height:auto; border-radius:34px; }

/* ---------- contact ---------- */
.contact{ padding:76px 0 84px; }
.contact-grid{ margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.contact h2{
  font-family:var(--serif); font-weight:500; font-size:1.6rem;
  letter-spacing:-.018em; color:var(--ink);
}
.contact p{ margin-top:12px; font-size:15px; max-width:38ch; }
.contact-right{ border-left:1px solid var(--hairline); padding-left:64px; }
.email{
  display:inline-block; margin-top:10px; font-size:15.5px; color:var(--forest);
  border-bottom:1px solid rgba(26,61,46,.35); padding-bottom:1px; transition:opacity .18s;
}
.email:hover{ opacity:.7; }
.note{ margin-top:26px; font-size:12.5px; color:var(--ink-muted); }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--hairline); padding:48px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot-blurb{ margin-top:12px; font-size:14.5px; max-width:30ch; }
.foot-col ul{ margin-top:16px; list-style:none; }
.foot-col li + li{ margin-top:8px; }
.foot-col a{ font-size:14.5px; color:var(--ink-secondary); transition:color .18s; }
.foot-col a:hover{ color:var(--ink); }
.foot-base{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; gap:16px;
  font-size:12.5px; color:var(--ink-muted);
}

/* ---------- legal pages ----------
   /privacy and /terms use this block. `.legal` sets its own width and gutter
   rather than combining with `.wrap`; two single-class rules both setting
   max-width would depend on source order to resolve. */
.legal{
  max-width:760px; margin:0 auto; padding:56px 24px 80px;
  font-size:16.5px; line-height:1.7;
}
.legal h1{
  font-family:var(--serif); font-weight:500; font-size:2.3rem;
  letter-spacing:-.02em; color:var(--ink); line-height:1.15;
}
.legal h2{
  font-family:var(--serif); font-weight:500; font-size:1.45rem;
  letter-spacing:-.015em; color:var(--ink); margin-top:44px;
}
.legal h3{ font-size:1.02rem; font-weight:600; color:var(--ink); margin-top:28px; }
.legal h4{ font-size:.95rem; font-weight:600; color:var(--ink); margin-top:24px; }
.legal p{ margin-top:14px; }
.legal ul{ margin-top:14px; padding-left:22px; }
.legal li{ margin-top:8px; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal a{ color:var(--forest); text-decoration:underline; text-underline-offset:2px; }
.legal hr{ border:none; border-top:1px solid var(--hairline); margin:30px 0 0; }
.legal-meta{ font-size:14.5px; color:var(--ink-muted); }
.legal-meta:first-of-type{ margin-top:18px; }
.legal-updated{ margin-top:44px; font-size:13px; color:var(--ink-muted); }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .card-grid{ grid-template-columns:1fr; gap:36px; }
  .shot{ display:none; }
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .contact-right{ border-left:none; padding-left:0; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:620px){
  .legal{ padding:40px 22px 60px; }
  .legal h1{ font-size:1.9rem; }
  .studio{ padding:72px 0 64px; }
  .nav-links{ gap:18px; font-size:14px; }
  .card{ padding:30px 24px; border-radius:14px; }
  .features{ grid-template-columns:1fr; }
  .features li:nth-last-child(-n+2){ border-bottom:1px solid var(--c-rule); }
  .features li:last-child{ border-bottom:none; }
  .lockup{ width:210px; max-width:78%; }
  .foot-grid{ grid-template-columns:1fr; }
  .foot-base{ flex-direction:column; gap:6px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}