/* The hardware page.
   ⛔ The SHAPE is borrowed from how a product page is built: the thing itself
   shown big and early, one idea to a screen, no ruled rows, real space.
   Everything else is this site's and nothing else's.
   ⛔ AND THE TYPE SCALE IS THE SITE'S, not a bigger one invented for this page.
   Every size below is lifted straight out of pages.css, so this page sits in
   the set instead of looking like a page from somewhere else that got pasted
   in. h1 clamp(2rem,4.2vw,3.4rem). h2 clamp(1.45rem,2.5vw,2rem). Lede
   clamp(15.5px,1.35vw,18px). Kicker 11px at .16em. Those are the numbers. */

.hw{
  --gap:clamp(58px,7vw,104px);
  --rail:1080px;
  --rule:var(--hair);
  /* ⛔ Paint it. body is --paper on this site and only .page sets the ink, so a
     <main> that sets nothing lands on a white page with white text on it. */
  background:var(--ink);color:var(--white);
}
/* One rail, set on the SECTION, not on its children.
   ⛔ Putting it on the children broke the two sections that ARE the layout:
   .hwgrid and .hwfine are the grid, so the rule capped each heading instead of
   the grid, and three of them slid out to the page margin. The padding is
   inside the cap, hence the calc, or the rail narrows by the gutter. */
.hw section{
  padding-inline:var(--pad);
  max-width:calc(var(--rail) + var(--pad) * 2);
  margin-inline:auto;
}
.hw h1,.hw h2,.hw h3{font-family:var(--face);letter-spacing:-.022em;}

/* ── hero ─────────────────────────────────────────────────────────────── */
/* Clears the fixed nav, same as .page does on every other page. */
/* ⛔ Left, not centred. Every other page on this site sets its heading hard
   against the left margin at max-width 17ch, and a centred one here is the
   single loudest thing making this page look like it came from somewhere
   else. The product is what gets the middle of the page, not the type. */
/* Type on the left where the rest of the site puts it, product on the right.
   ⛔ Left-aligning everything into one column left the whole right half of the
   fold empty and the headline wrapping to four lines. */
.hwhero{
  padding-top:clamp(130px,17vh,190px);
  padding-bottom:clamp(44px,6vw,80px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:clamp(30px,5vw,72px);align-items:start;
  align-content:start;
}
.hwhero__eyebrow,.hwhero__h,.hwhero__sub,.hwhero__buy{grid-column:1;}
.hwhero__shot{grid-column:2;grid-row:1 / span 4;align-self:center;
              margin-top:clamp(20px,4vw,64px);}
.hwhero__eyebrow{
  font:500 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.38);margin-bottom:clamp(16px,2vw,22px);
}
.hwhero__h{
  font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.06;font-weight:600;
  margin:0;text-wrap:balance;
}
.hwhero__sub{
  font-family:var(--ui);font-size:clamp(15.5px,1.35vw,18px);line-height:1.55;
  color:var(--soft);max-width:46ch;margin:clamp(18px,2.2vw,26px) 0 0;
}

/* The product, big. ⛔ It is the reason anybody opened the page, so it gets
   the room. This is the one thing on here allowed to be larger than the rest
   of the site, because it is a photograph and not a heading. */
/* ⛔ THE PHOTOGRAPH SITS ON PAPER, UNTOUCHED.
   Four goes at cutting it off the white all failed the same way, and the
   reason is that the studio shadow is continuous with the phone: there is no
   brightness, no steepness and no flattening that separates them cleanly, so
   every attempt left a grey glow on a black page.
   Putting it on paper is not a workaround, it is the right answer. The shadow
   is a shadow on white and now reads as one, the phone keeps its real edge,
   and a light panel inside a dark page is a deliberate thing rather than a
   near miss. Nothing to go wrong on somebody else's screen. */
.hwhero__shot{
  position:relative;margin:0;width:100%;container-type:inline-size;
}
.hwhero__shot img{display:block;width:100%;height:auto;}

/* Our label on the back, under the moulded Nokia. Bigger than a real sticker
   on purpose: at true scale on a screen it is a smudge, and a mark nobody can
   read is not branding. */
