@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

/* Linen - woven, tactile, a little worn in.
 *
 * Closest of the four to Storybook, and deliberately so: same warm ground,
 * same serif-over-sans arrangement. The difference is texture. Where Storybook
 * is a clean printed page, this one has a weave - a faint woven grain on the
 * ground, and section breaks that are stitched rather than ruled.
 *
 * Lora carries the headlines instead of Fraunces. It is a slightly sturdier,
 * more everyday serif, which suits a page about a chore two people share
 * rather than about a keepsake.
 *
 * The grain is two repeating-linear-gradients at very low opacity. It costs
 * nothing, needs no image, and disappears entirely at high zoom rather than
 * turning into noise over the text.
 */

:root{
  --cloth:#FAF7F2;
  --cloth-2:#F1EBE1;
  --thread:rgba(41,77,18,.05);
  --thread-2:rgba(15,23,42,.035);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cloth:#13161A; --cloth-2:#1B2027;
    --thread:rgba(168,224,99,.045); --thread-2:rgba(255,255,255,.03);
  }
}
:root[data-theme="dark"]{
  --cloth:#13161A; --cloth-2:#1B2027;
  --thread:rgba(168,224,99,.045); --thread-2:rgba(255,255,255,.03);
}

body{
  color:var(--ink);
  font-family:Inter, system-ui, sans-serif;
  font-size:18px; line-height:1.76;
  -webkit-font-smoothing:antialiased;
  /* The weave: two fine threads crossing, over the warm ground. */
  background-color:var(--cloth);
  background-image:
    repeating-linear-gradient(90deg, var(--thread) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, var(--thread-2) 0 1px, transparent 1px 6px);
}

h1,h2,h3{margin:0; font-family:Lora, Georgia, serif; line-height:1.2; text-wrap:balance}
h1{font-size:clamp(36px,5.6vw,60px); font-weight:600; letter-spacing:-.02em}
h2{font-size:clamp(24px,3.2vw,34px); font-weight:600; letter-spacing:-.015em}
h3{font-size:20px; font-weight:600}
p{margin:0; max-width:60ch}
a{color:var(--primary-deep); text-underline-offset:4px; text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--primary); outline-offset:4px; border-radius:3px}

.wrap{max-width:1000px; margin:0 auto; padding:0 28px}

.skip{position:absolute; left:-9999px; top:0; z-index:20; background:var(--cloth); color:var(--ink); padding:12px 18px; border:2px solid var(--primary); border-radius:0 0 12px 0; font-weight:600}
.skip:focus{left:0}

header.site{background:var(--cloth); position:sticky; top:0; z-index:10; border-bottom:1px dashed var(--rule)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:19px; padding-bottom:19px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand img{width:124px; height:auto; display:block}
.brand-footer img{width:155px; height:auto; display:block}
nav.site{display:flex; gap:26px; align-items:center; flex-wrap:wrap}
nav.site a{font-size:15.5px; color:var(--ink-2); text-decoration:none}
nav.site a:hover{color:var(--ink)}
/* Stitched underneath - a running stitch, not a printed rule. */
nav.site a[aria-current="page"]{color:var(--ink); border-bottom:2px dashed var(--lime); padding-bottom:3px}

.eyebrow{font-family:Lora,serif; font-style:italic; font-weight:400; font-size:16.5px; color:var(--primary-deep); letter-spacing:0; text-transform:none}
.mark{color:var(--primary)}
.hl{background:linear-gradient(var(--lime),var(--lime)) 0 86%/100% 9px no-repeat; padding:0 3px}

.btn{
  display:inline-block; font-family:Inter,sans-serif; font-weight:600; font-size:16.5px;
  text-decoration:none; padding:14px 28px; border-radius:14px;
  background:var(--primary); color:#fff; border:2px solid var(--primary);
}
.btn:hover{background:var(--primary-deep); border-color:var(--primary-deep)}
.btn.ghost{background:transparent; color:var(--primary-deep); border-style:dashed; border-color:var(--rule)}
.btn.ghost:hover{background:var(--cloth-2); border-color:var(--primary)}
.btn:focus-visible{outline:3px solid var(--lime); outline-offset:3px}
.btn[aria-disabled="true"]{background:var(--cloth-2); color:var(--ink-3); border-style:dashed; border-color:var(--rule); cursor:default}
.btn[aria-disabled="true"]:hover{background:var(--cloth-2)}

main{padding:0 0 58px}
section{padding:62px 0}
/* Sections are stitched apart, not ruled apart. */
section + section{border-top:1px dashed var(--rule)}

.card{background:var(--cloth-2); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:9px}
.card h3{font-family:Lora,serif}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px}
.muted{color:var(--ink-2)}
.small{font-size:16.5px}
.stack{display:flex; flex-direction:column; gap:16px}

