/* ------------------------------------------------------------------------
   Buy Plug-in Solar

   The design source is the manila swing tag: the card a shop ties to a
   product with real facts written on it, string through one corner. That
   object is what a retail site claiming to be honest should actually look
   like, so it is built literally rather than borrowed as a metaphor. Three
   decisions carry the whole site and nothing else is allowed to compete.

   1. THE TAG is the signature device. Every object that stands on the page,
      the hero photograph, each kit record, the form, the closing tile, comes
      to a shallow point on its right edge, the way a swing tag narrows to
      where the string goes through. It is a whole-object silhouette cut with
      clip-path, never an edge treatment stuck onto a rectangle, so it can
      never be mistaken for a corner flourish. Because a clipped shape cannot
      carry a border along its own cut edges, no tag has a border at all: it
      is lifted off the page with an ambient drop-shadow that follows the true
      silhouette, point included, which is also what stops this site
      inheriting the dated offset-block look Sam has already ruled out
      elsewhere in the fleet.

   2. THE CUT LINE IS THE SEAM AND THE ONLY SEAM. Where two light grounds
      meet, they meet on a 3px dashed ink rule, full bleed: the perforation
      you tear a ticket or a voucher along. Nothing else on this site is
      dashed. Where a dark ink plane meets a light ground, the plane's own
      edge is the seam and no line is added on top of it, so the device is
      never doubled.

   3. THE SCAN is the one ambient motion: a soft pale bar travels down the
      dark ink plane of the hero and the finding band, the way a barcode
      scanner's light passes over whatever is put in front of it while it
      checks it against a database. That is the whole pitch of this site, so
      the motion is the pitch. Transform and opacity only, one clean loop, and
      it stops dead for anyone who has asked for less movement.

   Radius is 0 everywhere. Glyphs are Lucide geometry (ISC) drawn with square
   caps and mitred joins to match the corners. Texture is used once: a paper
   grain on the two ink planes, nowhere else.
   ------------------------------------------------------------------------ */

:root {
  /* Six roles. ink: the deep plane, all body text, the wordmark. paper: the
     page. card: the manila tag ground, 1.28 against paper, which is where
     two grounds separate for the eye without reading as banding, and it is
     also, literally, the colour of a real swing tag. yellow: ACTION ONLY,
     never decoration, never a large fill. amber: the one highlight, the
     headline phrase and the figures pulled from the register. muted:
     secondary text. */
  --ink: #16140E;
  --paper: #FBF8EF;
  --card: #ECDCAF;
  --yellow: #F6C500;
  --amber: #764700;
  --muted: #544E40;
  --display: 'Public Sans', sans-serif;
  --body: 'Source Sans 3', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.12; margin: 0; color: var(--ink); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--amber); text-decoration: none; font-weight: 600; }
a:hover { color: var(--ink); }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: 1220px; margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 12px 18px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }

.ico { flex-shrink: 0; }

.rise { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .08s; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* -------------------------------------------------------------- the tag -- */
/* The one signature device. clip-path cannot carry a border on its own cut
   edges, so a tag never has one: elevation comes from a drop-shadow that
   traces the true silhouette instead, per the note at the top of this file. */
.tag {
  --pt: 30px;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--pt)) 0, 100% 50%, calc(100% - var(--pt)) 100%, 0 100%);
  filter: drop-shadow(0 16px 30px rgba(22,20,14,.16)) drop-shadow(0 3px 7px rgba(22,20,14,.10));
}
.tag.tag-sm { --pt: 18px; }
.tag-photo { background: var(--card); }
.tag-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------- seam ---- */
/* ------------------------------------------------------------- masthead -- */
.mast-strip { background: var(--ink); color: var(--card); font-size: .86rem; }
.mast-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; }
.mast-strip b { color: var(--yellow); font-weight: 700; }