.hwhero__label{
  position:absolute;left:77.4%;top:71%;transform:translate(-50%,-50%);
  padding:1.5cqw 3.4cqw;border-radius:1cqw;
  font-family:var(--face);font-weight:600;font-size:3.7cqw;
  letter-spacing:-.022em;line-height:1;color:var(--white);
  background:linear-gradient(178deg,#242427,#121214);
  box-shadow:
    inset 0 .2cqw 0 rgba(255,255,255,.18),
    0 .2cqw 0 rgba(0,0,0,.7),
    0 .8cqw 1.6cqw -.6cqw rgba(0,0,0,.6);
}
.hwhero__label i{font-style:normal;color:var(--signal);}

/* Price and button centred under the copy, as asked. The heading and lede stay
   left because that is how the rest of the site sets a page. */
.hwhero__buy{
  margin-top:clamp(26px,3.4vw,42px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hwhero__price{
  font-family:var(--face);font-weight:600;
  font-size:clamp(1.45rem,2.5vw,2rem);letter-spacing:-.026em;line-height:1;
}
.hwhero__terms{
  font:400 13.5px/1.5 var(--ui);color:var(--faint);
  margin:9px 0 clamp(20px,2.4vw,26px);
}

.hwbtn{
  display:inline-block;padding:13px 30px;border-radius:999px;
  background:var(--white);color:var(--ink);
  font:500 15px/1 var(--ui);letter-spacing:-.006em;text-decoration:none;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .28s;
}
.hwbtn:hover{opacity:.9;transform:translateY(-1px);}
.hwbtn--big{padding:15px 36px;font-size:15.5px;}

/* ── the argument ─────────────────────────────────────────────────────── */
.hwsay{padding-block:var(--gap);border-top:1px solid var(--rule);}
.hwsay__p{
  font-family:var(--face);font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.45;letter-spacing:-.018em;
  color:var(--faint);max-width:min(700px,90vw);margin:0 auto;
}
.hwsay__p b{color:var(--white);font-weight:400;}
.hwsay__p--after{margin-top:clamp(18px,2.2vw,26px);color:var(--white);}

/* ── three reasons ────────────────────────────────────────────────────── */
.hwgrid{
  padding-block:var(--gap);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.4vw,52px);
}
.hwgrid h2{
  font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.2;font-weight:600;
  margin:0 0 12px;
}
.hwgrid p{font:400 14.5px/1.62 var(--ui);color:var(--faint);}

/* ── what arrives ─────────────────────────────────────────────────────── */
.hwlight{padding-block:var(--gap);border-top:1px solid var(--rule);}
.hwlight__in{}
.hwlight__h{
  font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.14;font-weight:600;margin:0;
}
.hwlight__sub{
  font-family:var(--ui);font-size:15px;line-height:1.6;color:var(--faint);
  max-width:48ch;margin:16px 0 clamp(36px,4.4vw,56px);
}
.hwsteps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3.4vw,48px) clamp(30px,4vw,64px);
}
/* ⛔ The numbers are information, not decoration: this is the order the setup
   actually happens in before the box is sealed. */
.hwsteps__n{
  display:block;font:500 11px/1 var(--ui);letter-spacing:.16em;
  color:rgba(255,255,255,.30);margin-bottom:12px;
}
.hwsteps h3{
  font-size:15.5px;line-height:1.35;font-weight:600;margin:0 0 9px;
  letter-spacing:-.012em;
}
.hwsteps p{font:400 14px/1.62 var(--ui);color:var(--faint);}

/* ── spec ─────────────────────────────────────────────────────────────── */
.hwspec{padding-block:var(--gap);border-top:1px solid var(--rule);}
.hwspec__head h2{
  font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.14;font-weight:600;margin:0;
}
.hwspec__head p{
  font-family:var(--ui);font-size:15px;line-height:1.6;color:var(--faint);
  max-width:44ch;margin:14px 0 clamp(34px,4vw,52px);
}
/* ⛔ No rules between rows. Ruled rows make a product look like a spreadsheet,
   which is exactly what read cheap before. Space separates. */
.hwspec__grid{
  margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3vw,42px) clamp(30px,4vw,68px);
}
.hwspec__grid dt{
  font:500 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.38);margin-bottom:11px;
}
.hwspec__grid dd{margin:0;font:400 14.5px/1.6 var(--ui);color:var(--soft);}

/* ── the small print ──────────────────────────────────────────────────── */
.hwfine{
  padding-block:var(--gap);border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px);
}
.hwfine p{font:400 13px/1.62 var(--ui);color:rgba(255,255,255,.42);}
.hwfine b{color:var(--soft);font-weight:500;}

