/* The accent is Copy Shelter's own, taken from the app icon rather than picked.
   The icon is a gradient between #4A91F0 and #79B2FF, hue 214, saturation 0.85.
   Everything else in this file is Still Dock's stylesheet unchanged, because
   the layout is meant to be identical and the colour is not.

   Two tokens carry it and they do different jobs. --accent is a colour text and
   borders are drawn IN, so on a dark ground it has to be light. --on-accent is
   what gets drawn ON it. One token doing both is how a primary button ends up
   at 3 to 1. The icon's own #4A91F0 is 3.21 against white, so light mode uses
   the same hue and saturation at lightness 0.46, #1267D9, which is 5.29. Dark
   mode uses the icon's light end, #79B2FF, at 7.95 on the panel, with #0B1B33
   drawn on it at 7.90. check-site.py fails the build under 4.5 either way. */
:root{--cream:#F1EBE8;--danger:#7A1A12;--ink:#241F1C;--muted:#6E655E;--ink-soft:#4A423C;--rule:#A9A099;--line:#E4DBD5;--bg:#FBF8F6;--panel:#fff;--accent:#1267D9;--accent-bright:#4A91F0;--on-accent:#FFFFFF;--ok:#18813F}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:920px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:660px}
/* the demo, its screenshot and four cards need room the 660px column cannot give */
.wrap.wide{max-width:1440px}
section{padding:76px 0}
.band{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body > nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav{max-width:920px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;color:var(--ink)}
.navlinks a{margin-left:22px;color:var(--ink-soft);text-decoration:none;font-size:15px}
.navlinks a:hover{color:var(--ink)}
.hero{padding:56px 0 68px;text-align:center}
.hero .wrap{max-width:1040px}
.hero-home .wrap{max-width:1360px}
/* Title, text and buttons on the left, the app on the right. A phone stacks them. */
.herogrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:0 56px;align-items:center;text-align:left}
.herogrid h1{margin:0 0 16px}
.herogrid .lede{max-width:none;margin:0 0 32px}
.herocta{max-width:480px;margin:0}
.herogrid .heroshot{margin:0}
.btn.btn-full{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;padding:16px 22px;font-size:17px;margin-bottom:12px;text-decoration:none}
.btn.btn-full:last-child{margin-bottom:0}
.btn-full img,.btn-full svg{flex:none;display:block}
h1{font-size:52px;line-height:1.08;letter-spacing:-.025em;margin:0 0 18px;font-weight:660}
.lede{font-size:20px;color:var(--ink-soft);max-width:600px;margin:0 auto 32px}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:11px;font-weight:560;font-size:16px;text-decoration:none;border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn:any-link{color:var(--ink);background:#fff}
.btn-primary:any-link{color:#fff;background:var(--ink)}
.soon{margin-top:18px;font-size:15px;color:var(--ink-soft)}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:640;margin:0 0 14px}
.big{font-size:27px;line-height:1.32;letter-spacing:-.015em;margin:0 0 18px;font-weight:600}
h3{font-size:17px;margin:0 0 6px}
.muted{color:var(--ink-soft)}.small{font-size:15px}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:30px 0 0}
.premiumnote{margin:26px 0 0;text-align:center;font-size:14px;color:var(--muted)}
/* Two across, and each card shows the app doing the thing the card describes.
   That is what replaced the scroll-to-demo jump. */
.card{flex:1 1 calc((100% - 20px)/2);max-width:calc((100% - 20px)/2)}
.card{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:18px;flex:0 1 calc((100% - 32px)/3);max-width:calc((100% - 32px)/3)}
.cardtext{min-width:0}
.cardshot{display:block;min-width:0;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#FAF7F2;line-height:0}
.cardshot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.card p{margin:0;color:var(--ink-soft);font-size:15.5px}
.tablewrap{overflow-x:auto;margin:24px 0 14px}
table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}
/* Pin the feature names. Without this the row labels scroll away and the
   ticks on the right become unreadable. border-collapse drops per-cell
   borders on sticky cells, so the divider is drawn with a shadow. */
thead th:first-child,tbody td:first-child{position:sticky;left:0;z-index:2;background:var(--panel)}
thead th:first-child{z-index:3}
.tablewrap.is-scrolled thead th:first-child,
.tablewrap.is-scrolled tbody td:first-child{box-shadow:8px 0 8px -8px rgba(90,79,70,.22)}
th{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
/* A heading that links, such as Free and Pro over the comparison, had no colour of
   its own and drew in the browser's default blue, near invisible on the dark ground (F-795). */
th a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
thead th:not(:first-child),tbody td:not(:first-child){text-align:center;width:190px}
td.y{color:var(--ok);font-weight:640}
td.n{color:var(--muted)}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-weight:570;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";display:inline-block;width:18px;color:var(--muted)}
details[open] summary::before{content:"\2212"}
details p{margin:10px 0 0 18px;color:var(--ink-soft);font-size:16px}
/* ---- "Why I Built Still Dock" ---- */
/* Block flow, not grid: the heading spans the full width and the photo floats so
   the story wraps around it, rather than sitting in a column beside it. The
   figure must stay AFTER the heading and BEFORE the body in source order, since
   a float only affects content that follows it. */
.builder{display:block}
.builderhead{font-size:34px;line-height:1.15;letter-spacing:-.02em;font-weight:660;margin:0 0 22px;text-transform:none;color:var(--ink);text-align:center}
.builderphoto{float:right;width:320px;margin:4px 0 20px 36px;shape-margin:36px}
.builderphoto img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 14px 34px rgba(90,79,70,.20)}
/* no overflow/display that would make a new formatting context here: that would
   stop the text wrapping around the floated photo entirely */
.builderbody{}
.builderbody p{margin:0 0 16px;font-size:17px;color:var(--ink-soft)}
.builderbody a{color:var(--accent)}
.buildersign{font-weight:640;color:var(--ink) !important;margin-top:22px !important}
@media (max-width:760px){
  /* too narrow to wrap text beside a photo, so stack it instead */
  .builderphoto{float:none;width:auto;max-width:260px;margin:0 auto 22px}
  .builderhead{font-size:29px;margin:0 0 18px}
}
.ctas-left{justify-content:flex-start;margin:22px 0 14px}

/* ---- pricing ---- */
/* Four cards in the approved order, each with its own button. Column flex pushes every
   button to the same height whatever the copy above it. The call-out sits as a tab on the
   card's top edge. */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:12px 0 14px;align-items:stretch}
.plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px 18px 18px;display:flex;flex-direction:column;gap:8px}
.plan-best{border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.planflag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:600;padding:3px 10px;border-radius:6px;border:1px solid var(--accent);color:var(--on-accent);background:var(--accent)}
.planflag-quiet{background:var(--panel);color:var(--accent)}
.plan h2{font-size:16px;font-weight:600;margin:0;text-transform:none;letter-spacing:0;color:var(--ink)}
.planprice{margin:0;color:var(--muted)}
.planprice .amount{font-size:32px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.plannote{margin:0 0 10px;font-size:13.5px;color:var(--muted)}
.plan .btn{margin-top:auto;text-align:center;line-height:1.2;padding:11px 10px;font-size:15px;white-space:nowrap;border-color:var(--accent);color:var(--accent);background:var(--panel)}
.plan .btn-primary{background:var(--accent);color:var(--on-accent)}
.planfine{margin:0;text-align:center;font-size:13.5px;color:var(--muted)}
.currency-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 22px}
/* an author display: rule beats the hidden attribute, so restate it */
.currency-row[hidden]{display:none}
.currency-row label{font-size:14px;font-weight:600;color:var(--ink-soft)}
.currency-row select{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink)}
.tablewrap{margin-top:0}
@media (max-width:900px){.plans{grid-template-columns:1fr 1fr;row-gap:24px}}
@media (max-width:560px){.plans{grid-template-columns:1fr}}

