/* Dipstick — dipstickcarcare.com
   One stylesheet for every page. No trackers, no analytics, no third-party
   anything except the two font files: the app's privacy policy says nothing
   is collected, and a site that quietly phoned home would make that a lie. */

:root{
  --ink:#12100E;
  --ink-soft:#1A1714;
  --paper:#F7F4EF;
  --paper-2:#EDE8E0;
  --amber:#F0A500;
  --amber-deep:#C97F00;
  --text:#F3EFE9;
  --muted:#A79E93;
  --body:#D6CFC5;
  --line:rgba(255,255,255,.08);
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font:16px/1.65 Inter,var(--sys);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
a{color:inherit}

/* Faint machined texture. Large flat dark areas look dead without it. */
.grain{position:relative}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:22px 22px;
}
.grain > *{position:relative}

/* ---------- Masthead ---------- */

nav{position:sticky;top:0;z-index:20;background:rgba(18,16,14,.88);
    backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;gap:32px;height:84px}

/* The logo is set in the SYSTEM font, mixed case — on an Apple device that
   is San Francisco, the same face the app uses. The condensed display face
   is for headlines only. */
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.logo img{width:48px;height:48px;border-radius:12px;display:block;flex:none;
          border:1px solid rgba(240,165,0,.28);
          box-shadow:0 0 0 1px rgba(0,0,0,.5),0 4px 14px rgba(240,165,0,.10)}
.logo .mark{display:flex;flex-direction:column;gap:3px;line-height:1}
.logo .name{font:600 31px var(--sys);letter-spacing:.012em}
/* Amber on the "i" of STICK — never the one in "Dip". The app does
   Text("Dipst") + Text("i").amber + Text("ck"): the word is the tool. */
.logo i{color:var(--amber);font-style:normal}
.logo .tag{font:400 12px var(--sys);color:var(--muted);letter-spacing:.005em;
           white-space:nowrap}
.logo .tag b{color:var(--amber);font-weight:400}

.navlinks{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--muted)}
.navlinks a{color:inherit;text-decoration:none}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--text)}

.btn{display:inline-block;background:var(--amber);color:#1B1400;font-weight:600;
     font-size:14.5px;padding:11px 20px;border-radius:999px;text-decoration:none;
     white-space:nowrap}