.hero{padding:72px 0 62px}
.hero-inner{display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:center}
@media (max-width:860px){.hero-inner{grid-template-columns:1fr}}
.hero h1{margin-top:14px}
.hero p.lede{font-size:19px; color:var(--ink-2); margin-top:22px; max-width:48ch}
.hero .cta{display:flex; gap:15px; flex-wrap:wrap; margin-top:32px; align-items:center}

.pagehead{padding:70px 0 6px}
.pagehead h1{font-size:clamp(33px,5vw,54px); margin-top:12px}
.pagehead p{font-size:18.5px; color:var(--ink-2); margin-top:20px; max-width:52ch}

.phone{
  justify-self:center; width:min(270px,84%); aspect-ratio:9/17.5;
  border-radius:30px; border:1px solid var(--rule);
  background:var(--surface);
  box-shadow:0 26px 54px -34px rgba(15,23,42,.42);
  padding:16px 14px; display:flex; flex-direction:column; gap:10px;
  transform:rotate(1.5deg);
}
.phone .bar{height:9px; border-radius:5px; background:var(--cloth-2)}
.phone .pet{display:flex; align-items:center; gap:10px; padding:10px; border-radius:13px; background:var(--primary-soft)}
.phone .dot{width:30px; height:30px; border-radius:50%; background:var(--lime)}
.phone .tiles{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:2px}
.phone .tile{height:56px; border-radius:13px; background:var(--cloth-2); display:flex; align-items:center; justify-content:center; font-size:20px}
.phone .row{height:34px; border-radius:9px; background:var(--cloth-2)}

.band{background:var(--cloth-2); border-top:1px dashed var(--rule); border-bottom:1px dashed var(--rule)}
.band .wrap{display:flex; flex-direction:column; gap:16px; padding-top:14px; padding-bottom:14px}
.band blockquote{
  margin:0; font-family:Lora,serif; font-style:italic; font-weight:400;
  font-size:clamp(25px,4.1vw,44px); line-height:1.25; letter-spacing:-.02em;
  max-width:20ch; color:var(--ink);
}
.band p{font-size:17.5px; color:var(--ink-2)}

.pill{display:inline-block; align-self:flex-start; font-size:13px; font-weight:600; padding:5px 14px; border-radius:999px; background:var(--lime-soft); color:var(--lime-ink); border:1px dashed var(--lime)}
.pill.wait{background:var(--cloth-2); color:var(--ink-3); border-color:var(--rule)}

ol.steps{margin:0; padding:0; list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:24px}
ol.steps li{counter-increment:step; position:relative; padding-left:56px; color:var(--ink-2); max-width:60ch}
ol.steps li::before{
  content:counter(step); position:absolute; left:0; top:-1px;
  width:38px; height:38px; border-radius:12px;
  border:2px dashed var(--lime); color:var(--lime-ink); background:var(--lime-soft);
  font-family:Lora,serif; font-weight:600; font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
ol.steps li strong{display:block; font-family:Lora,serif; font-weight:600; font-size:19px; color:var(--ink); margin-bottom:3px}

.prose{max-width:58ch; display:flex; flex-direction:column; gap:25px}
.prose h2{margin-top:20px}
.prose h3{margin-top:8px; font-family:Lora,serif}
.prose p{color:var(--ink-2)}
.prose ul{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:9px}
.prose li{color:var(--ink-2)}
.stamp{display:inline-block; font-family:Lora,serif; font-style:italic; font-size:15px; color:var(--ink-3); border-bottom:2px dashed var(--lime); padding-bottom:3px}
.callout{background:var(--cloth-2); border:1px dashed var(--rule); border-radius:16px; padding:24px 28px; display:flex; flex-direction:column; gap:9px}
.callout.warn{background:var(--lime-soft); border-color:var(--lime)}
.callout p{max-width:none}

.table-scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:15.5px}
caption{font-family:Lora,serif; font-style:italic; font-size:15px; color:var(--ink-3); text-align:left; padding-bottom:8px}
th,td{text-align:left; padding:14px 18px 14px 0; border-bottom:1px dashed var(--rule-soft); vertical-align:top}
th{font-size:13px; color:var(--ink-3); font-weight:600; letter-spacing:.05em; text-transform:uppercase}
tr:last-child td{border-bottom:0}
td.free{color:var(--ink-2)}

footer.site{border-top:1px dashed var(--rule); background:var(--cloth); padding:42px 0 60px}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start}
footer.site nav{display:flex; gap:22px; flex-wrap:wrap}
footer.site a{font-size:15px; color:var(--ink-2); text-decoration:none}
footer.site a:hover{color:var(--ink)}
footer.site p{font-family:Lora,serif; font-style:italic; color:var(--ink-3)}