/* 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}
/* The build's date beside its number on What's new. */
.doc h2 small{font:500 15px Inter,var(--sys);color:var(--muted);text-transform:none;letter-spacing:0;margin-left:6px}
.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);
}
/* Screenshots only. The logo and the footer icon are NOT screenshots and
   must never be wrapped in a frame — a find-and-replace once caught them
   both, and the result was a squashed 36x48 icon in the masthead that
   looked like a rendering bug rather than a markup one. */
.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%}


/* ---------- User guide ----------
   One long page, 13 sections, every one linkable (/guide/#trip-miles), so a
   TestFlight note can point straight at the paragraph it means. Contents
   ride alongside on a wide screen and sit at the top on a phone. Shots use
   the same CSS iPhone frame as the home page, smaller. */

.guide{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;
       max-width:1140px;margin:0 auto;padding:60px 28px 90px}
.guide .toc{position:sticky;top:110px;align-self:start;font-size:14px;
            max-height:calc(100vh - 130px);overflow:auto}
.guide .toc .label{margin-bottom:10px}
.guide .toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.guide .toc li{counter-increment:toc;margin:0}
.guide .toc a{display:flex;gap:10px;padding:6px 0;color:var(--muted);
              text-decoration:none;line-height:1.35}
.guide .toc a::before{content:counter(toc,decimal-leading-zero);
                      color:var(--amber);font-weight:600;font-size:12px;
                      padding-top:2px;flex:none;width:20px}
.guide .toc a:hover{color:var(--text)}

.guide article{min-width:0;max-width:760px}
.guide article > header h1{font-size:clamp(42px,5.4vw,64px);margin-bottom:12px}
.guide .lede{max-width:56ch}

.guide section{padding:0;margin:0 0 30px;border-top:1px solid var(--line);
               padding-top:46px;scroll-margin-top:100px}
.guide section > h2{font-size:clamp(30px,3.6vw,42px);margin-bottom:10px}
.guide h3{font:600 20px Inter,var(--sys);text-transform:none;letter-spacing:0;
          margin:34px 0 10px;scroll-margin-top:100px}
.guide p,.guide li{color:var(--body);font-size:16.5px}
.guide a{color:var(--amber)}
.guide ol.steps{padding-left:22px;margin:0 0 18px}
.guide ol.steps li{margin:0 0 8px;padding-left:4px}
.guide ol.steps li::marker{color:var(--amber);font-weight:600}
.guide strong{color:var(--text);font-weight:600}
.guide .ui{color:var(--text);font-weight:500;white-space:nowrap}

.guide .callout{background:var(--ink-soft);border:1px solid var(--line);
                border-left:3px solid var(--amber);border-radius:0 12px 12px 0;
                padding:18px 20px;margin:22px 0}
.guide .callout p:last-child{margin:0}
.guide .callout.why{border-left-color:var(--muted)}

/* One shot, or a row of them, each with its caption. */
.shots{display:flex;flex-wrap:wrap;gap:30px 26px;margin:26px 0 30px}
.shots figure{margin:0;width:224px;flex:none}
.shots figcaption{font-size:13.5px;color:var(--muted);margin-top:12px;
                  line-height:1.45;text-align:center}
.shots .device{width:100%}
/* Every shot is the same iPhone 17 Pro capture, so reserve its shape before
   it loads. Without this, lazy images above a #link push the page down
   after the jump lands, and the heading ends up off screen. */
.shots .device img{aspect-ratio:1206/2622;object-fit:cover}

/* Click a shot to read it. At 224px a phone screen is a fifth of its real
   size and the text inside is decoration; the viewer shows the sharper
   img/zoom copy at the full height of the window. */
.shots .device img{cursor:zoom-in}
.viewer{border:0;padding:0;background:transparent;max-width:none;max-height:none;
        width:100%;height:100%;overflow:hidden;color:var(--text)}
.viewer::backdrop{background:rgba(8,6,4,.9)}
.viewer figure{margin:0;height:100%;display:flex;flex-direction:column;
               align-items:center;justify-content:center;gap:16px;
               padding:48px 64px 24px;box-sizing:border-box}
.viewer img{display:block;max-height:100%;max-width:100%;min-height:0;flex:1 1 auto;
            object-fit:contain;border-radius:18px;cursor:zoom-out;
            box-shadow:0 30px 70px rgba(0,0,0,.6)}
.viewer figcaption{font-size:15px;color:var(--body);text-align:center;max-width:60ch;
                   line-height:1.45;flex:none}
.viewer figcaption .count{color:var(--muted);margin-right:10px;white-space:nowrap}
.viewer button{position:absolute;top:50%;transform:translateY(-50%);
               width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
               background:rgba(255,255,255,.08);color:var(--text);font:400 26px/1 var(--sys);
               cursor:pointer}
.viewer button:hover{background:rgba(255,255,255,.16)}
.viewer .prev{left:14px}
.viewer .next{right:14px}
.viewer .close{top:14px;right:14px;transform:none;width:40px;height:40px;font-size:22px}
.viewer button[hidden]{display:none}
@media(max-width:600px){
  .viewer figure{padding:60px 12px 72px}
  .viewer .prev,.viewer .next{top:auto;bottom:12px;transform:none}
  .viewer figcaption{font-size:13.5px}
}

/* A shot that has to come from a real phone and hasn't yet. */
.shots .pending{aspect-ratio:1206/2622;border:1px dashed rgba(240,165,0,.4);
                border-radius:15%/6.9%;display:grid;place-items:center;
                text-align:center;padding:20px;color:var(--muted);font-size:13px;
                background:var(--ink-soft)}

@media(max-width:860px){
  .guide{grid-template-columns:1fr;gap:28px;padding-top:40px}
  .guide .toc{position:static;max-height:none;background:var(--ink-soft);
              border:1px solid var(--line);border-radius:14px;padding:18px 20px}
  .guide .toc ol{columns:2;column-gap:18px}
  /* The masthead wraps to two rows here, so a jumped-to heading needs
     more room above it or its first line hides under the menu. */
  .guide section,.guide h3{scroll-margin-top:140px}
  .shots{justify-content:center}
  .shots figure{width:min(224px,44%)}
}
@media(max-width:480px){
  .guide .toc ol{columns:1}
  .shots figure{width:min(260px,80%)}
}
.row-shot{display:block;width:min(420px,100%);height:auto;border-radius:12px;margin:14px 0 26px}