.btn:hover{background:#FFB92A}
.btn.big{padding:14px 26px;font-size:15.5px}
.btn.ghost{background:transparent;color:var(--text);
           border:1px solid rgba(255,255,255,.22)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}

/* ---------- Type ---------- */

h1{font:700 clamp(46px,6.4vw,80px)/0.95 "Barlow Condensed",var(--sys);
   text-transform:uppercase;margin:0 0 22px;letter-spacing:.005em}
h1 em{font-style:normal;color:var(--amber);display:block}
h2{font:700 clamp(32px,4.3vw,52px)/1.03 "Barlow Condensed",var(--sys);
   text-transform:uppercase;margin:0 0 18px}
h3{font:700 21px "Barlow Condensed",var(--sys);text-transform:uppercase;
   margin:12px 0 8px;letter-spacing:.03em}
.label{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
       color:var(--amber);margin-bottom:14px;font-weight:600}
.lede{font-size:18.5px;color:var(--body);margin:0 0 26px}
p{margin:0 0 16px}

/* ---------- Sections ---------- */

section{padding:86px 0}
.band{background:var(--paper);color:var(--ink)}
.band .label{color:var(--amber-deep)}
.band p{color:#5C5347}
.band .card{background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.07)}
.band .card p{color:#5C5347}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.card{background:var(--ink-soft);border:1px solid var(--line);
      border-radius:16px;padding:24px}
.card p{margin:0;font-size:14.5px;color:var(--body)}
.ico{width:38px;height:38px;border-radius:10px;background:var(--amber);
     display:grid;place-items:center;font-size:19px}

/* how-it-works steps: copy one side, a real screenshot the other */
.step{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
      padding:52px 0}
.step:nth-child(even) .copy{order:2}
/* The frame carries the size and the shadow now; see "iPhone frames". */
.stepno{display:flex;align-items:center;gap:12px;font-size:12.5px;
        letter-spacing:.16em;text-transform:uppercase;font-weight:600;
        color:var(--amber);margin-bottom:14px}
.stepno::after{content:"";height:1px;width:44px;background:currentColor;opacity:.5}

/* ---------- Marquee ---------- */

.ticker{background:var(--amber);color:#1B1400;overflow:hidden;
        border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.ticker div{display:flex;gap:34px;padding:13px 0;white-space:nowrap;
            font:700 19px "Barlow Condensed",var(--sys);text-transform:uppercase;
            letter-spacing:.05em;animation:slide 26s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker div{animation:none}}

/* ---------- Long-form pages (privacy, support) ---------- */

.doc{max-width:680px;margin:0 auto;padding:70px 28px 90px}
.doc h1{font-size:clamp(38px,5vw,56px);margin-bottom:10px}
.doc .updated{color:var(--muted);font-size:14px;margin:0 0 38px}
.doc h2{font-size:22px;text-transform:none;letter-spacing:0;
        margin:38px 0 10px;font-family:Inter,var(--sys);font-weight:600}
.doc p,.doc li{color:var(--body);font-size:16.5px}
.doc a{color:var(--amber)}
.doc .callout{background:var(--ink-soft);border:1px solid var(--line);
              border-left:3px solid var(--amber);border-radius:0 12px 12px 0;
              padding:20px 22px;margin:26px 0}
.doc .callout p:last-child{margin:0}

/* ---------- Footer ---------- */

footer{padding:54px 0;border-top:1px solid var(--line);
       color:var(--muted);font-size:14px}
.footrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
footer img{width:56px;height:56px;border-radius:13px;flex:none;
           border:1px solid rgba(240,165,0,.25)}
footer a{color:var(--body)}
footer strong{color:var(--text)}

@media(max-width:860px){
  .navrow{height:auto;padding:16px 0;flex-wrap:wrap;gap:16px}
  .navlinks{order:3;width:100%;margin-left:0;justify-content:space-between;gap:12px}
  .logo .name{font-size:26px}
  .logo img{width:42px;height:42px}
  .cards{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:32px;padding:40px 0}
  .step:nth-child(even) .copy{order:0}
  section{padding:60px 0}
}


/* ---------- iPhone frames ----------
   Drawn in CSS rather than baked into the screenshots, so one set of plain
   captures from the simulator can be reframed, recoloured or replaced
   without going back to Xcode. The captures already include the real status
   bar, and the island sits in the gap it leaves between the clock and the
   battery — which is exactly where the hardware puts it.

   Every dimension is a percentage of the frame's own width, so a device at
   236px and one at 260px stay in proportion. */

.device{
  position:relative;
  /* Real bezels are thin. Anything thicker reads as an older phone. */
  padding:2.5%;
  border-radius:15%/6.9%;
  background:linear-gradient(152deg,#4A4A4E 0%,#1D1D1F 26%,#111113 62%,#3A3A3E 100%);
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 0 0 3px rgba(0,0,0,.85);
}
.device img{
  display:block;width:100%;border-radius:11.5%/5.3%;
  border:0;box-shadow:none;
}
/* Dynamic Island */
/* Sits level with the clock and the battery, in the gap the status bar
   leaves for it. Too high and it reads as a second black bar above the
   screen rather than a cutout in it. */
.device::after{
  content:"";position:absolute;left:50%;top:5.6%;transform:translateX(-50%);
  width:25.5%;aspect-ratio:6.2/1;background:#000;border-radius:999px;
}
/* The glassy edge highlight down the left side. Subtle: at full strength it
   reads as a sticker rather than a phone. */
.device::before{
  content:"";position:absolute;inset:0;border-radius:15%/6.9%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.16) 0%,transparent 14%,
             transparent 86%,rgba(255,255,255,.10) 100%);
}
.band .device{box-shadow:0 24px 54px rgba(0,0,0,.22),
              inset 0 0 0 1px rgba(255,255,255,.14),
              inset 0 0 0 3px rgba(0,0,0,.85)}

/* In the how-it-works steps the frame replaces the bare screenshot. */
.step .device{width:250px;margin:0 auto}
.step .device img{width:100%}