/* The PC cheat sheet section: Four per row. Loaded by the shop and comparison hosts.
   Surfaces are the shop's own: the sheet card is today's white card (same border, radius, type and quiet Add button),
   the bundle is today's forest card, and links, buttons, prices and tags use the shop's classes and variables.
   Nothing here sets a colour of its own for those, so a later colour pass on the shop carries over without edits.
   One continuous surface per card, no gradients, no mint fills, no decorative borders. */

/* Inside a comparison frame the Dev button would sit on the page being judged. */
html[data-sheet-preview] :is(.preview-dev-trigger,#enhancedDevPanel){display:none!important}

/* The shop's own bundle, cards and note step aside while a study is drawn. Phones and List view never get here. */
#sheetStudy{display:none}
@media(min-width:601px){
 #shopResults:has(+ #sheetStudy.is-on)>:is(.subject-bundle,.product-grid,.shop-bottom-note){display:none}
 #sheetStudy.is-on{display:block}
}

.ss{color:var(--ink)}
.ss-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:16px}
.ss-stress{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--muted)}

/* ---------- Sheet card: today's card ---------- */
.ss-card{position:relative;min-width:0;border:1px solid var(--line);border-radius:13px;background:#fff;transition:border-color .16s,box-shadow .16s}
.ss-card:hover{border-color:#a7c1af;box-shadow:0 2px 4px #1e4c2b08}
/* The name is the link to the details, and its hit area is the whole card. */
.ss-title{display:flex;align-items:flex-start;width:100%;min-width:0;padding:0;border:0;background:none;text-align:left;font:600 20px/1.3 var(--serif);letter-spacing:-.025em;color:var(--ink);cursor:pointer}
.ss-title>span{display:block;min-width:0;text-wrap:pretty;overflow-wrap:break-word}
.ss-title::after{content:'';position:absolute;inset:0;border-radius:inherit}
.ss-title:focus-visible{outline:0}
.ss-card:has(.ss-title:focus-visible){outline:3px solid var(--green);outline-offset:2px}
/* Hovering the card promises the details; hovering Add promises only Add. */
.ss-card:hover:not(:has(.ss-add:hover)) .ss-title{color:var(--green-hover)}
.ss-card:hover:not(:has(.ss-add:hover)) .ss-more{text-decoration-color:currentColor}
.ss-meta{margin:0;min-width:0;font-size:15px;line-height:1.4;color:var(--muted)}
.ss-meta .tag{font-size:14px;vertical-align:-2px}
/* "What's covered" is the shop's text link, sized to sit on a line of text. The whole card is its hit area. */
.ss .ss-more{display:inline;min-height:0;padding:0;font-size:14px;line-height:1.4;white-space:nowrap}
.ss-price{font-size:20px;line-height:1.2}
.ss-price .tag{font-size:14px}
/* Add sits above the card-wide details link. */
.ss-add{position:relative;z-index:1;flex:none}
.ss .button.ss-add{min-width:86px}
.ss .owned-action.ss-add{color:var(--green-hover)}
.ss .included-label.ss-add{max-width:none;border:0;background:transparent;white-space:nowrap}
.ss-add .icon{width:17px;height:17px}

/* ---------- Bundle card: today's forest card ---------- */
.ss-hero{position:relative;display:flex;flex-direction:column;min-width:0;padding:18px 20px;border-radius:16px;background:var(--forest);color:#fff}
.ss-hero-title{margin:0;font:600 24px/1.15 var(--serif);letter-spacing:-.035em;color:#fff;text-wrap:balance}
.ss-hero-meta{margin:6px 0 0;font-size:14px;line-height:1.4;color:#c8dfcf}
.ss-hero-tag{margin:10px 0 0}
.ss-hero .tag{color:#fff;white-space:normal}
.ss-hero-mark img{display:block;width:40px;aspect-ratio:1318/1338;filter:brightness(0) invert(1)}
.ss-hero-foot{margin-top:auto;padding-top:12px}
.ss-hero-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 9px;margin:0}
.ss-hero-price strong{font:600 30px/1.15 var(--sans);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.ss-hero-price del{font-size:15px;color:#c8dfcf}
.ss-hero-save{margin:2px 0 0;font-size:14px;line-height:1.4;color:#d4e8da}
.ss-hero-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.ss-hero .ss-link{color:#fff;font-size:14px;text-decoration-color:#74a98b;white-space:nowrap}
/* One width for "Add bundle" and "Added", so "What's inside" beside it does not move when the bundle is added (7 October 2026). */
.ss-hero .ss-hero-add{flex:none;white-space:nowrap;min-width:138px;justify-content:center}
.ss-hero .ss-hero-add .icon{width:17px;height:17px}
.ss-hero :is(button,a):focus-visible{outline-color:#fff}

/* A block: name top left, mark top right, then price and action on one ruled line. */
.ss-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;column-gap:20px;padding:18px 24px 16px}
.ss-hero .ss-hero-head{grid-column:1;grid-row:1}
.ss-hero .ss-hero-title{font-size:30px}
.ss-hero .ss-hero-mark{display:block;grid-column:2;grid-row:1;align-self:start}
.ss-hero .ss-hero-foot{grid-column:1 / -1;grid-row:2;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-top:12px;padding-top:12px;border-top:1px solid #396249}
.ss-hero .ss-hero-actions{flex:none;gap:18px;margin:0}

/* Every sheet owned: a calm white card instead of an offer. */
.ss-hero.is-owned{border:1px solid var(--line);background:#fff;color:var(--forest)}
.ss-hero.is-owned .ss-hero-title{color:var(--forest)}
.ss-hero.is-owned .ss-hero-meta{color:var(--muted)}
.ss-hero.is-owned .tag{color:var(--green)}
.ss-hero.is-owned .ss-hero-mark img{filter:none}
.ss-hero.is-owned .ss-link{color:var(--green-hover);text-decoration-color:#8cba9f}
.ss-hero.is-owned .ss-hero-foot{border-top-color:var(--line)}
.ss-hero.is-owned :is(button,a):focus-visible{outline-color:var(--green)}

/* ---------- The note about sheets already owned: the shop's own line ---------- */
.ss-note{display:flex;align-items:flex-start;gap:12px;margin:24px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.ss-note .icon{flex:none;margin-top:2px;color:var(--green)}
/* When the last row has a spare cell, the note sits in it instead of under the grid. */
.ss-grid>.ss-note{align-self:center;margin:0;padding:0 12px 0 6px}

/* ---------- Four per row: the shop's own tall card, redrawn without its icon row ---------- */
.ss-four .ss-grid{grid-auto-rows:1fr}
.ss-four .ss-card{display:flex;flex-direction:column;padding:20px}
.ss-four .ss-title{min-height:52px}
.ss-four .ss-meta{margin-top:10px;font-size:14px}
.ss-four .ss-more{display:block;width:fit-content;margin-top:6px}
.ss-four .ss-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.ss-four .ss-card>.ss-more{margin-bottom:14px}
.ss-four .ss-hero{padding:22px 24px 20px}
/* Green icons: the topic icon as one large graphic in a pale brand green (BRAND.md Green 100), behind the card's text and cut by its edge.
   A solid tint, not a see-through one, because BRAND.md keeps every surface opaque. One graphic per card, never a pattern. */
.ss-four.has-ghost .ss-card{overflow:hidden;isolation:isolate}
.ss-ghost{position:absolute;z-index:-1;fill:none;stroke:#ddf3e8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* Side: in the empty right-hand side, a third of it past the edge. */
.ss-four.is-side .ss-ghost{top:26px;right:-44px;width:128px;height:128px;stroke-width:1.5}
/* Corner: larger, running off the top right corner behind the end of the name. */
.ss-four.is-corner .ss-ghost{top:-52px;right:-58px;width:184px;height:184px;stroke-width:1.6}

/* ---------- Looks for the bundle card. The layout, sizes and wording stay the same in all of them. ----------
   Colours are the shop's own and BRAND.md's Forest Raise (#174c30), so the later colour pass covers these too. */

/* Shared by the four new looks: the corners of the sheet cards beside it, and the lighter serif of the Smart Bundles lead card. */
.ss:not(.ss-skin-current) .ss-hero{border-radius:13px}
.ss:not(.ss-skin-current) .ss-hero-title{font-weight:500;letter-spacing:-.025em}
.ss:not(.ss-skin-current) .ss-hero-save{font-size:15px}
/* On forest the supporting text is full white; the White look sets its own. */
.ss:not(.ss-skin-current,.ss-skin-white) .ss-hero:not(.is-owned) :is(.ss-hero-meta,.ss-hero-save){color:#fff}

/* Coverline: the Smart Bundles lead card at this size. Solid forest, small white mark, ruled foot. Nothing more to add. */

/* Watermark: the SmartNote mark, large and one tone lighter than the card, running off its right edge. No rule. */
.ss-skin-watermark .ss-hero{overflow:hidden}
.ss-skin-watermark .ss-hero-head{grid-column:1 / -1}
.ss-skin-watermark :is(.ss-hero-head,.ss-hero-foot){position:relative;z-index:1}
.ss-skin-watermark .ss-hero-mark{position:absolute;top:50%;right:-36px;width:218px;aspect-ratio:1318/1338;transform:translateY(-50%);background:#174c30;-webkit-mask:url(smartnote-mark.svg) center/contain no-repeat;mask:url(smartnote-mark.svg) center/contain no-repeat}
.ss-skin-watermark .ss-hero-mark img{display:none}
.ss-skin-watermark .ss-hero .ss-hero-foot{border-top:0;padding-top:0}
.ss-skin-watermark .ss-hero.is-owned .ss-hero-mark{background:var(--soft)}
/* The owner's two mock-ups of 4 October 2026, on a bundle three rows tall: the mark in one quiet tone (#0a4a2b), very large.
   Extreme crop: 1000px across, so the card shows a slice of its middle. Oversized tone on tone: 560px, about half of it on the card.
   The mask file has clear space around the mark, so the sizes and offsets here are the mock-ups' own times 1318/872. */
.ss-skin-watermark:is(.is-mark-crop,.is-mark-tone) .ss-hero:not(.is-owned) .ss-hero-mark{background:#0a4a2b}
.ss-skin-watermark.is-mark-crop .ss-hero-mark{top:calc(50% + 8px);right:-816px;width:1511px}
.ss-skin-watermark.is-mark-tone .ss-hero-mark{right:-443px;width:846px}

/* Sheet stack: three sheets of paper in the corner, the front one carrying the number of sheets. No rule. */
.ss-skin-stack .ss-hero-head{grid-column:1 / -1;padding-right:118px}
.ss-skin-stack .ss-hero .ss-hero-title{font-size:28px}
.ss-skin-stack .ss-hero .ss-hero-foot{border-top:0;padding-top:0}
.ss-hero-stack{position:absolute;top:17px;right:34px;width:66px;height:93px}
.ss-sheet{position:absolute;inset:0;border:1px solid #c4d5c8;border-radius:3px;background:#fff}
.ss-sheet:nth-child(1){background:var(--line);transform:translate(-13px,3px) rotate(-9deg)}
.ss-sheet:nth-child(2){background:var(--soft);transform:translate(10px,1px) rotate(6deg)}
.ss-sheet.is-front{display:flex;flex-direction:column;align-items:flex-start;padding:9px 9px 10px;color:var(--forest);transform:rotate(-1.5deg)}
.ss-sheet.is-front b{font:600 30px/1 var(--serif);letter-spacing:-.03em}
.ss-sheet.is-front i{margin-top:2px;font:600 12px/1.2 var(--sans)}
.ss-sheet.is-front u{display:block;width:100%;height:1px;margin-top:auto;background:#c4d5c8;box-shadow:0 -6px #c4d5c8,0 -12px #c4d5c8}

/* White: a white card with a forest outline and the one solid forest button in the section. */
.ss-skin-white .ss-hero:not(.is-owned){border:1px solid var(--forest);background:#fff;color:var(--forest)}
.ss-skin-white .ss-hero:not(.is-owned) .ss-hero-title{color:var(--forest)}
.ss-skin-white .ss-hero:not(.is-owned) :is(.ss-hero-meta,.ss-hero-save,.ss-hero-price del){color:var(--muted)}
.ss-skin-white .ss-hero .ss-hero-mark img{filter:none}
.ss-skin-white .ss-hero .ss-hero-foot{border-top-color:var(--line)}
.ss-skin-white .ss-hero .ss-link{color:var(--green-hover);text-decoration-color:#8cba9f}
.ss-skin-white .ss-hero .ss-hero-add.dark:hover{border-color:#054d2a;background:#054d2a}
.ss-skin-white .ss-hero :is(button,a):focus-visible{outline-color:var(--green)}

/* ---------- The shop's own embedded bundle card, wearing the Watermark look (?sheetStudy=today-embedded-4-watermark) ----------
   The shop still draws this card. Only its look changes: the stacked-layers icon gives way to the SmartNote mark,
   large and one tone lighter, running off the right edge; lighter serif name; supporting text in full white; no rule. PC only. */
@media(min-width:601px){
 html[data-today-hero="watermark"] #shopResults .product-grid>.embedded-bundle:not(.owned){border-radius:13px}
 html[data-today-hero="watermark"] #shopResults .embedded-bundle:not(.owned)>div{position:relative;z-index:1}
 html[data-today-hero="watermark"] #shopResults .embedded-bundle:not(.owned)>div:first-child{padding-right:0}
 html[data-today-hero="watermark"] #shopResults .embedded-bundle:not(.owned) h3{font-weight:500;letter-spacing:-.025em}
 html[data-today-hero="watermark"] #shopResults .embedded-bundle:not(.owned) :is(.bundle-meta,.bundle-caption){color:#fff}
 html[data-today-hero="watermark"] #shopResults .embedded-bundle:not(.owned) .bundle-meta{font-size:14px}
 html[data-today-hero="watermark"] #shopResults .embedded-bundle:not(.owned) .bundle-caption{font-size:15px}
 html[data-today-hero="watermark"] #shopResults .embedded-bundle:not(.owned) .bundle-glyph{display:block;position:absolute;top:50%;right:-54px;width:318px;aspect-ratio:1318/1338;transform:translateY(-50%);background:#174c30;-webkit-mask:url(smartnote-mark.svg) center/contain no-repeat;mask:url(smartnote-mark.svg) center/contain no-repeat}
 html[data-today-hero="watermark"] #shopResults .embedded-bundle:not(.owned) .bundle-glyph svg{display:none}
 html[data-today-hero="watermark"] #shopResults .embedded-bundle:not(.owned) .actions{margin-top:12px;padding-top:0;border-top:0}
}

/* The same mark on a phone (600px and narrower): large, running off the right edge, and sitting just above the button.
   Measured on all 55 subjects (nothing owned, part owned) from 320 to 430px, a large mark cannot miss all the text, so this one
   is placed to stay clear of what matters most: it never runs behind the price, the saving line, the link or the button.
   On short cards it runs off the top edge; it passes only behind the ends of the name and the small grey line. Nothing moves. */
@media(max-width:600px){
 html[data-today-hero="watermark"] #shopResults .subject-bundle:not(.owned)>div{position:relative;z-index:1}
 html[data-today-hero="watermark"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{--mark:min(230px,59vw);display:block;position:absolute;top:auto;bottom:76px;right:calc(var(--mark)*-.4);width:var(--mark);aspect-ratio:1318/1338;background:#174c30;-webkit-mask:url(smartnote-mark.svg) center/contain no-repeat;mask:url(smartnote-mark.svg) center/contain no-repeat}
 html[data-today-hero="watermark"] #shopResults .subject-bundle:not(.owned) .bundle-glyph svg{display:none}
}
/* Narrow phones: the saving line reaches further across the card, so the mark is smaller and further off the edge. */
@media(max-width:360px){
 html[data-today-hero="watermark"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{--mark:160px;bottom:86px;right:-72px}
}

/* ---------- Smart Bundles lead card: the mark as a watermark, in place of the solid logo with the word "SmartNote" ----------
   The logo's own space is kept, so nothing else on the card moves. The logo and the word are hidden, and the mark is drawn
   one tone lighter than the card, large, running off the card's edge, in the area the logo had to itself.
   It stays clear of the name, the subjects, the price and the buttons on every screen size and for every grade. */
html[data-today-hero="watermark"] #smart .fcl-lead{overflow:hidden}
html[data-today-hero="watermark"] #smart .fcl-lead>:is(header,.fcl-contents,footer){position:relative;z-index:1}
html[data-today-hero="watermark"] #smart .fcl-lead .fcl-publisher :is(img,span){visibility:hidden}
html[data-today-hero="watermark"] #smart .fcl-lead .fcl-publisher::before{content:'';position:absolute;z-index:0;aspect-ratio:1318/1338;background:#174c30;-webkit-mask:url(smartnote-mark.svg) center/contain no-repeat;mask:url(smartnote-mark.svg) center/contain no-repeat}
/* PC: beside the subject list, between the name and the price line, running off the right edge. */
@media(min-width:1101px){
 html[data-today-hero="watermark"] #smart .fcl-lead .fcl-publisher::before{top:calc(49% - 114px);right:-62px;width:224px}
}
/* Tablet: in the top right corner, running off the top and the right. */
@media(min-width:701px) and (max-width:1100px){
 html[data-today-hero="watermark"] #smart .fcl-lead .fcl-publisher::before{top:-34px;right:-68px;width:150px}
 html[data-today-hero="watermark"] #smart .fcl-broad .fcl-lead .fcl-publisher::before{top:-62px;right:-60px;width:142px}
}
/* Phones: in the top right corner, running off the top and the right. The all-subjects card has less room above its list. */
@media(max-width:700px){
 html[data-today-hero="watermark"] #smart .fcl-lead .fcl-publisher::before{top:-34px;right:-58px;width:164px}
 html[data-today-hero="watermark"] #smart .fcl-broad .fcl-lead .fcl-publisher::before{top:-58px;right:-52px;width:154px}
}
@media(max-width:360px){
 html[data-today-hero="watermark"] #smart .fcl-lead .fcl-publisher::before{right:-70px;width:140px}
 html[data-today-hero="watermark"] #smart .fcl-broad .fcl-lead .fcl-publisher::before{right:-66px;width:148px}
}

/* ---------- Watermark options (?mark=), from the designers' discussion of 4 October 2026 ----------
   All three designers made the same observation: the PC mark the owner liked shows the WHOLE logo, ending exactly on the card's edge,
   while the large phone mark showed a cropped fragment. The mark file has 16.9% clear space on every side, so the logo drawn is
   two thirds of the width set here, and right: -16.9% of that width puts the logo's own edge on the card's edge.
   Sizes follow where the text sits at each width (measured): the Smart Bundles list starts higher on phones under 375px and on tablets.
   On a PC the subject-bundle card keeps the whole logo the owner liked in every option except Stacked squares. */
@media(max-width:600px){
 html[data-today-hero="watermark"][data-mark] #shopResults .subject-bundle:not(.owned) .bundle-glyph{top:auto}
}

/* ----- Whole · largest (brand identity designer) -----
   The whole logo as large as the card allows: its top on the padding line, its foot 16px above the button.
   It passes behind the last word of a long name and the end of the grey line, never behind the price, saving, link or button. */
@media(max-width:600px){
 html[data-today-hero="watermark"][data-mark="whole"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{--mark:clamp(127px,calc((100vw - 252px)*1.51),208px);bottom:calc(84px - var(--mark)*.169);right:calc(var(--mark)*-.169);width:var(--mark)}
}
/* ----- Whole · clear of text (mobile product designer) -----
   The whole logo as large as the empty space beside the price allows, one tone lighter on phones since nothing sits on it. */
@media(max-width:600px){
 html[data-today-hero="watermark"][data-mark="clear"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{bottom:50px;right:-26px;width:151px;background:#295a40}
 html[data-today-hero="watermark"][data-mark="clear"] #smart .fcl-lead .fcl-publisher::before{background:#295a40}
}
@media(max-width:350px){
 html[data-today-hero="watermark"][data-mark="clear"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{bottom:62px;right:-22px;width:127px}
}
/* Both whole options on the Smart Bundles lead card: the logo's old corner on phones and tablets, its old column on a PC. */
html[data-today-hero="watermark"]:is([data-mark="whole"],[data-mark="clear"],[data-mark="stack"]) #smart .fcl-lead .fcl-publisher::before{top:-4px;right:-26px;width:151px}
html[data-today-hero="watermark"]:is([data-mark="whole"],[data-mark="clear"],[data-mark="stack"]) #smart .fcl-broad .fcl-lead .fcl-publisher::before{top:-7px;right:-22px;width:127px}
html[data-today-hero="watermark"][data-mark="whole"] #smart .fcl-lead:not(.fcl-broad *) .fcl-publisher::before{top:-5px;right:-27px;width:160px}
@media(max-width:374px){
 html[data-today-hero="watermark"]:is([data-mark="whole"],[data-mark="clear"],[data-mark="stack"]) #smart .fcl-lead:not(.fcl-broad *) .fcl-publisher::before{top:-7px;right:-22px;width:127px}
 html[data-today-hero="watermark"]:is([data-mark="whole"],[data-mark="clear"],[data-mark="stack"]) #smart .fcl-broad .fcl-lead .fcl-publisher::before{top:-2px;right:-18px;width:106px}
}
@media(min-width:701px) and (max-width:1100px){
 html[data-today-hero="watermark"]:is([data-mark="whole"],[data-mark="clear"],[data-mark="stack"]) #smart .fcl-lead:not(.fcl-broad *) .fcl-publisher::before{top:5px;right:-21px;width:124px}
 html[data-today-hero="watermark"]:is([data-mark="whole"],[data-mark="clear"],[data-mark="stack"]) #smart .fcl-broad .fcl-lead .fcl-publisher::before{top:-2px;right:-18px;width:106px}
}
@media(min-width:1101px){
 html[data-today-hero="watermark"]:is([data-mark="whole"],[data-mark="clear"],[data-mark="stack"]) #smart .fcl-lead:is(*,:not(.fcl-broad *)) .fcl-publisher::before{top:calc(49% - 133px);right:-45px;width:263px}
}

/* ----- Line drawing (editorial art director) -----
   The logo as one fine 2px line, large, in the top right corner. The card's own top and right edges stand in for the logo's
   top and right bars, which run just off the card, and the name prints over the line. Two tones lighter than the card.
   Three mask images carry the line at the weight each size needs. */
html[data-today-hero="watermark"][data-mark="line"] #smart .fcl-lead .fcl-publisher::before{background:#295a40;-webkit-mask-image:url(smartnote-mark-line-phone.png);mask-image:url(smartnote-mark-line-phone.png)}
@media(max-width:600px){
 html[data-today-hero="watermark"][data-mark="line"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{top:-70px;bottom:auto;right:-70px;width:254px;background:#295a40;-webkit-mask-image:url(smartnote-mark-line-phone.png);mask-image:url(smartnote-mark-line-phone.png)}
}
@media(max-width:380px){
 html[data-today-hero="watermark"][data-mark="line"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{top:-64px;right:-70px;width:230px}
}
@media(max-width:350px){
 html[data-today-hero="watermark"][data-mark="line"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{top:-56px;right:-86px;width:200px;-webkit-mask-image:url(smartnote-mark-line-small.png);mask-image:url(smartnote-mark-line-small.png)}
}
html[data-today-hero="watermark"][data-mark="line"] #smart .fcl-lead .fcl-publisher::before{top:-61px;right:-61px;width:220px}
html[data-today-hero="watermark"][data-mark="line"] #smart .fcl-broad .fcl-lead .fcl-publisher::before{top:-50px;right:-50px;width:178px;-webkit-mask-image:url(smartnote-mark-line-small.png);mask-image:url(smartnote-mark-line-small.png)}
@media(max-width:374px){
 html[data-today-hero="watermark"][data-mark="line"] #smart .fcl-lead:not(.fcl-broad *) .fcl-publisher::before{top:-50px;right:-50px;width:178px;-webkit-mask-image:url(smartnote-mark-line-small.png);mask-image:url(smartnote-mark-line-small.png)}
 html[data-today-hero="watermark"][data-mark="line"] #smart .fcl-broad .fcl-lead .fcl-publisher::before{top:-45px;right:-45px;width:160px}
}
@media(min-width:701px) and (max-width:1100px){
 html[data-today-hero="watermark"][data-mark="line"] #smart .fcl-broad .fcl-lead .fcl-publisher::before{top:-45px;right:-45px;width:160px}
}
@media(min-width:1101px){
 html[data-today-hero="watermark"][data-mark="line"] #smart .fcl-lead:is(*,:not(.fcl-broad *)) .fcl-publisher::before{top:-101px;right:-101px;width:372px;-webkit-mask-image:url(smartnote-mark-line-pc.png);mask-image:url(smartnote-mark-line-pc.png)}
}

/* ----- Stacked squares (owner's idea, 4 October 2026) -----
   Three stacked squares in place of the logo, to say "bundle": the front square with two more showing behind it.
   smartnote-stack.png is drawn in the same box and with the same clear space as the logo file, so the logo's sizes carry over.
   Phone bundle card: whole, its right edge on the card's edge, beside the price and 10px above the button; it sits on no text
   when nothing is owned. Smart Bundles lead card: the sizes of the whole-logo options. PC bundle card (embedded layout): the logo's own box. */
html[data-today-hero="watermark"][data-mark="stack"] #shopResults .embedded-bundle:not(.owned) .bundle-glyph,
html[data-today-hero="watermark"][data-mark="stack"] #smart .fcl-lead .fcl-publisher::before{-webkit-mask-image:url(smartnote-stack.png);mask-image:url(smartnote-stack.png)}
@media(max-width:600px){
 html[data-today-hero="watermark"][data-mark="stack"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{bottom:46px;right:-28px;width:168px;-webkit-mask-image:url(smartnote-stack.png);mask-image:url(smartnote-stack.png)}
}
@media(max-width:380px){
 html[data-today-hero="watermark"][data-mark="stack"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{bottom:50px;right:-25px;width:150px}
}
@media(max-width:350px){
 html[data-today-hero="watermark"][data-mark="stack"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{bottom:61px;right:-23px;width:134px}
}

/* Stacked squares now uses the owner's own icon (smartnote-stack-lines.svg): three outlined squares in green, pale green and white.
   It is a picture, not a one-tone mask, so the mask is switched off and the picture is drawn in the same boxes. */
html[data-today-hero="watermark"][data-mark="stack"] #shopResults .embedded-bundle:not(.owned) .bundle-glyph,
html[data-today-hero="watermark"][data-mark="stack"] #smart .fcl-lead .fcl-publisher::before{background:url(smartnote-stack-lines.svg) center/contain no-repeat;-webkit-mask-image:none;mask-image:none}
@media(max-width:600px){
 html[data-today-hero="watermark"][data-mark="stack"] #shopResults .subject-bundle:not(.owned) .bundle-glyph{background:url(smartnote-stack-lines.svg) center/contain no-repeat;-webkit-mask-image:none;mask-image:none}
}

/* ---------- List view on a PC: two per row, no icons. Chosen over one per row on 4 October 2026, so it is on in every preview (?sheetList=one turns it off) ----------
   The shop's own rows, restyled: nothing is redrawn, so every button is the shop's. Phones keep their list as it is.
   The rows read left to right. The lines between them are the gaps of the grid, so no row carries a border of its own.
   With an odd number of sheets the last space stays empty and white; the shop's own note sits under the list as before. */
@media(min-width:601px){
 html[data-sheet-list="two"] #shopResults .product-row>.topic-icon{display:none}
 html[data-sheet-list="two"] #shopResults .product-row{grid-template-columns:minmax(0,1fr) auto}
}
@media(min-width:901px){
 html[data-sheet-list="two"] #shopResults .product-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
 html[data-sheet-list="two"] #shopResults .product-row{border:0}
 html[data-sheet-list="two"] #shopResults .product-list:has(>.product-row:last-child:nth-child(odd))::after{content:"";background:#fff}
}

/* ---------- The owner's two large marks on the List view's bundle banner (?sheetListMark=crop|tone) ----------
   The banner is the shop's own; its layers icon becomes the mark, in the same tone and at the same sizes as on the bundle cards,
   anchored to the banner's right edge. Phones and an owned set are left as they are. */
@media(min-width:601px){
 html[data-sheet-list-mark] #shopResults .subject-bundle:not(.embedded-bundle,.owned)>:not(.bundle-glyph){position:relative;z-index:1}
 html[data-sheet-list-mark] #shopResults .subject-bundle:not(.embedded-bundle,.owned) .bundle-glyph{display:block;top:50%;transform:translateY(-50%);aspect-ratio:1318/1338;background:#0a4a2b;-webkit-mask:url(smartnote-mark.svg) center/contain no-repeat;mask:url(smartnote-mark.svg) center/contain no-repeat}
 html[data-sheet-list-mark] #shopResults .subject-bundle:not(.embedded-bundle,.owned) .bundle-glyph svg{display:none}
 html[data-sheet-list-mark="crop"] #shopResults .subject-bundle:not(.embedded-bundle,.owned) .bundle-glyph{top:calc(50% + 8px);right:-816px;width:1511px}
 html[data-sheet-list-mark="tone"] #shopResults .subject-bundle:not(.embedded-bundle,.owned) .bundle-glyph{right:-443px;width:846px}
}

/* ---------- The owner's marks of 4 October 2026 on the Smart Bundles lead card (every width) and the phone's subject bundle card ----------
   One quiet tone, half off the right edge. Only the mark: text, sizes and buttons are the shop's. On the lead card the mark is centred
   in the part above the price row and cut off at that row: the box is that upper part and the mark is its mask.
   The mask file has clear space, so 520px becomes 786px (PC) and 300px becomes 453px (phone and tablet), with the overhang to match. */
html[data-smart-mark="tone"] #smart .fcl-lead{overflow:hidden;--smart-foot:113px;--smart-mask:right -383px center/786px auto}
@media(max-width:1100px){html[data-smart-mark="tone"] #smart .fcl-lead{--smart-foot:135px}}
@media(max-width:850px){html[data-smart-mark="tone"] #smart .fcl-lead{--smart-mask:right -227px center/453px auto}}
@media(max-width:600px){html[data-smart-mark="tone"] #smart .fcl-lead{--smart-foot:148px}}
html[data-smart-mark="tone"] #smart .fcl-lead>:is(header,.fcl-contents,footer){position:relative;z-index:1}
html[data-smart-mark="tone"] #smart .fcl-lead .fcl-publisher :is(img,span){visibility:hidden}
html[data-smart-mark="tone"] #smart .fcl-lead.fcl-lead .fcl-publisher.fcl-publisher::before{content:'';position:absolute;z-index:0;inset:0 0 var(--smart-foot) 0;width:auto;aspect-ratio:auto;background:#0a4a2b;-webkit-mask:url(smartnote-mark.svg) var(--smart-mask) no-repeat;mask:url(smartnote-mark.svg) var(--smart-mask) no-repeat}
/* The phone's subject bundle card: 300px, centred on the card's height, 165px off the right edge. */
@media(max-width:600px){
 html[data-smart-mark="tone"] #shopResults .subject-bundle.subject-bundle:not(.owned)>:not(.bundle-glyph){position:relative;z-index:1}
 html[data-smart-mark="tone"] #shopResults .subject-bundle.subject-bundle:not(.owned) .bundle-glyph.bundle-glyph{display:block;position:absolute;z-index:0;top:50%;right:-242px;bottom:auto;left:auto;width:453px;height:auto;aspect-ratio:1318/1338;transform:translateY(-50%);opacity:1;background:#0a4a2b;-webkit-mask:url(smartnote-mark.svg) center/contain no-repeat;mask:url(smartnote-mark.svg) center/contain no-repeat}
 html[data-smart-mark="tone"] #shopResults .subject-bundle.subject-bundle:not(.owned) .bundle-glyph.bundle-glyph svg{display:none}
}

/* ---------- Phones: no topic icon (chosen 4 October 2026). Rows and cards are the shop's own; the price stays where it is. ---------- */
.ss-paper{display:none}
@media(max-width:600px){
 html[data-sheet-phone="lean"] #shopResults :is(.product-row,.product-card) .topic-icon{display:none}
 html[data-sheet-phone="lean"] #shopResults .product-row{grid-template-columns:minmax(0,1fr) 74px}
 /* The phone's Cards view: the paper row goes, and P1 / P2 joins the pages and PDF line (?sheetPaper=row undoes it). */
 html[data-sheet-paper="inline"] #shopResults .product-card .product-top{display:none}
 html[data-sheet-paper="inline"] #shopResults .product-card .ss-paper{display:inline;white-space:nowrap}
}