.mast { background: var(--paper); position: sticky; top: 0; z-index: 100; }
.mast > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.28rem; color: var(--ink); display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; }
.brand b { color: var(--amber); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { color: var(--ink); font-weight: 600; }
.nav-links a:hover { color: var(--amber); }
.btn { display: inline-block; background: var(--yellow); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: .96rem; padding: 13px 24px; border: none; }
.btn:hover { background: var(--amber); color: var(--paper); }
.btn-ghost { background: none; color: var(--ink); border: 1px solid var(--ink); font-family: var(--display); font-weight: 700; padding: 12px 22px; display: inline-block; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.burger { display: none; background: none; border: 1px solid var(--ink); padding: 9px 14px; font-family: var(--display); font-weight: 700; }
.mobile { display: none; }

/* ----------------------------------------------------------------- hero -- */
.hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; padding: 72px 0 84px; }
.hero .wrap { position: relative; z-index: 2; }
.scan-band { position: absolute; left: 0; right: 0; height: 46%; background: linear-gradient(180deg, transparent, rgba(246,197,0,.16) 45%, rgba(246,197,0,.16) 55%, transparent); filter: blur(18px); animation: scan 13s ease-in-out infinite; }
@keyframes scan { 0% { transform: translateY(-120%); opacity: 0; } 12% { opacity: 1; } 50% { transform: translateY(120%); opacity: 1; } 62% { opacity: 0; } 100% { transform: translateY(120%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scan-band { animation: none; display: none; } }

.hero h1 { color: var(--paper); font-size: clamp(2.75rem, 5.2vw, 4.5rem); max-width: 15ch; margin-bottom: 22px; }
.hero h3 { color: var(--paper); }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: start; margin-top: 40px; }
.lede { font-size: 1.2rem; max-width: 46ch; color: #E9E4D4; margin-bottom: 26px; }
.chips { display: flex; flex-direction: column; gap: 13px; margin-bottom: 30px; }
.chips li { display: flex; align-items: flex-start; gap: 11px; font-weight: 600; color: var(--paper); }
.chips .ico { color: var(--yellow); margin-top: 2px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-ctas .btn-ghost { border-color: rgba(251,248,239,.5); color: var(--paper); }
.hero-ctas .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hero-figure { margin-top: 34px; }
.hero-figure .tag-photo { aspect-ratio: 4 / 5; }
.hero-figure figcaption, .fig figcaption { font-size: .86rem; color: var(--muted); margin-top: 12px; padding-right: 30px; }
.hero .hero-figure figcaption { color: #B7AF98; }

/* ------------------------------------------------------------- sections -- */
.sec { padding: 78px 0; }
.sec--paper { background: var(--paper); }
.sec--card { background: var(--card); }
.sec--ink { background: var(--ink); color: var(--paper); }
.sec--ink h2, .sec--ink h3 { color: var(--paper); }
.sec--ink p { color: #DAD3BE; }
.sec--ink .fig figcaption, .sec--ink .attrib { color: #C9C2AA; }
.sec-head { max-width: 62ch; margin-bottom: 40px; }
.sec h2, .head-h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); margin-bottom: 14px; }
.sec-lede { font-size: 1.08rem; color: var(--muted); max-width: 58ch; }
.sec--ink .sec-lede { color: #C9C2AA; }

/* -------------------------------------------------------- kit tag cards -- */
.kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; margin-top: 8px; }
.kit {
  background: var(--paper);
  padding: 28px 46px 26px 26px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.kit-maker { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.kit-model { font-family: var(--display); font-weight: 800; font-size: 1.32rem; margin-bottom: 14px; }
.pill { display: inline-block; font-family: var(--display); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: 5px 12px; margin-bottom: 18px; align-self: flex-start; }
.pill-yes { background: var(--ink); color: var(--yellow); }
.pill-no { background: none; color: var(--muted); border: 1px solid var(--muted); }
.kit-body p { color: var(--muted); font-size: .96rem; margin-bottom: 16px; }
.kit-fields { margin: 4px 0 18px; }
.kit-fields div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; font-size: .88rem; }
.kit-fields div:nth-child(odd) { background: rgba(22,20,14,0.05); }
.kit-fields dt { color: var(--muted); }
.kit-fields dd { margin: 0; font-weight: 700; text-align: right; }
.kit-foot { margin-top: auto; padding-top: 6px; }
.kit-foot a, .kit-foot .go { font-family: var(--display); font-weight: 700; font-size: .92rem; }
.kit-note { grid-column: 1 / -1; font-size: .86rem; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------------------ deals ----- */
.deals-plate { background: var(--paper); padding: 42px; max-width: 760px; }
.deals-plate h3 { font-size: 1.5rem; margin-bottom: 14px; }
.deals-plate p { color: var(--muted); }
.deals-plate a { font-weight: 700; }

/* ----------------------------------------------------------- checklist -- */
.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 38px; margin-top: 10px; }
.check h3 { font-size: 1.08rem; margin-bottom: 8px; }
.check p { color: var(--muted); font-size: .96rem; }

/* ------------------------------------------------------------- finding -- */
.finding-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }
.finding-warn { display: inline-flex; align-items: center; gap: 9px; color: var(--yellow); font-family: var(--display); font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 16px; }
.finding .tag-photo { aspect-ratio: 3 / 4; }

/* ----------------------------------------------------------------- faq -- */
.q { padding: 24px 0; }
.q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--display); font-weight: 700; font-size: 1.06rem; cursor: pointer; list-style: none; }
.q summary::-webkit-details-marker { display: none; }
.q .ico { transition: transform .2s ease; color: var(--amber); }
.sec--ink .q .ico { color: var(--yellow); }
.q[open] .ico { transform: rotate(45deg); }
.q .a { padding-top: 12px; color: var(--muted); max-width: 68ch; }
.sec--ink .q .a { color: #C9C2AA; }
.q .a p { margin-bottom: .8em; }

/* --------------------------------------------------------------- closer -- */
.closer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.closer .tag-photo { aspect-ratio: 5 / 4; }
.closer-plate { background: var(--card); padding: 46px; display: flex; flex-direction: column; justify-content: center; }
.closer-plate h2 { margin-bottom: 14px; }
.closer-plate p { color: var(--muted); margin-bottom: 22px; }

/* ------------------------------------------------------------------ ask -- */
.ask-band { padding: 74px 0; background: var(--card); }
.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.ask-grid h2 { margin-bottom: 14px; }
.ask-grid .sec-lede { color: var(--muted); }

.form-card { background: var(--paper); padding: 30px 54px 30px 30px; }
.hero-figure ~ .form-card, .hero .form-card { background: rgba(251,248,239,.06); }
.form-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.form-card .said { color: var(--muted); font-size: .94rem; margin-bottom: 20px; }
.hero .form-card .said { color: #C9C2AA; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f { display: block; margin-bottom: 14px; }
.f span { display: block; font-size: .84rem; font-weight: 700; margin-bottom: 5px; }
.f input, .f textarea, .f select {
  width: 100%; font-family: var(--body); font-size: 1rem; padding: 11px 12px;
  border: 1px solid #CBC09A; background: var(--paper); color: var(--ink);
}
.hero .f input, .hero .f textarea { background: rgba(251,248,239,.08); border-color: rgba(251,248,239,.3); color: var(--paper); }
.f input:focus, .f textarea:focus, .f select:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card .btn { width: 100%; text-align: center; margin-top: 4px; }
.after { font-size: .82rem; color: var(--muted); margin-top: 14px; }
.hero .after { color: #B7AF98; }

/* -------------------------------------------------------------- footer -- */
.foot { background: var(--ink); color: #C9C2AA; padding: 62px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 42px; }
.foot .mark { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--paper); margin-bottom: 12px; }
.foot .mark b { color: var(--yellow); }
.foot h4 { color: var(--paper); font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.foot ul { display: flex; flex-direction: column; gap: 9px; }
.foot a { color: #C9C2AA; font-weight: 400; }
.foot a:hover { color: var(--yellow); }
.foot-legal { padding-top: 32px; font-size: .84rem; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot-legal p { max-width: 74ch; color: #9C9581; }
.foot-legal a { color: #C9C2AA; }

/* ---------------------------------------------------------- page heads -- */
.page-head { background: var(--card); padding: 58px 0 46px; }
.page-head .crumb { font-size: .86rem; color: var(--muted); margin-bottom: 16px; }
.page-head .crumb a { color: var(--muted); }
.page-head h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); max-width: 22ch; }
.page-head h1 em { font-style: normal; color: var(--amber); }
.page-head .pull { font-size: 1.14rem; color: var(--muted); max-width: 60ch; margin-top: 16px; }

/* ------------------------------------------------------------- article -- */
.article .wrap { display: grid; grid-template-columns: 1fr 300px; gap: 60px; padding-top: 54px; padding-bottom: 20px; align-items: start; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.5rem; margin: 2.4em 0 .7em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink); }
.prose ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }
.prose li { margin-bottom: .5em; }
.said-note { background: var(--card); padding: 22px 24px; margin: 1.8em 0; }
.said-note b { display: block; font-family: var(--display); margin-bottom: 8px; }
.prose .fig { margin: 1.8em 0; }
.prose .fig .tag-photo { aspect-ratio: 16 / 10; }
.attrib { font-size: .84rem; color: var(--muted); margin-top: 1.4em; }

.aside { position: sticky; top: 96px; }
.aside h4 { font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 12px; }
.aside ol { display: flex; flex-direction: column; gap: 9px; margin-bottom: 30px; }
.aside ol a { color: var(--ink); font-weight: 600; font-size: .94rem; }
.aside ol a:hover { color: var(--amber); }
.aside-card { background: var(--card); padding: 22px; }
.aside-card h4 { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 1.02rem; font-family: var(--display); margin-bottom: 8px; }
.aside-card p { color: var(--muted); font-size: .9rem; margin-bottom: 14px; }
.aside-card .btn { width: 100%; text-align: center; font-size: .88rem; padding: 11px; }

.siblings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 1em; }
.sib { background: var(--card); padding: 22px; display: flex; flex-direction: column; }
.sib h3 { font-size: 1.04rem; margin-bottom: 8px; }
.sib p { color: var(--muted); font-size: .92rem; margin-bottom: 14px; }
.sib .go { margin-top: auto; font-family: var(--display); font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------- credits -- */
.credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 10px; }
.credit { background: var(--paper); padding: 22px; }
.credit h3 { font-size: 1rem; margin-bottom: 8px; }
.credit p { font-size: .88rem; color: var(--muted); }

/* -------------------------------------------------------------- thanks -- */
.thanks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.thanks-grid .tag-photo { aspect-ratio: 4 / 5; }
.thanks-list { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.thanks-list a { font-weight: 700; }
.thanks-list span { display: block; color: var(--muted); font-weight: 400; font-size: .92rem; margin-top: 2px; }

/* Texture, used once: a fine cardboard grain on the two ink planes only,
   from transparenttextures.com, which is also the tag's own material. */
.hero, .sec--ink { background-image: url("/assets/tex/cardboard.png"); background-blend-mode: soft-light; background-size: 300px; }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .hero-grid, .finding-grid, .closer-grid, .thanks-grid { grid-template-columns: 1fr; }
  .kit-grid { grid-template-columns: repeat(2, 1fr); }
  .checks { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .article .wrap { grid-template-columns: 1fr; }
  .aside { position: static; margin-top: 40px; }
  .ask-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav-links, .hero-ctas .btn-ghost.lg { display: none; }
  .burger { display: inline-block; }
  .mobile[data-open="true"] { display: block; background: var(--paper); }
  .mobile ul { padding: 18px 0; gap: 14px; display: flex; flex-direction: column; }
  .mobile a { color: var(--ink); font-weight: 700; }
  .mast .nav > a.lg, .mast .nav > .btn.lg { display: none; }
  .kit-grid, .foot-grid, .credits { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; }
  .sec { padding: 56px 0; }
  .mast-strip .wrap { justify-content: center; text-align: center; }
  .form-card, .kit, .deals-plate, .closer-plate, .said-note { padding-right: 30px; }
}