/* ---- legal pages (privacy, terms) ---- */
.legalhead{padding-top:52px;padding-bottom:8px}
.backlink{display:inline-block;margin-bottom:22px;font-size:15px;color:var(--ink-soft);text-decoration:none}
.backlink:hover{color:var(--ink)}
.legalhead h1{font-size:40px;margin:0 0 10px}
.legalmeta{color:var(--ink-soft);font-size:15px;margin:0}
.legal{padding-top:20px;padding-bottom:76px}
.legal h2{font-size:21px;line-height:1.3;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-weight:620;margin:38px 0 10px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:16.5px;font-weight:600;margin:22px 0 6px}
.legal p{margin:0 0 14px;color:var(--ink-soft);font-size:16.5px}
.legal ul{margin:0 0 14px;padding-left:22px;color:var(--ink-soft);font-size:16.5px}
.legal li{margin:6px 0}
.legal a,.legalmeta a{color:var(--accent)}
.legal strong{color:var(--ink);font-weight:600}
/* The changelog. One release per article, told apart by a rule rather than by
   the reader counting headings: eight releases with no separation read as one
   very long release. */
.changelog .release{border-top:1px solid var(--line);padding-top:34px;margin-top:34px}
.changelog .release:first-of-type{border-top:0;padding-top:0;margin-top:0}
.changelog .release h2{margin-top:0}
/* Secondary, because the version is the name and the build is a detail under
   it. At the heading's own size and colour it read as part of the name. */
.changebuild{font-size:15px;font-weight:500;color:var(--muted);margin-left:6px}
.releasedate{font-size:15px;color:var(--muted);margin:0 0 16px}
.callout{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:0 0 30px}
.callout p{margin:0;color:var(--ink);font-size:17px}
.callout p + p{margin-top:10px;color:var(--ink-soft);font-size:16px}
.legal .hr{border:0;border-top:1px solid var(--line);margin:34px 0}