/* ── close ────────────────────────────────────────────────────────────── */
.hwend{padding-block:var(--gap);border-top:1px solid var(--rule);}
.hwend h2{
  font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.14;font-weight:600;
  margin:0 0 clamp(24px,3vw,36px);text-wrap:balance;
}
.hwend__t{font:400 13.5px/1.5 var(--ui);color:var(--faint);margin-top:18px;}

/* ⛔ Verified at 390. Every grid goes to one column and the headline loses its
   manual break or it snaps mid word. */
@media (max-width:900px){
  .hwgrid,.hwfine,.hwsteps{grid-template-columns:1fr;}
}
@media (max-width:560px){
  /* The spec entries are three or four words each. Stacked they made a long
     scroll of nothing; two abreast they read as a spec sheet. */
  .hwspec__grid{grid-template-columns:repeat(2,minmax(0,1fr));
                gap:clamp(22px,5vw,30px) clamp(14px,4vw,22px);}
  .hwspec__grid dt{font-size:10px;letter-spacing:.13em;}
  .hwspec__grid dd{font-size:13.5px;max-width:none;}
}
@media (max-width:820px){
  .hwhero{grid-template-columns:1fr;}
  /* ⛔ Two phones side by side means each one is only half the width you set,
     so 78vw made each handset about 39vw and it filled the screen. */
  .hwhero__shot{grid-column:1;grid-row:auto;width:min(330px,68vw);
                margin:clamp(22px,3.4vw,34px) auto 0;}
}
@media (max-width:560px){
  .hwhero__shot{width:min(300px,66vw);margin-inline:auto;}
}

/* ── in the box ───────────────────────────────────────────────────────────
   Four things, listed as four things. ⛔ Not cards with borders: a box has
   things in it, it is not a dashboard. */
.hwbox{padding-block:var(--gap);border-top:1px solid var(--rule);}
.hwbox__in{}
.hwbox__in > h2{
  font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.14;font-weight:600;
  margin:0 0 clamp(30px,3.6vw,46px);
}
.hwbox__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);
}
/* ⛔ Every item gets the SAME box to sit in, so a phone that is tall and a
   cable that is wide still line up along one baseline. Without a fixed frame
   each picture sets its own height and the four captions stagger, which is the
   single thing that makes a row like this look homemade. */
.hwbox__pic{
  display:grid;place-items:center;
  height:clamp(112px,11vw,146px);margin-bottom:18px;
}
/* ⛔ The size is set HERE, on the box, not left to the artwork. A drawing with
   its own intrinsic size will happily render at that size and burst out of the
   row, which is what the photograph did. */
.hwbox__pic svg{display:block;height:100%;width:auto;max-width:100%;}
.hwbox__list h3{
  font-size:15.5px;line-height:1.35;font-weight:600;letter-spacing:-.012em;
  margin:0 0 9px;padding-top:15px;border-top:1px solid var(--rule);
}
.hwbox__list p{font:400 14px/1.62 var(--ui);color:var(--faint);}
@media (max-width:900px){.hwbox__list{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.hwbox__list{grid-template-columns:1fr;}}

/* ── the closing box, centred ─────────────────────────────────────────────
   ⛔ Centred as a block, not just centred text. Text-align alone leaves the
   button sat on the left because it is inline-block inside a left-hung flow,
   which is what made it look half-done on the phone. */
.hwend{
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hwend h2{max-width:22ch;}

/* ── mobile: the box row reads as a list, centred ─────────────────────────
   ⛔ Asked for twice. On a phone the four items stack into one column and a
   left-hung heading over centred artwork looks like neither. Whole section
   centres together. */

/* ── section headings and body, centred, desktop and phone alike ──────────
   ⛔ The hero keeps its left-hung headline because that is how the site opens
   a page. Everything below it centres. Asked for three times: the mixture of
   a left heading over centred artwork was the thing that kept reading wrong. */
.hwsay__p{text-align:center;margin-inline:auto;}
/* ⛔ text-align alone was never going to do it. ansard.css caps every h2 at
   19ch, so this one is a 338px box sat against the left margin and the text
   was centring neatly INSIDE that box. The box is what needs centring. */
.hwbox__in > h2{text-align:center;margin-inline:auto;}
.hwbox__list li{text-align:center;}
.hwbox__list h3{border-top:0;padding-top:0;}
.hwbox__list p{max-width:32ch;margin-inline:auto;}
.hwspec__grid{text-align:center;}
.hwspec__grid dd{margin-inline:auto;max-width:30ch;}

/* Same trap, same fix, for every other heading on this page that centres. */
.hwspec__head h2,.hwend h2{margin-inline:auto;}