/* Care guide. Palette from the PingsViolets style guide: Garden ink #253C2E, Leaf #344E38,
   Dusty rose #955963 (italic accents), Paper #FBFAF4, Blush #F6EEE7, Pale sage #E8ECDF;
   logo fills sage #91A853, rose #DA7F88, blush #E3AAAF, gold #EFB919.
   Same file prints as the box insert (see @media print). */
@property --dew { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

.care { --rose:#955963; --leaf:#344e38; --blush:#f6eee7; --sage:#e8ecdf; --rule:#cfd6c6;
        --soft:#455546; color:var(--ink); background:var(--paper); }
.care-wrap { width:min(100% - clamp(36px, 9vw, 160px), 1180px); margin-inline:auto;
             padding-block:clamp(24px, 4vw, 56px) clamp(48px, 7vw, 96px); }
.care h1, .care h2, .care h3 { font-family:var(--serif); font-weight:400; margin:0; color:inherit; }
.care em { color:var(--rose); font-style:italic; }
.care p { margin:0; line-height:1.6; }
.care-eyebrow { font:700 .69rem/1.45 var(--sans); letter-spacing:.18em; text-transform:uppercase;
                color:#4c5f4d; display:flex; gap:13px; align-items:center; }
.care-eyebrow i { text-transform:none; letter-spacing:.02em; font:italic .9rem var(--serif); }
.care-eyebrow .rule { width:31px; height:1px; background:currentColor; }

/* hero: blush panel, a soft gold-rose bloom in the corner */
.care-hero { position:relative; overflow:hidden; border-radius:12px; background:var(--blush);
             padding:clamp(32px, 5.5vw, 84px) clamp(24px, 5vw, 76px); }
.care-hero::after { content:""; position:absolute; right:-8%; top:-40%; width:min(52vw, 560px); aspect-ratio:1;
             border-radius:50%; pointer-events:none;
             background:radial-gradient(circle at 50% 50%, rgba(239,185,25,.20), rgba(218,127,136,.16) 38%, transparent 68%); }
.care-hero h1 { position:relative; font-size:clamp(3rem, 6.6vw, 6.2rem); line-height:.96; letter-spacing:-.06em;
                margin:22px 0 24px; }
.care-lede { position:relative; max-width:42ch; font-size:clamp(1rem, 1.25vw, 1.18rem); color:var(--soft); }

/* three rules: big rose numerals; a dew-drop glow sweeps in on hover */
.rules ol { list-style:none; margin:clamp(22px, 3vw, 40px) 0 0; padding:0;
            display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 28px); }
.rules li { position:relative; display:flex; gap:16px; align-items:flex-start; padding:22px 22px 24px;
            border:1px solid var(--rule); border-radius:10px; background:#fffef9;
            background-image:radial-gradient(circle at 18% 22%, rgba(218,127,136,.16) var(--dew), transparent calc(var(--dew) + 1%));
            transition:--dew .6s ease, border-color .3s, box-shadow .3s; }
.rules li:hover { --dew:70%; border-color:#e3aaaf; box-shadow:0 10px 30px -18px rgba(149,89,99,.55); }
.rules .num { flex:none; font:italic 400 3.2rem/0.9 var(--serif); color:var(--rose); }
.rules p { font-size:1rem; color:var(--soft); }
.rules strong { display:block; color:var(--ink); font:400 1.32rem/1.2 var(--serif); letter-spacing:-.02em; margin-bottom:6px; }

h2 { font-size:clamp(2.2rem, 3.8vw, 3.6rem); line-height:1.02; letter-spacing:-.05em; }

/* arrival steps */
.arrive { display:grid; grid-template-columns:.8fr 2fr; gap:clamp(28px, 5vw, 84px);
          padding-block:clamp(52px, 7vw, 100px) clamp(36px, 5vw, 64px); }
.side-title h2 { margin:12px 0 16px; }
.side-note { color:var(--soft); max-width:30ch; }
.steps { list-style:none; margin:0; padding:0; counter-reset:step;
         display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px, 3vw, 44px); }
.steps li { counter-increment:step; border-top:1px solid var(--ink); padding-top:14px; }
.steps h3 { font-size:clamp(1.35rem, 1.8vw, 1.8rem); line-height:1.15; letter-spacing:-.03em; margin-bottom:8px; }
.steps h3::before { content:counter(step, decimal-leading-zero); display:block; margin-bottom:6px;
                    font:700 .66rem/1 var(--sans); letter-spacing:.18em; color:var(--rose); }
.steps p { color:var(--soft); max-width:42ch; }

/* everyday grid */
.everyday { padding-block:clamp(28px, 4vw, 52px) clamp(52px, 7vw, 96px); border-top:1px solid var(--rule); }
.everyday h2 { margin-bottom:clamp(22px, 3vw, 40px); }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 2.6vw, 36px) clamp(22px, 3vw, 48px); }
.grid article { padding-left:18px; border-left:2px solid #91a853; }
.grid h3 { font-size:1.5rem; letter-spacing:-.03em; margin-bottom:6px; }
.grid p { color:var(--soft); }

/* winter: pale-sage band, full width of the wrap */
.winter { background:var(--sage); border-radius:12px; border:1px solid #cbd2c1; }
.winter-inner { padding:clamp(32px, 5vw, 72px) clamp(24px, 5vw, 76px); }
.winter h2 { margin:14px 0 clamp(18px, 2.5vw, 32px); max-width:20ch; }
.winter-cols { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 4vw, 64px); }
.winter-cols p { color:var(--soft); font-size:1.04rem; }
.winter strong { color:var(--ink); }

/* water + light notes */
.notes { display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px, 4vw, 64px); padding-block:clamp(48px, 6vw, 88px) 0; }
.notes article { border-top:1px solid var(--ink); padding-top:14px; }
.notes h3 { font-size:clamp(1.5rem, 2vw, 2rem); letter-spacing:-.035em; margin-bottom:8px; }
.notes p { color:var(--soft); max-width:52ch; }