footer{padding:56px 0 64px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:15px}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--ink)}
.footcols{display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
.footcol h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:660;margin:0 0 14px}
.footcol ul{list-style:none;margin:0;padding:0}
.footcol li{margin:0 0 11px}
.footcol a{font-size:15px}
.footbase{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:14px}
@media (max-width:860px){.footcols{grid-template-columns:repeat(3,1fr);gap:30px 24px}}
@media (max-width:640px){h1{font-size:38px}section{padding:56px 0}
.nav{flex-wrap:nowrap;justify-content:space-between;padding:10px 18px}
.navright{display:flex;align-items:center;gap:14px}
/* Phones only (owner, 5 Oct 2026): Pro beside Download, the rest under the menu button. */
.navpro{font-weight:600;color:var(--ink);text-decoration:none;padding:7px 6px;line-height:1.2}
@media (max-width:640px){.nav{padding:10px 14px}.navright{gap:8px}.brand{gap:8px}.brand span{white-space:nowrap}.navpro{padding:6px 4px;font-size:15px}.navright .navdl{padding:8px 13px}}
.navpro:hover{color:var(--accent)}
.navlinks{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:2px;padding:6px 18px 14px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 10px 24px rgba(90,79,70,.10)}
.navlinks.is-open{display:flex}
.navlinks a{margin-left:0;font-size:16px;padding:9px 0}
.footcols{grid-template-columns:repeat(2,1fr)}
.btn.btn-full{font-size:15.5px;padding:15px 14px;gap:9px}}
@media (max-width:860px){
  .herogrid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
  .heroleft,.heroright{display:contents}
  .herogrid h1{order:1}
  .herogrid .lede{order:2;max-width:640px;margin:0 auto 32px}
  .herogrid .herocta{order:3;width:100%;max-width:640px;margin:0 auto}
  .herogrid .heroshot{order:4;width:100%;margin:28px auto 0}
}
@media (prefers-color-scheme:dark){:root{--cream:#232020;--danger:#FFB4A8;--ink:#EFE9E5;--muted:#A79D96;--ink-soft:#C8BEB6;--line:#3A3431;--bg:#151313;--panel:#1C1A19;--accent:#79B2FF;--accent-bright:#79B2FF;--on-accent:#0B1B33;--ok:#1E9E43}
.btn{background:#2A2725;border-color:#3A3431;color:var(--ink)}
.btn-primary{background:#EFE9E5;color:#191716;border-color:#EFE9E5}
.btn:any-link{color:var(--ink);background:#2A2725}
.btn-primary:any-link{color:#191716;background:#EFE9E5}
body > nav{background:rgba(21,19,19,.86)}}

/* ---- guides ---- */
.legal pre{margin:0 0 18px;background:#231F1D;border-radius:10px;padding:14px 16px;overflow-x:auto;color:#F2ECE8;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.legal pre code{display:block;color:#F2ECE8;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:break-word}
.legal :not(pre) > code{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font:13.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.legal ol{margin:0 0 14px;padding-left:22px;color:var(--ink-soft);font-size:16.5px}
.legal ol li{margin:6px 0}
.legal details{margin:0}
.hublead{font-size:18px;color:var(--ink-soft);margin:0 0 30px}
.guidecard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:0 0 14px;transition:border-color .15s ease}
.guidecard:hover{border-color:var(--accent)}
.guidecard h2{margin:0 0 8px;font-size:20px;font-weight:640;color:var(--ink);text-transform:none;letter-spacing:-.01em}
.guidecard p{margin:0;font-size:16px;color:var(--ink-soft)}

.paylink{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
th.tablehead{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:660;text-align:left;white-space:normal}

/* pricing hero merges into the cards panel: one white surface, no divider */
.hero-flat{background:var(--panel);padding:52px 0 0}
.hero-flat + .band{border-top:0;padding-top:30px}
.hero-flat .lede{margin-bottom:0}

.cellnote{display:block;font-size:13px;font-weight:400;color:var(--ink-soft);margin-top:2px}
table sup{font-size:11px}

/* ---- mobile nav ---- */
.hamburger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;padding:0 6px;border:0;background:none;cursor:pointer}
.hamburger span{display:block;height:2px;border-radius:2px;background:var(--ink)}
/* Download is the nav's one call to action, so it reads as a button rather than
   another link. One sits in the desktop link row, one beside the hamburger on
   mobile, and each is hidden where the other applies. */
.navdl{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;line-height:1;
  color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);border-radius:999px;
  padding:9px 18px;text-decoration:none;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease,transform .1s ease}
.navdl:hover{background:#0058B8;border-color:#0058B8;color:#fff}
.navdl:active{transform:translateY(1px)}
.navdl.is-downloading{opacity:.72;pointer-events:none}
.navlinks a.navdl{margin-left:22px;color:#fff;padding:9px 18px}
.navlinks a.navdl:hover{color:#fff}
@media (max-width:640px){.navdl-in{display:none}}
@media (min-width:641px){.navright{display:none}}

/* centred panel headings */
.panelhead{text-align:center;margin:0 0 26px}
.panelhead .big{margin:0}

/* accent rule under each card title */
.card h3{margin:0 0 10px;padding-bottom:9px;position:relative}
.card h3::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:3px;border-radius:2px;background:var(--rule)}

/* the comparison grid sits in its own card */
.glance{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:8px 26px 22px}

/* 4 across, then 3, then 2. Two stays all the way down to the smallest phone. */
@media (max-width:1180px){.card{flex-basis:calc((100% - 16px)/2);max-width:calc((100% - 16px)/2)}}
@media (max-width:860px){.card{flex-basis:100%;max-width:100%}}
/* one per row on a phone: two leaves the copy six lines deep and the
   'Most popular' pill wider than the title it has to clear */
@media (max-width:560px){.card{flex-basis:100%;max-width:100%}
}

/* anchor targets must clear the sticky nav, or a jump lands under it */
section[id],header[id]{scroll-margin-top:74px}

.referral{margin:14px 0 0;font-size:14px;text-align:center}
.referral summary{cursor:pointer;color:var(--accent);list-style:none}
.referral summary::-webkit-details-marker{display:none}
.referral input{margin:10px 0 0;width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);text-align:center;text-transform:uppercase;letter-spacing:.04em}
.referral-note{margin:8px 0 0;color:var(--danger)}
.referral-note:empty{display:none}
.paynote{margin:10px 0 0;text-align:center;font-size:13px;color:var(--muted)}
/* a 302 to a file gives the browser nothing to show, so the button says it itself */
.btn.is-downloading{opacity:.72;pointer-events:none}

/* Only shown when the comparison table actually overflows its column,
   which is a runtime question, so JS sets .can-scroll rather than a breakpoint. */
.scrollhint{display:none}
/* absolute, so it cannot change the first column's width or height: it sits in
   the gap between the two headers rather than becoming part of either */
th.tablehead{position:relative}
.tablewrap.can-scroll .scrollhint{display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:.12em;color:var(--rule);white-space:nowrap;pointer-events:none}
.tablewrap.can-scroll .scrollhint::after{content:" \2192"}

/* "Message Me" under the founder story */
.signrow{margin-top:22px}
.signrow .buildersign{margin:0 0 14px}
.otherapps{margin:10px 0 16px;font-size:15px;color:var(--muted)}
.otherapps a{color:var(--accent)}

/* Message Me sits beside Work With Me. Clears the float so the pair never ends up
   squeezed into the column beside the photo. */
.btnrow{display:flex;flex-wrap:wrap;gap:10px;clear:both}

/* The hero lede is now the full description rather than a one-liner, so it
   reads at body size. The old .heroblurb rules went with the paragraph they
   styled; .herofoot's are left in place, harmless, in case that block returns. */
.lede-long{font-size:18px;line-height:1.6;max-width:none;margin:0 0 30px;color:var(--ink-soft)}
.herogrid .lede-long{max-width:none}

/* Long-form pages carry prose tables: the repository format and the Time
   Machine comparison. The site's own table rules are built for the feature
   grid, where every column after the first is a tick in a fixed 190px, and a
   sentence in one of those became four words a line. So inside .legal the
   columns size themselves and read left, and the borders stay the site's. */
.legal .tablewrap{margin:0 0 22px}
.legal table{min-width:0}
.legal thead th:not(:first-child),
.legal tbody td:not(:first-child){text-align:left;width:auto}
.legal td,.legal th{vertical-align:top;font-size:15px;color:var(--ink-soft)}
.legal thead th{color:var(--muted)}
.legal hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.legal blockquote{border-left:3px solid var(--line);margin:0 0 16px;padding-left:16px;color:var(--muted);font-size:16px}
.legal blockquote p{color:inherit;font-size:inherit}

/* Rows where the other product wins. Marked rather than buried, because a
   comparison that never concedes anything is one nobody believes. */
.legal tr.concede td{background:color-mix(in srgb, var(--rule) 9%, transparent)}
.legal tr.concede td:first-child{position:relative;padding-left:26px}
.legal tr.concede td:first-child::before{content:"";position:absolute;left:10px;top:20px;width:6px;height:6px;border-radius:50%;background:var(--rule)}

/* ---- related guides, at the foot of every guide ----
   Seven of the ten original guides linked to exactly one sibling, which is a
   dead end for a reader and for a crawler. This is the block that fixes it, so
   it should read as navigation rather than as more body copy: no bullets, a
   rule above it, and the links carrying the accent rather than the body ink. */
.relatedhead{font-size:13px !important;text-transform:uppercase !important;letter-spacing:.12em !important;color:var(--muted) !important;font-weight:640 !important;margin:44px 0 12px !important;padding-top:22px;border-top:1px solid var(--line)}
.relatedguides{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:2px}
.relatedguides li{margin:0}
.relatedguides a{display:block;padding:9px 0;color:var(--accent);text-decoration:none;font-size:16px;border-bottom:1px solid var(--line)}
.relatedguides li:last-child a{border-bottom:0}
.relatedguides a:hover{text-decoration:underline}

/* ---- the app, above the fold ----
   The hero was a headline, two buttons and nothing else: the product did not
   appear anywhere until you scrolled past three sections. This is the window
   itself, at the width the copy sits in, so the first thing somebody sees is
   the thing being sold. Wide and short on purpose, because that is the shape
   a Mac window actually is. */
.heroshot{margin:0;padding:0;width:100%;min-width:0;max-width:100%}
.heroshot picture{display:block;width:100%;max-width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:0 18px 44px -28px rgba(90,79,70,.55)}
.heroshot img{display:block;width:100%;max-width:100%;height:auto}
.heroshot figcaption{margin:14px 0 0;font-size:15px;color:var(--muted);text-align:center}
@media (max-width:640px){
  .heroshot{margin-top:30px}
  .heroshot figcaption{font-size:14px;text-align:left}
}

/* ---- Get Copy Shelter, home panel 3 ----
   Modelled on Keep the Diff's "Get Keep the Diff" section: the platform
   families named with their devices, then one dark button per family. Copy
   Shelter's buttons open a menu rather than linking straight to a store,
   because every family here offers more than one place to get it. */
.get-lead{font-size:18px;color:var(--ink-soft);margin:0 auto 34px;max-width:520px;text-align:center}
.get-platforms{list-style:none;margin:0 auto 40px;padding:0;display:grid;gap:20px;max-width:420px;text-align:center}
.get-platforms li{display:grid;gap:2px}
.get-platform-name{color:var(--accent);font-weight:640;font-size:18px;text-decoration:none}
.get-platform-name:hover{text-decoration:underline}
.get-platform-devices{color:var(--ink-soft);font-size:15px}

.platform-buttons{display:grid;gap:12px;max-width:320px;margin:0 auto}
@media (min-width:700px){
  .platform-buttons{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:14px;align-items:start}
  /* A platform page with only one store offers one button, so it stays the
     same narrow width the home page's four-across row uses per button,
     rather than stretching across three empty grid columns. */
  .platform-buttons.single{grid-template-columns:none;max-width:320px}
}

/* Each button owns the menu that drops from it, so the two are positioned as
   one unit and closing one is closing the other. */
.platform-dropdown{position:relative}
.platform-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:inherit;font-size:16px;font-weight:560;cursor:pointer;text-align:left;text-decoration:none}
/* A store or download that is not out yet looks like every other button and
   does nothing when clicked (platform-links.js), the way MyLinedChart's site
   shows them (owner, 5 Oct 2026). */
.platform-btn.is-todo{cursor:default}
.platform-btn:hover{opacity:.92}
.platform-btn:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.platform-btn .glyph{flex:none;width:22px;height:22px;display:block}
.platform-btn .btn-prefix{display:block;font-size:11.5px;font-weight:400;opacity:.75;line-height:1.3}
.platform-btn strong{display:block;font-weight:640;line-height:1.25}
.platform-btn .chevron{margin-left:auto;flex:none;width:13px;height:13px;transition:transform .15s ease}
.platform-btn[aria-expanded="true"] .chevron{transform:rotate(180deg)}

.platform-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;margin:0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(90,79,70,.20)}
.platform-menu[hidden]{display:none}
.platform-menu li{margin:0}
.platform-menu a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15px;white-space:nowrap}
.platform-menu a:hover{background:var(--bg)}
.platform-menu a.is-todo{cursor:default}
/* Any link or button for a store that is not live yet: still readable, but
   visibly not the one to press. platform-links.js is what makes it inert. */
.is-todo{cursor:default}
.storelinks{display:grid;gap:8px;margin:0 0 4px}
.storelinks .btn{width:100%;text-align:center}
@media (prefers-color-scheme:dark){
  .platform-btn{background:#EFE9E5;color:#191716;border-color:#EFE9E5}
}

/* ---- platform pages (/mac, /iphone, /android, /windows, /linux) ----
   Same shape as the home hero, at a size that fits a single question and
   answer rather than the full pitch: eyebrow, h1, one line, then the install
   buttons the home panel already defined. */
.platformhero{padding:52px 0 48px}
.platformhero .wrap{max-width:760px;text-align:center}
/* One store button, centered and clear of the band below. In the four column
   grid the home page uses, it sat in the first column and wrapped its label. */
.platformhero .platform-buttons{margin-top:28px;display:flex;justify-content:center;max-width:none}
.platformhero .platform-dropdown{width:100%;max-width:320px}
.platform-what{margin:0 0 30px}
.platform-what li{margin:0 0 10px}
.reqtable td:first-child{font-weight:600;color:var(--ink)}

/* ---- the download hub's platform grid ----
   /download stays the deep Mac page it always was; this is only the signpost
   to the other four, so it is five small cards rather than five more sections. */
.platformgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0 34px}
.platformcard{display:grid;gap:4px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;transition:border-color .15s ease}
.platformcard:hover{border-color:var(--accent)}
.platformcard strong{color:var(--ink);font-size:16px;font-weight:640}
.platformcard span{color:var(--ink-soft);font-size:14px}
@media (max-width:560px){.platformgrid{grid-template-columns:1fr}}

/* the review page (/review) */
.rvstars{border:0;padding:0;margin:0 0 18px}
.rvstars legend{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:660;padding:0}
.rvstarrow{display:flex;gap:4px;margin-top:8px}
.rvstar{font-size:30px;line-height:1;background:none;border:0;padding:0 2px;cursor:pointer;color:var(--line)}
.rvstar.on,.rvstar:hover{color:#C77A06}
.rvstar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rvlabel{display:block;margin:18px 0 7px;font-weight:560;font-size:15px}
.rvinput{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.rvinput:focus{outline:2px solid var(--accent);outline-offset:1px}
textarea.rvinput{resize:vertical;line-height:1.55}
#rvSubmit{margin-top:22px}

/* Message Me: the form opens under the button row, on a panel so the fields read as one card */
.msgform{clear:both;margin:18px 0 0;max-width:520px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px 22px}
.msgform[hidden]{display:none}
.msgform .rvlabel:first-child{margin-top:0}
.msgform #msgSend{margin-top:20px}
.msgform #msgSend:disabled{opacity:.6;cursor:default}
.msghp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.msgts{margin:16px 0 0;min-height:65px}
.msgts iframe{max-width:100%}
.msgdone{margin:18px 0 0;max-width:520px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:12px}

/* Home hero (10 Oct 2026): one line, availability, Download and Try It Now, and a live window. */
.availability{margin:0 0 6px;font-size:15px;color:var(--muted)}
.availability a{color:var(--accent)}
.herocta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.herocta-row .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;text-decoration:none}
.dtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.dtab{font:inherit;font-size:14px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);cursor:pointer}
.dtab.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.dtab:focus-visible,.abtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.appwin{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(40,50,70,.12);overflow:hidden;text-align:left}
.appbar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.appbar i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.appbar span{margin-left:8px}
.appbody{padding:22px 24px;min-height:330px}
.okline{font-size:21px;font-weight:650;margin:0 0 6px;color:var(--ink)}
.okline .tick{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;font-size:15px;margin-right:6px}
.apppane .sub{margin:0 0 16px;color:var(--ink-soft);font-size:15px}
.approw{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.abtn{font:inherit;font-size:14px;padding:8px 16px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.abtn-p{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.abtn:disabled{opacity:.6;cursor:default}
.facts{margin:0;border:1px solid var(--line);border-radius:10px}
.facts div{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--line);font-size:14px}
.facts div:first-child{border-top:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0;text-align:right}
.alist{list-style:none;margin:0 0 14px;padding:0;border:1px solid var(--line);border-radius:10px}
.alist li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-size:14px}
.alist li:first-child{border-top:0}
.alist b{font-weight:550}
.alist span{color:var(--muted);text-align:right}
.callout-mini{font-size:14px;padding:10px 14px;border-radius:10px;background:var(--bg);color:var(--ink-soft)}
.toast{margin:14px 0 0;font-size:14px;color:var(--ok)}
.democap{margin:10px 0 0;font-size:13px;color:var(--muted);text-align:center}
@media (max-width:820px){.herocta-row{justify-content:center}.heroright>*{order:5;width:100%}.availability{order:3}.herogrid .herocta-row{order:4;margin:18px auto 30px}}
/* One tab per feature in the demo panel; without script every card shows. */
.ftabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px auto 0;max-width:900px}
.ftab{font:inherit;font-size:15px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.ftab:hover{border-color:var(--accent)}
.ftab.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ftab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.js-ftabs .fcards .card{display:none}
.js-ftabs .fcards .card.is-on{display:grid;flex:0 1 760px;max-width:760px}
@media (min-width:861px){.js-ftabs .fcards .card.is-on:has(.cardshot){grid-template-columns:1fr 1fr;align-items:center}}
.wnlist{line-height:1.7;padding-left:20px;margin:24px 0 16px}
.wnlist li{margin:0 0 8px}
/* Phones: "Copy" over "Shelter" beside the icon. */
@media (max-width:640px){.brand span{white-space:normal;width:min-content;line-height:1.05;font-size:15px}}