/* troubleshooting */
.trouble { padding-block:clamp(52px, 7vw, 100px) clamp(40px, 5vw, 64px); }
.trouble h2 { margin-bottom:clamp(18px, 2.5vw, 32px); }
.trouble table { width:100%; border-collapse:collapse; font-size:1rem; }
.trouble th { text-align:left; font:700 .69rem/1.45 var(--sans); letter-spacing:.18em; text-transform:uppercase;
              color:#4c5f4d; padding:0 16px 10px 0; border-bottom:1px solid var(--ink); }
.trouble td { padding:13px 16px 13px 0; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--soft); }
.trouble td:first-child { width:38%; color:var(--ink); font:400 1.12rem/1.35 var(--serif); }
.trouble tbody tr { transition:background .2s; }
.trouble tbody tr:hover { background:linear-gradient(90deg, rgba(227,170,175,.22), transparent 80%); }

/* ask */
.ask { display:flex; align-items:center; justify-content:space-between; gap:16px; text-decoration:none; color:inherit;
       padding:clamp(22px, 3.5vw, 44px); border-radius:12px; background:var(--blush);
       font:400 clamp(1.6rem, 3vw, 3rem)/1.1 var(--serif); letter-spacing:-.045em; }
.ask-small { display:block; font:600 .86rem/1.4 var(--sans); letter-spacing:0; color:var(--rose); margin-bottom:6px; }
.ask-arrow { flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
             border:1px solid currentColor; font:400 1.4rem/1 var(--sans); transition:background .2s, color .2s, box-shadow .3s; }
.ask:hover .ask-arrow { background:var(--leaf); color:#fffdf5; box-shadow:0 0 0 6px rgba(145,168,83,.25); }

.print-only { display:none; }

@media (max-width:900px) {
  .rules ol, .grid { grid-template-columns:1fr 1fr; }
  .arrive { grid-template-columns:1fr; gap:22px; }
}
@media (max-width:600px) {
  .care-wrap { width:calc(100% - 32px); }
  .rules ol, .grid, .steps, .winter-cols, .notes { grid-template-columns:1fr; }
  .rules li { padding:18px; }
  .trouble td:first-child { width:44%; font-size:1.02rem; }
}
@media (prefers-reduced-motion:reduce) { .care * { transition:none !important; } }

/* print: one letter page for the box. Logo + compact two-column layout, no web chrome. */
@media print {
  @page { size:letter; margin:.26in .45in; }
  pv-header, pv-footer, .ask, .care-hero::after { display:none !important; }
  html, body, .care { background:#fff !important; }
  .care { font-size:8.2pt; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .care-wrap { width:auto; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.09in .3in; }
  .care p { line-height:1.32; }
  .care-hero, .rules, .winter, .trouble, .print-foot { grid-column:1 / -1; }
  .care-hero { padding:.11in .22in .12in; border-radius:6px; }
  .care-hero::before { content:""; display:block; height:.42in; margin-bottom:.06in;
                       background:url(assets/logo.webp) left center / contain no-repeat; }
  .care-hero h1 { font-size:24pt; margin:.04in 0 .05in; }
  .care-hero h1 br { display:none; }
  .care-lede { font-size:9pt; max-width:none; }
  .care-hero .care-eyebrow { display:none; }
  .care-hero::before { height:.3in; margin-bottom:.03in; }
  .rules ol { margin-top:0; gap:.12in; grid-template-columns:repeat(3, 1fr); }
  /* troubleshooting rows in two columns, no header row */
  .trouble thead { display:none; }
  .trouble tbody { display:grid; grid-template-columns:1fr 1fr; column-gap:.3in; }
  .trouble tr { display:grid; grid-template-columns:42% 58%; border-bottom:1px solid #cfd6c6; }
  .trouble td { border:0 !important; }
  .trouble td:first-child { width:auto !important; }
  .rules li { padding:.08in .1in; gap:.08in; border-radius:6px; break-inside:avoid; }
  .rules .num { font-size:20pt; }
  .rules strong { font-size:10pt; margin-bottom:2px; }
  .rules p { font-size:8.2pt; }
  h2 { font-size:15pt; }
  .care-eyebrow { font-size:6.4pt; }
  .arrive { display:block; padding:0; }
  .side-title h2 { margin:.02in 0 .03in; }
  .side-note { max-width:none; margin-bottom:.06in; }
  .steps { grid-template-columns:1fr; gap:.035in; }
  .steps li { padding-top:.04in; }
  .steps h3 { font-size:10pt; margin-bottom:1px; }
  .steps h3::before { display:inline; margin:0 .05in 0 0; font-size:6pt; }
  .everyday { padding:0; border:0; }
  .everyday h2 { margin-bottom:.06in; }
  .grid { grid-template-columns:1fr 1fr; gap:.07in .14in; }
  .grid article { padding-left:.07in; }
  .grid h3 { font-size:10pt; margin-bottom:1px; }
  .winter { border-radius:6px; }
  .winter-inner { padding:.07in .22in .08in; }
  .winter h2 { max-width:none; margin:.02in 0 .05in; font-size:13pt; }
  .winter-cols { gap:.25in; }
  .winter-cols p { font-size:8.2pt; }
  .notes { grid-column:1 / -1; padding:0; gap:.3in; }
  .notes article { padding-top:.04in; }
  .notes h3 { font-size:10.5pt; margin-bottom:1px; }
  .notes p { max-width:none; }
  .trouble { padding:0; }
  .trouble h2 { margin-bottom:.04in; font-size:13pt; }
  .trouble table { font-size:8.2pt; }
  .trouble th { font-size:6.2pt; padding-bottom:.03in; }
  .trouble td { padding:.035in .1in .035in 0; }
  .trouble td:first-child { font-size:9pt; }
  .print-only { display:block; }
  .print-foot { text-align:center; font:700 6.6pt/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
                color:#4c5f4d; border-top:1px solid #cfd6c6; padding-top:.06in; margin-top:.02in; }
}

/* hero photo (web only; print hides it to stay one page) */
.care-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px, 4vw, 64px); align-items:center; }
.care-hero-text { position:relative; z-index:1; }
.care-photo { position:relative; z-index:1; margin:0; border-radius:10px; overflow:hidden; aspect-ratio:4/3;
              box-shadow:0 24px 50px -30px rgba(37,60,46,.45); }
.care-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:62% 50%; }
@media (max-width:900px) {
  .care-hero { grid-template-columns:1fr; }
  .care-photo { aspect-ratio:16/9; }
}
@media print {
  .care-hero { display:block; }
  .care-photo { display:none !important; }
}

/* headline sized for the two-column hero */
@media screen { .care-hero h1 { font-size:clamp(2.9rem, 4.7vw, 4.7rem); } }
@media screen and (max-width:900px) { .care-hero h1 { font-size:clamp(2.6rem, 9vw, 4.4rem); } }

/* print button: leaf green, soft sage glow on hover */
.print-btn { position:relative; display:inline-flex; align-items:center; gap:10px; margin-top:24px;
             min-height:46px; padding:10px 20px; border:0; border-radius:3px; cursor:pointer;
             background:var(--leaf); color:#fffdf5; font:600 .91rem/1.3 var(--sans);
             transition:background .2s, box-shadow .3s; }
.print-btn svg { width:18px; height:18px; }
.print-btn:hover { background:#243e2a; box-shadow:0 0 0 6px rgba(145,168,83,.22); }
.print-btn:focus-visible { outline:3px solid var(--rose); outline-offset:4px; }
@media print { .print-btn { display:none !important; } }